/* Peças comuns do motor, iguais em todos os sites: formas e efeitos das imagens (secção 6.5 do desenho).
   Vem depois do estilo de raiz do site, por isso só mexe no que o /admin escolhe imagem a imagem. */
.foto[data-forma="arco"], .capsula[data-forma="arco"] { border-radius: 999px 999px 0 0; }
.foto[data-forma="circulo"] { border-radius: 50%; aspect-ratio: 1; }
.capsula[data-forma="circulo"] { border-radius: 50%; width: 0.7em; }
.foto[data-forma="cantos"], .capsula[data-forma="cantos"] { border-radius: 24px; }
.foto[data-forma="organico"], .capsula[data-forma="organico"] { border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; }
.foto[data-forma="capsula"] { border-radius: 999px; }
.foto[data-forma="retangulo"], .capsula[data-forma="retangulo"] { border-radius: var(--raio); }

[data-efeito="sombra"] { box-shadow: 12px 12px 0 var(--cor-texto); }
/* duas cores: foto a cinzento "impressa" sobre o destaque do site */
.bloco:has(> [data-efeito="duas-cores"]) { background: var(--cor-destaque); }
[data-efeito="duas-cores"] { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
[data-efeito="zoom"] { transition: transform 0.4s; }
[data-efeito="zoom"]:hover { transform: scale(1.04); }
[data-efeito="movimento"] { transform: translateY(var(--desvio, 0px)); }
@media (prefers-reduced-motion: reduce) {
  [data-efeito="zoom"]:hover, [data-efeito="movimento"] { transform: none; }
}

/* Sem espaços em branco (regra do Rodrigo): a foto de um bloco acompanha a altura da linha da grelha em vez de
   impor a sua (4:3), para o texto ao lado nunca ficar a boiar num vazio. contain:size tira-lhe a altura própria. */
.bloco-foto { display: grid; min-height: clamp(12rem, 18vw, 18rem); }
.bloco-foto > .foto:not([data-forma="circulo"]) { contain: size; height: 100%; aspect-ratio: auto; }

/* Marcação: herda o estilo do formulário de cada site; só o select (serviço) é novo e o estilo dos sites não o
   conhece. :where() deixa-o sem peso, para um site que o desenhe ganhar sempre. */
:where(.campo select) {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; font: inherit; color: inherit;
  background: var(--cor-superficie); border: 2px solid currentColor; border-radius: var(--raio);
}

/* ---------- Peças dos negócios locais ----------
   Aqui só o mecanismo (o que tem de ser assim para funcionar) e um mínimo legível; o aspeto é do estilo.css de cada
   site. Tudo o que é aparência vai em :where() (peso zero): qualquer regra do site ganha. */

/* atributo hidden tem de ganhar a display:flex/grid que o site ponha nestas peças */
:is(.janela, .galeria, .marcacao) [hidden], .aberto-agora[hidden] { display: none !important; }

/* Janelas (<dialog>): marcação, aviso de privacidade, galeria ampliada */
:where(.janela) {
  width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.25rem;
  color: var(--cor-texto); background: var(--cor-fundo); border: 0; border-radius: var(--raio);
}
:where(.janela)::backdrop { background: rgb(0 0 0 / 0.6); }
:where(.janela-topo, .janela-acoes) { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
:where(.janela-acoes) { margin-top: 1.25rem; }
/* Marcação: título e ações sempre à vista, só os passos deslizam (com 20 serviços o "Continuar" ficava 1000 px abaixo).
   Só com [open]: display:flex num <dialog> fechado mostrava-o. No /admin a janela é um <div> e fica como estava.
   O meio tem 6 px de folga (com margem negativa a compensar) para o contorno do foco das opções não ser cortado. */
dialog.marcacao-janela[open] { display: flex; flex-direction: column; }
.marcacao-janela[open] > form { display: flex; flex-direction: column; min-height: 0; }
.marcacao-janela[open] .marcacao-meio { min-height: 0; overflow-y: auto; margin: -6px; padding: 6px; }
:where(.marcacao-total) { flex-basis: 100%; margin: 0; font-weight: 700; }
/* X no canto: 44×44 (toque), cor do texto da janela; sobre a foto da galeria, branco em círculo escuro como as setas */
:where(.janela-fechar) { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; margin-left: auto;
  color: inherit; background: none; border: 0; border-radius: 50%; cursor: pointer; }
:where(.janela-fechar svg) { width: 20px; height: 20px; }
:where(.janela-fechar:focus-visible) { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.galeria-palco .janela-fechar { position: absolute; top: 0.5rem; right: 0.5rem; }
:where(.galeria-palco .janela-fechar) { color: #fff; background: rgb(0 0 0 / 0.55); }
:where(.marcacao-passo, .marcacao-dias, .marcacao-horas) { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.marcacao-passo legend) { margin-bottom: 0.75rem; font-weight: 700; }
:where(.marcacao-dias legend, .marcacao-horas legend) { margin: 1rem 0 0.5rem; }
/* opções (profissional, serviço, dia, hora): o botão nativo escondido, mas com o foco visível na caixa */
:where(.opcao) { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem;
  border: 1px solid currentColor; border-radius: var(--raio); cursor: pointer; }
/* Escolhida: fundo e letra vêm SEMPRE juntos. Com o peso de uma classe (o :has conta) ganha a um ".opcao { background }"
   do site, que antes trocava só o fundo e deixava a letra clara sobre fundo claro (dia e hora invisíveis no Netho).
   Um site que desenhe o próprio estado escolhido (.opcao:has(:checked), mais pesado) continua a ganhar. */
:where(.opcao):has(:checked) { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
:where(.opcao:has(:disabled)) { opacity: 0.4; cursor: not-allowed; }
:where(.opcao:has(:focus-visible)) { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
:where(.marcacao-opcoes) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* 30 dias numa fila que desliza para o lado (no telemóvel uma coluna de 30 caixas era uma parede) */
:where(.marcacao-dias .marcacao-opcoes) { flex-wrap: nowrap; overflow-x: auto; padding: 4px; }
:where(.marcacao-dias .opcao) { flex: none; }
:where(.marcacao-opcoes .opcao) { position: relative; margin: 0; flex-direction: column; justify-content: center; gap: 0; min-width: 4.5rem; text-align: center; }
:where(.marcacao-opcoes .opcao input) { position: absolute; opacity: 0; pointer-events: none; }
:where(.marcacao-resumo div) { display: flex; gap: 1rem; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid; }
:where(.marcacao-resumo dd) { margin: 0; text-align: right; }
:where(.campo-aceito) { display: flex; gap: 0.5rem; align-items: start; }

/* Comparador antes/depois: as duas fotos uma sobre a outra; a de "antes" corta-se em --pos. O <input range> invisível
   ocupa tudo, por isso arrastar (rato, dedo) e as setas do teclado vêm do browser. */
.comparador { position: relative; overflow: hidden; touch-action: pan-y; }
.comparador > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.comparador > .comparador-antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparador::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px; background: #fff; pointer-events: none; }
.comparador-controlo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparador:has(.comparador-controlo:focus-visible) { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.comparador-rotulo { position: absolute; bottom: 0.5rem; pointer-events: none; }
.comparador-rotulo-antes { left: 0.5rem; }
.comparador-rotulo-depois { right: 0.5rem; }
:where(.comparador-rotulo) { padding: 0.15rem 0.5rem; font-size: 0.8rem; color: #fff; background: rgb(0 0 0 / 0.6); border-radius: 4px; }

:where(.galeria-grelha, .equipa, .comodidades, .packs, .produtos, .precario ul) { list-style: none; margin: 0; padding: 0; }
:where(.galeria-grelha) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; }
:where(.galeria-abrir) { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
:where(.galeria-foto, .comparador) { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
:where(.galeria-filtros) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
:where(.galeria-filtros button) { min-height: 44px; padding: 0 1rem; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--raio); cursor: pointer; }
:where(.galeria-filtros [aria-pressed="true"]) { background: var(--cor-texto); color: var(--cor-fundo); }
:where(.galeria-janela) { width: min(60rem, calc(100% - 2rem)); }
:where(.galeria-grande) { display: block; width: 100%; max-height: 60dvh; object-fit: contain; }
.galeria-grande { touch-action: pan-y; user-select: none; }   /* o deslizar de lado é nosso (site.js): muda de foto */
/* setas ‹ › por cima da foto, ao meio na vertical; miniaturas numa fila que desliza de lado */
.galeria-palco { position: relative; }
.galeria-seta { position: absolute; top: 50%; translate: 0 -50%; }
.galeria-seta[data-anterior] { left: 0.5rem; }
.galeria-seta[data-proxima] { right: 0.5rem; }
:where(.galeria-seta) { width: 44px; height: 44px; padding: 0; font: 2rem/1 sans-serif; color: #fff; background: rgb(0 0 0 / 0.55); border: 0; border-radius: 50%; cursor: pointer; }
:where(.galeria-miniaturas) { display: flex; gap: 0.5rem; margin-top: 0.75rem; overflow: auto hidden; padding: 3px; scrollbar-width: thin; }
:where(.galeria-miniatura) { flex: none; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0.55; }
/* fora do :where: um "img { height: auto }" do site deixava as miniaturas com alturas diferentes */
.galeria-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.galeria-miniatura[aria-current="true"]) { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }
/* Com uma janela aberta a página por trás não desliza (a roda do rato passava para ela e as animações de scroll
   corriam por trás). overflow:hidden não mexe na posição, por isso ao fechar fica tudo onde estava; o gutter evita
   que a página salte de lado quando a barra de scroll some. */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

:where(.mapa-quadro) { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--raio); }
/* O mapa só fica com a roda do rato e com o dedo depois de se carregar nele (data-ativo, site.js): antes disso a
   roda fazia zoom no mapa em vez de descer a página. A dica (em cima: em baixo tapava os créditos do OSM) diz como o
   mexer: com rato ao passar, com o dedo sempre. */
.mapa-moldura { position: relative; }
.mapa-moldura:not([data-ativo]) .mapa-quadro { pointer-events: none; }
.mapa-moldura[data-ativo] .mapa-dica { display: none; }
:where(.mapa-dica) { position: absolute; left: 50%; top: 0.75rem; translate: -50% 0; padding: 0.45rem 0.85rem; border-radius: var(--raio);
  background: rgb(0 0 0 / 0.7); color: #fff; font-size: 0.875rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.mapa-moldura:hover .mapa-dica { opacity: 1; }
@media (hover: none) { .mapa-dica { opacity: 1; } }

/* Telefone: no computador texto, no telemóvel (ecrã de toque, sem rato) ligação e botão "Ligar". O custo fica junto. */
.tel-num-tel, .so-tel { display: none; }
@media (hover: none) and (pointer: coarse) {
  .tel-num-pc, .so-pc { display: none; }
  .tel-num-tel { display: inline; }
  .so-tel { display: revert; }
  .tel-ligar.so-tel { display: flex; }
}
:where(.tel-custo) { display: block; margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.35; color: var(--cor-texto-suave, inherit); }
:where(.tel-ligar) { align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; margin-top: 1rem; color: inherit; border: 1px solid currentColor; border-radius: var(--raio); text-decoration: none; }
:where(.tel-icone) { width: 1.2em; height: 1.2em; fill: currentColor; }
:where(.tel-rede a) { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; }
:where(.tel-rede svg) { width: 1.1em; height: 1.1em; fill: currentColor; }
/* Ficha da visita (bloco mapa com "ficha": true): colunas lado a lado, uma por cima da outra no telemóvel */
:where(.ficha) { display: grid; grid-template-columns: repeat(var(--ficha-col, 2), minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 5rem); margin-top: 1.5rem; }
:where(.ficha p) { margin: 0; }
:where(.ficha-rotulo) { margin-bottom: 0.5rem !important; font-weight: 700; }
:where(.ficha-link) { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; }
/* "Hoje": da tabela só fica o dia de hoje (o site.js marca-o); sem JS vê-se a semana toda */
.ficha-hoje .horario:has([aria-current]) > div:not([aria-current]) { display: none; }
@media (max-width: 699px) { :where(.ficha) { grid-template-columns: 1fr; gap: 1.75rem; } }
/* Redes: ícones oficiais monocromáticos, área de toque 44×44. No menu: ao lado do botão no computador, no fundo do
   painel no telemóvel (cada site pode mudar o ponto de corte, que é o do seu menu). */
:where(.redes) { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
:where(.rede) { display: inline-grid; place-items: center; width: 44px; height: 44px; color: inherit; }
:where(.rede svg) { width: 24px; height: 24px; fill: currentColor; }
:where(.menu-fim) { display: flex; align-items: center; gap: 0.5rem; }
.menu-painel > .redes { display: none; }
@media (max-width: 767px) { .menu-fim > .redes { display: none; } .menu-painel > .redes { display: flex; } }
:where(.precario-item) { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; padding: 0.5rem 0; }
:where(.precario-nome) { flex: 1; }
:where(.precario-nota) { flex-basis: 100%; }
:where(.horario div) { display: flex; justify-content: space-between; gap: 1rem; }
:where(.horario dd) { margin: 0; }
/* o dia de hoje marca-o o site.js (a página é gerada uma vez e o dia muda) */
/* fundo na cor do texto (e não só negrito): há sites com todos os dias já a negrito, e aí não se distinguia */
:where(.horario [aria-current]) { font-weight: 700; background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: 0 0 0 0.3em color-mix(in srgb, currentColor 12%, transparent); }
/* preçário com marcação: o item inteiro abre a janela com o serviço escolhido (ligação esticada sobre o item) */
:where(.precario-item:has(> .precario-nome > [data-servico])) { position: relative; cursor: pointer; }
:where(.precario-nome) [data-servico] { color: inherit; text-decoration: none; }
:where(.precario-nome [data-servico])::after { content: ''; position: absolute; inset: 0; }
:where(.comodidades li) { display: flex; gap: 0.6rem; align-items: center; }
:where(.selo) { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; color: inherit; }
.selo-estrelas { position: relative; display: inline-block; height: 1em; aspect-ratio: 5; }
.selo-estrelas svg { display: block; height: 100%; width: 100%; }
.selo-estrelas > svg { opacity: 0.3; }
.selo-cheias { position: absolute; inset: 0; overflow: hidden; width: calc(var(--nota) / 5 * 100%); }
.selo-cheias svg { width: auto; aspect-ratio: 5; }

/* Barra fixa do telemóvel: só abaixo de 768 px; a página ganha esse espaço em baixo para não tapar o rodapé. */
.barra-fixa { display: none; }
@media (max-width: 767px) {
  .barra-fixa { position: fixed; inset: auto 0 0; z-index: 50; display: flex; padding-bottom: env(safe-area-inset-bottom); }
  .barra-fixa > a { flex: 1; display: grid; place-items: center; min-height: 3.5rem; }
  body:has(> .barra-fixa) { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}
:where(.barra-fixa) { background: var(--cor-texto); color: var(--cor-fundo); }
/* peso de um "a" simples: ganha à cor geral das ligações do site (senão "Ligar" ficava da cor do fundo), mas perde para .barra-fixa a */
:where(.barra-fixa) a { color: inherit; }
:where(.barra-fixa > a) { font-weight: 700; text-decoration: none; }
:where(.barra-fixa > .barra-marcar) { background: var(--cor-destaque); }
:where(.barra-fixa) .barra-marcar { color: var(--cor-sobre-destaque); }

/* Hero-carrossel: faixas lado a lado (no telemóvel uma por cima da outra, pela ordem do site.json); em cada faixa as
   fotos estão empilhadas e só a de data-ativa se vê. O fundido é a transição da opacidade (--fundido). */
:where(.hero-carrossel) { min-height: 100svh; display: grid; }
:where(.hero-carrossel-faixas) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-area: 1 / 1; }
@media (max-width: 767px) { :where(.hero-carrossel-faixas) { grid-auto-flow: row; grid-auto-rows: 1fr; } }
.hero-carrossel-faixa { position: relative; overflow: hidden; min-height: 0; }
.hero-carrossel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity var(--fundido, 1.6s) ease-in-out; }
.hero-carrossel-foto[data-ativa] { opacity: 1; }
:where(.hero-carrossel-sobre) { grid-area: 1 / 1; place-self: center; position: relative; text-align: center; }
:where(.hero-carrossel-titulo) { margin: 0; }
:where(.hero-carrossel-logo) { display: block; max-width: min(80vw, 40rem); height: auto; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .hero-carrossel-foto { transition: none; } }
:where(.hero-carrossel-legenda:not([data-ativa])) { display: none; }

/* Régua do horário (aberto-agora com "regua": true): --de e --ate são posições na escala comum da semana. */
.regua-barra { position: relative; display: block; }
.regua-parte { position: absolute; top: 0; bottom: 0; left: var(--de); right: calc(100% - var(--ate)); }
:where(.regua div) { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: 0.25rem 1rem; }
:where(.regua dd) { display: grid; gap: 0.25rem; }
:where(.regua-barra) { height: 0.6rem; background: color-mix(in srgb, currentColor 10%, transparent); }
:where(.regua-parte) { background: currentColor; }
:where(.regua-parte[data-parte="noite"]) { background: var(--cor-destaque); }

/* Pedido de mesa: herda os campos de texto do site; tudo o que é escolha são as pastilhas .opcao (acima), com o radio
   nativo escondido por baixo (setas do teclado e foco visível na pastilha). O aviso de privacidade é o da marcação. */
.formulario-reserva [hidden] { display: none !important; }
:where(.reserva-grupo, .reserva-campo) { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.reserva-grupo) { display: grid; gap: 1.5rem; }
:where(.reserva-grupo-titulo, .reserva-campo legend) { padding: 0; }
:where(.reserva-campo legend) { margin-bottom: 0.6rem; font-weight: 600; }
:where(.reserva-opcoes) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
:where(.reserva-opcoes .opcao) { position: relative; margin: 0; justify-content: center; text-align: center; }
:where(.reserva-opcoes .opcao input) { position: absolute; opacity: 0; pointer-events: none; }
/* os dias numa fila que desliza de lado (com o rato arrasta-se: site.js) */
:where(.reserva-dias) { flex-wrap: nowrap; overflow-x: auto; padding: 4px; scrollbar-width: thin; cursor: grab; }
:where(.reserva-dias .opcao) { flex: none; flex-direction: column; gap: 0; min-width: 4.25rem; }
:where(.opcao-num) { font-size: 1.45em; font-weight: 700; line-height: 1.15; }
:where(.opcao-sup, .opcao-inf) { font-size: 0.8em; }
.opcao-inf:empty::before { content: '\a0'; }   /* sem mês: a mesma altura que os outros dias */
:where(.reserva-horas) { display: grid; gap: 0.9rem; }
:where(.reserva-horas .opcao) { min-width: 4.75rem; }
:where(.reserva-turno) { margin: 0 0 0.4rem; font-size: 0.9em; }
:where(.reserva-par, .reserva-dados) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; }
:where(.reserva-dados [data-campo="notas"]) { grid-column: 1 / -1; }
/* contador de pessoas: − número + (o número também se escreve) */
:where(.reserva-contador) { display: flex; width: fit-content; border: 1px solid currentColor; }
:where(.reserva-passo) { width: 48px; min-height: 48px; padding: 0; font: inherit; font-size: 1.4em; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.reserva-passo:focus-visible) { outline: 3px solid currentColor; outline-offset: -3px; }
.reserva-contador input { width: 3.5rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.reserva-contador input::-webkit-inner-spin-button, .reserva-contador input::-webkit-outer-spin-button { appearance: none; margin: 0; }
:where(.reserva-nota) { margin: 0.5rem 0 0; font-size: 0.9em; }
:where(.campo-erro) { margin: 0.5rem 0 0; font-weight: 700; }
:where(.reserva-fim) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
:where(.reserva-resumo) { margin: 0; font-weight: 600; }

/* Fita de fotos ("fita": true na galeria): anda sozinha da direita para a esquerda, em ciclo (a 2.ª cópia da lista
   encosta ao fim da 1.ª: -50% volta ao início sem salto). Só corre com [data-a-correr] (site.js; não com "reduzir
   movimento" nem sem JS: aí fica parada, sem a cópia, e desliza-se à mão). Pára com o rato, com foco do teclado lá
   dentro, com uma foto aberta (a fita por trás não se mexe) e enquanto se arrasta (data-parada, site.js).
   O :hover só conta com rato: num ecrã de toque fica "preso" depois de um toque e a fita não voltava a andar.
   pan-y: no telemóvel o arrasto de lado é da fita, o de cima para baixo continua a ser o scroll da página. */
.galeria-fita { overflow-x: auto; scrollbar-width: none; }
.galeria-fita::-webkit-scrollbar { display: none; }
.fita-pista { display: flex; width: max-content; }
.galeria-fita .galeria-grelha { display: flex; flex-wrap: nowrap; }
/* Um item vazio no fim de cada lista: o gap da lista (seja qual for, cada site escolhe o seu) entra também depois da
   última foto. Sem ele a última foto de uma cópia encostava à 1.ª da seguinte (Bopil, 03/11/2026: Lancia colado ao
   Dodge), e com ele cada cópia mede fotos + gaps certos: o -50% do ciclo continua a cair sem salto. */
.galeria-fita .galeria-grelha::after { content: ""; flex: none; }
.fita-copia { display: none !important; }
.galeria-fita[data-a-correr] { overflow: clip; touch-action: pan-y; user-select: none; cursor: grab; }   /* clip e não hidden: o foco numa foto não pode deslizar a fita por baixo (mudava a ordem à vista) */
.galeria-fita[data-a-correr] :is(.galeria-abrir, .galeria-foto) { cursor: inherit; }
.galeria-fita[data-a-correr]:active { cursor: grabbing; }
.galeria-fita[data-a-correr] .fita-copia { display: flex !important; }
.galeria-fita[data-a-correr] .fita-pista { animation: fita-ciclo var(--fita-duracao, 90s) linear infinite; }
.galeria-fita:is(:has(:focus-visible), [data-parada], :has(dialog[open])) .fita-pista { animation-play-state: paused; }
@media (hover: hover) { .galeria-fita:hover .fita-pista { animation-play-state: paused; } }
@keyframes fita-ciclo { to { translate: -50% 0; } }

/* Passo da área (17/10/2026, só com serviços em mais de uma área): caixas de escolha múltipla, com um visto na escolhida
   (pode juntar várias); nos serviços, o nome de cada área por cima e o botão para voltar e juntar outra. */
:where(.marcacao-areas) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; }
:where(.marcacao-areas .opcao) { min-width: 0; min-height: 64px; padding: 0.85rem 0.75rem; font-weight: 600; }
:where(.marcacao-areas .opcao:has(:checked) > span)::before { content: '\2713\a0'; }
:where(.marcacao-ajuda) { margin: 0 0 0.75rem; color: var(--cor-texto-suave); }
:where(.marcacao-area-nome) { margin: 1.25rem 0 0.25rem; font-weight: 800; font-size: 1.15em; }
:where(.marcacao-juntar) { min-height: 44px; margin: 0 0 0.25rem; padding: 0.5rem 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* Profissional em cartão (11/10/2026): foto ou iniciais num círculo em cima, nome por baixo; "qualquer um" com ícone.
   Grelha que se ajusta à largura (cabe a 360 px sem deslizar); o rádio continua lá (escondido, foco na caixa). */
:where(.marcacao-pessoas) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr)); gap: 0.5rem; }
:where(.marcacao-pessoas .opcao) { min-width: 0; padding: 0.85rem 0.4rem 0.75rem; gap: 0.5rem; }
:where(.marcacao-pessoas .opcao > span) { display: grid; justify-items: center; gap: 0.5rem; }
:where(.opcao-rosto) { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; overflow: hidden;
  background: var(--cor-superficie); color: inherit; font-weight: 700; letter-spacing: 0.04em; }
:where(.opcao-qualquer svg) { width: 30px; height: 30px; }
:where(.opcao-nome) { overflow-wrap: anywhere; line-height: 1.25; }

/* Menu aberto: um backdrop-filter (ou filter) no .menu-interior faz dele a caixa dos filhos com position:fixed, e o
   painel do telemóvel ficava com a altura da barra (0 px de conteúdo à vista: NewVision 17/10, Etc&Tal 18/10).
   Com o menu aberto o desfoque desliga-se no próprio .menu-interior (um ::before desfocado continua a funcionar). */
.menu-aberto .menu-interior { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; }

/* Aviso de cookies e /privacidade (só nos sites no ar). Origem: docs/maquetes/cookies/ */
/* Aviso de cookies. Só usa as variáveis do motor; a letra é a do site. Fica por cima da .barra-fixa (<768 px). */
.cookies {
  position: fixed; z-index: 60; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; padding: 10px 12px;
  background: var(--cor-superficie); color: var(--cor-texto);
  border: 1px solid var(--cor-linha, color-mix(in srgb, currentColor 30%, transparent)); border-radius: var(--raio);
  font: inherit; font-size: 0.8125rem; line-height: 1.35;
  animation: cookies-entra 150ms ease-out;
}
.cookies[hidden] { display: none; }
@keyframes cookies-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
.cookies-texto { margin: 0; color: var(--cor-texto-suave); }
.cookies-texto a { white-space: nowrap; color: var(--cor-texto); text-decoration: underline; text-underline-offset: 3px; }
.cookies-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookies button {
  min-height: 44px; padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--cor-texto); background: transparent;
  border: 1px solid var(--cor-texto); border-radius: var(--raio);
}
.cookies button:hover { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.cookies :focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; }
/* acima da barra fixa de marcar (3,5 rem), nunca a tapa */
@media (max-width: 767px) {
  body:has(> .barra-fixa) .cookies { bottom: calc(3.5rem + 12px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .cookies { right: auto; left: 20px; bottom: 20px; width: max-content; max-width: 700px;
    grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; }
  .cookies-botoes { display: flex; }
  .cookies button { padding: 0 14px; }
}
/* /privacidade: coluna de ~65 caracteres dentro do menu e rodapé do próprio site. */
.privacidade { padding: clamp(6.5rem, 12vw, 9rem) var(--margem, 1.25rem) clamp(3.5rem, 8vw, 6rem); }
.privacidade-texto { max-width: 65ch; margin-inline: auto; line-height: 1.6; }
.privacidade-texto h1 { margin: 0 0 0.5rem; } /* usa .titulo-area do site: letra, peso e tamanho dele */
.privacidade-data { margin: 0 0 2rem; color: var(--cor-texto-suave); font-size: 0.875rem; }
.privacidade-texto h2 { font-weight: 700; margin: 2.25rem 0 0.5rem; font-size: 1.25rem; line-height: 1.25; }
.privacidade-texto p, .privacidade-texto ul { margin: 0 0 1rem; }
.privacidade-texto ul { padding-left: 1.25rem; }
.privacidade-texto li { margin-bottom: 0.25rem; }
.privacidade-texto address { font-style: normal; margin: 0 0 1rem; }
.privacidade-texto a { color: inherit; }