/* Versicolor® · base partilhada (dono: agente "sistema").
   Tokens, tipografia, grelha e componentes. As páginas acrescentam assets/css/pages/<pagina>.css.
   Ideia que segura tudo: o dourado é luz (fios de 1 px, números, foco, estados), nunca tinta.
   Contrastes medidos (WCAG): --osso/--noite 17,4; --pedra/--noite 5,7; --luz/--noite 8,5; --luz-osso/--osso 5,2;
   --pedra-osso/--osso 5,4; --grafite/--osso 12,7; --erro/--noite 8,6; --erro-osso/--osso 5,3.
   Índice: 1 fontes · 2 tokens · 3 base · 4 tipografia · 5 grelha · 6 temas · 7 fio, etiquetas, pílulas, ligações
   · 8 formulário · 9 vídeo · 10 imagem · 11 comparador · 12 (galeria presa, saiu) · 13 ecrã inteiro · 14 traço do Método
   · 15 sequência (a única presa, 150svh) · 16 cabeçalho · 17 menu · 18 (botão fixo, saiu) · 19 fecho · 20 rodapé
   · 24 cartão · 25 modos e faixa · 26 painel, folha, texto a pedido e "Ler mais" · 27 linha de luz · 28 barra do projeto · 29 lista com
   pré-visualização · 21 movimento · 22 transições · 23 utilitários. Tokens v2 em DIRECAO-v2 §6. */

/* ------------------------------------------------------------------ 1. fontes (OFL, alojadas, latin + latin-ext) */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/newsreader-300-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: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/newsreader-300-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/newsreader-300-italico-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: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/newsreader-300-italico-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/intertight-400-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: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/intertight-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/intertight-500-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: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/intertight-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* recursos com métricas próximas, para o texto não saltar quando a fonte chega (medidos no Chrome) */
@font-face { font-family: 'Newsreader Recurso'; src: local('Georgia'), local('Times New Roman');
  size-adjust: 92%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Tight Recurso'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 95%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ 2. tokens */
:root {
  /* cor (DIRECAO §3) */
  --noite: #0B0B0C; --noite-2: #141414; --noite-3: #1E1D1B;
  --osso: #F3F1EC; --osso-2: #E7E3DA;
  --pedra: #8E8A82; --pedra-osso: #66625B; --grafite: #2B2A28;
  --luz: #CDA460;            /* dourado do V (mediana amostrada #BF9753, aclarado para ler como luz em 1 px) */
  --luz-osso: #7D5F2E;       /* o mesmo dourado escurecido, só para fios, números e foco sobre --osso */
  --erro: #E39A7B; --erro-osso: #A4462A;
  /* semânticas (mudam com o tema) */
  --fundo: var(--noite); --tinta: var(--osso); --tinta-2: var(--pedra); --tinta-3: #B7B2A8;
  --linha: rgba(243, 241, 236, .14); --linha-forte: rgba(243, 241, 236, .42); --acento: var(--luz);
  --erro-cor: var(--erro); --superficie: var(--noite-2);
  /* tipografia */
  --serif: 'Newsreader', 'Newsreader Recurso', Georgia, 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Inter Tight Recurso', Arial, 'Helvetica Neue', sans-serif;
  --t-abertura: clamp(32px, 4.4vw, 68px);
  /* v2 (DIRECAO-v2 §6): menos ecrãs, mais informação por ecrã */
  --t-capitulo: clamp(36px, 4.6vw, 72px);   /* só o h1 de páginas sem filme */
  --t-titulo: clamp(28px, 3vw, 48px);
  --t-frase: clamp(21px, 2vw, 30px);
  --t-lead: clamp(18px, 1.3vw, 21px);
  --t-texto: 17px;
  --t-pequeno: 14px;
  --t-rotulo: 11px;
  /* espaço e grelha */
  --margem: clamp(20px, 5vw, 96px);
  --calha: clamp(12px, 1.7vw, 28px);
  --secao: clamp(56px, 7vw, 112px);         /* 101 px a 1440 (era 187) */
  --grupo: clamp(24px, 2.8vw, 40px);        /* entre grupos de imagens dentro de uma secção */
  --barra: 44px;                            /* barra de contexto do projeto (PC) */
  --cab: 72px;
  --largura-texto: 36rem;
  /* movimento (medido nas referências; DIRECAO §4) */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-vt: cubic-bezier(.2, .7, .2, 1);
  --t-curto: .4s; --t-medio: .8s; --t-longo: 1.2s;
  color-scheme: dark;
}
@media (max-width: 767px) {
  :root { --t-texto: 16px; --cab: 60px; }
}

/* ------------------------------------------------------------------ 3. base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noite); color: var(--osso); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cab) + 8px); }
body { margin: 0; min-height: 100svh; background: var(--fundo); color: var(--tinta); font: 400 var(--t-texto)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-kerning: normal; overflow-x: clip; }
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: rgba(205, 164, 96, .38); color: var(--osso); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }
/* o próprio diálogo recebe o foco quando se abre com o rato ou com o dedo (core.js): sem contorno */
dialog:focus, dialog:focus-visible { outline: none; }
/* Lenis (assets/js/vendor/lenis.css, integrado para poupar um pedido) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* as faixas e as filas horizontais só prendem o eixo x: a roda vertical por cima delas continua a descer a página */
.lenis :is(.faixa, [data-faixa], .ix-divisoes__lista)[data-lenis-prevent] { overscroll-behavior-y: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.menu-aberto, html.ecra-aberto { overflow: hidden; }

.saltar { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--osso); color: var(--noite);
  font: 500 14px/1 var(--sans); border-radius: 999px; transition: top .3s var(--ease); }
.saltar:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ 4. tipografia */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 300; letter-spacing: -.012em; font-optical-sizing: auto;
  font-variant-numeric: lining-nums; text-wrap: balance; }
h1, h2, h3, h4 { line-height: 1.05; }
.t-abertura { font-family: var(--serif); font-weight: 300; font-size: var(--t-abertura); line-height: 1.04; letter-spacing: -.016em; }
.t-capitulo { font-family: var(--serif); font-weight: 300; font-size: var(--t-capitulo); line-height: .96; letter-spacing: -.028em; }
.t-titulo { font-family: var(--serif); font-weight: 300; font-size: var(--t-titulo); line-height: 1.02; letter-spacing: -.02em; }
.t-frase { font-family: var(--serif); font-weight: 300; font-size: var(--t-frase); line-height: 1.16; letter-spacing: -.012em; }
.t-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-3); max-width: 40rem; text-wrap: pretty; }
.t-texto { font-size: var(--t-texto); line-height: 1.62; max-width: var(--largura-texto); color: var(--tinta-3); text-wrap: pretty; }
.t-pequeno { font-size: var(--t-pequeno); line-height: 1.5; }
.italico { font-style: italic; }
.rotulo { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.rotulo--luz { color: var(--acento); }
.rotulo--2 { color: var(--tinta-2); }
.numeral { font-family: var(--serif); font-weight: 300; font-variant-numeric: lining-nums tabular-nums; color: var(--acento);
  line-height: .9; letter-spacing: -.02em; }
.numeral--grande { font-size: clamp(88px, 13vw, 220px); }
.numeral--medio { font-size: clamp(44px, 5vw, 80px); }
.numeral--pequeno { font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--acento); }
/* o ® nos títulos: a Newsreader já o desenha pequeno e alto; o <sup> só o alinha */
sup { font-size: .6em; line-height: 0; vertical-align: .62em; letter-spacing: 0; margin-left: .02em; font-feature-settings: normal; }
:is(h1, h2, h3, .serif, .t-abertura, .t-capitulo, .t-titulo, .t-frase) sup { font-size: .5em; vertical-align: .9em; margin-left: .04em; }
.marca-palavra { font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.marca-palavra sup { font-size: .8em; vertical-align: .4em; letter-spacing: 0; margin-left: .1em; }
blockquote, .citacao { font-family: var(--serif); font-weight: 300; }
.citacao__texto { font-size: var(--t-frase); line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; max-width: 24ch; }
.citacao__autor { margin-top: 28px; font: 500 var(--t-rotulo)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

/* ------------------------------------------------------------------ 5. grelha e secções */
.envolve { padding-inline: var(--margem); }
.grelha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); padding-inline: var(--margem); }
.grelha > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .c-1-6 { grid-column: 1 / 7; } .c-7-12 { grid-column: 7 / 13; } .c-2-8 { grid-column: 2 / 9; } .c-2-12 { grid-column: 2 / 13; }
  .c-1-5 { grid-column: 1 / 6; } .c-6-12 { grid-column: 6 / 13; } .c-8-12 { grid-column: 8 / 13; } .c-3-11 { grid-column: 3 / 11; }
  .c-1-8 { grid-column: 1 / 9; } .c-9-12 { grid-column: 9 / 13; } .c-1-4 { grid-column: 1 / 5; } .c-5-12 { grid-column: 5 / 13; }
}
.secao { position: relative; padding-block: var(--secao); }
.secao--curta { padding-block: calc(var(--secao) * .6); }
.secao--ecra { min-height: 100svh; }
.sangra { margin-inline: calc(var(--margem) * -1); }
.pilha > * + * { margin-top: var(--pilha, 24px); }

/* ------------------------------------------------------------------ 6. temas */
.tema-osso { --fundo: var(--osso); --tinta: var(--grafite); --tinta-2: var(--pedra-osso); --tinta-3: #45433F;
  --linha: rgba(43, 42, 40, .14); --linha-forte: rgba(43, 42, 40, .42); --acento: var(--luz-osso); --erro-cor: var(--erro-osso);
  --superficie: var(--osso-2); background: var(--fundo); color: var(--tinta); color-scheme: light; }
.tema-noite { --fundo: var(--noite); --tinta: var(--osso); --tinta-2: var(--pedra); --tinta-3: #B7B2A8;
  --linha: rgba(243, 241, 236, .14); --linha-forte: rgba(243, 241, 236, .42); --acento: var(--luz); --erro-cor: var(--erro);
  --superficie: var(--noite-2); background: var(--fundo); color: var(--tinta); color-scheme: dark; }
.tema-noite-2 { background: var(--noite-2); }
.tema-noite-3 { background: var(--noite-3); }
body.tema-osso { background: var(--osso); }

/* ------------------------------------------------------------------ 7. fio de luz, etiquetas, pílulas, ligações */
.fio { display: block; height: 1px; width: 100%; background: var(--acento); transform-origin: 0 50%; border: 0; margin: 0; }
.fio--curto { width: clamp(48px, 6vw, 96px); }
.fio--centro { transform-origin: 50% 50%; margin-inline: auto; }
.fio--v { width: 1px; height: 100%; min-height: 48px; transform-origin: 50% 0; }
.fio--neutro { background: var(--linha-forte); }
.etiqueta-v { font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--acento);
  display: block; margin-bottom: 28px; }
.etiqueta-v--pedra { color: var(--tinta-2); }
@media (max-width: 1023px) { .com-etiqueta > .etiqueta-v { margin-inline: var(--margem); } }
@media (min-width: 1024px) {
  .com-etiqueta { position: relative; }
  .etiqueta-v { position: absolute; top: var(--etiqueta-topo, var(--secao)); left: calc(var(--margem) * .42 - .5em); margin: 0;
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .etiqueta-v--direita { left: auto; right: calc(var(--margem) * .42 - .5em); transform: none; }
}
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: 44px; padding: 0 22px;
  border: 1px solid var(--linha-forte); border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: .02em;
  color: var(--tinta); white-space: nowrap; background: transparent;
  transition: border-color var(--t-curto) var(--ease), background-color var(--t-curto) var(--ease), color var(--t-curto) var(--ease); }
.pilula--cheia { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.pilula--grande { min-height: 56px; padding: 0 30px; font-size: 15px; }
.pilula .seta { transition: transform var(--t-curto) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pilula:hover { border-color: var(--acento); }
  .pilula--cheia:hover { background: transparent; color: var(--tinta); border-color: var(--acento); }
  .pilula:hover .seta { transform: translateX(4px); }
}
.seta { display: inline-block; font-family: var(--sans); font-weight: 400; }
/* ligação com sublinhado de luz: um fio neutro sempre visível e a luz que cresce por cima */
.ligacao { background:
    linear-gradient(var(--acento), var(--acento)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 0 100% / 100% 1px no-repeat;
  padding-bottom: .22em; transition: background-size .3s var(--ease), color .3s var(--ease); }
.ligacao[aria-current="page"], .ligacao.is-ativa { background-size: 100% 1px, 100% 1px; }
.ligacao--seta { display: inline-flex; align-items: baseline; gap: .6em; font: 500 14px/1.4 var(--sans); letter-spacing: .02em; padding-top: 10px; }
.ligacao--seta .seta { transition: transform var(--t-curto) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ligacao:hover { background-size: 100% 1px, 100% 1px; }
  .ligacao--seta:hover .seta { transform: translateX(5px); }
}
.ligacao--rodape { min-height: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ 8. formulário */
.form { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.campo { position: relative; display: grid; gap: 12px; }
.campo__rotulo, .escolhas legend { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-2); transition: color var(--t-curto) var(--ease); padding: 0; }
.campo__opcional { text-transform: none; letter-spacing: .02em; font-weight: 400; }
.campo input, .campo textarea, .campo select { width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--linha-forte); padding: 10px 0 12px; font: 400 clamp(17px, 1.4vw, 20px)/1.4 var(--sans);
  color: var(--tinta); -webkit-appearance: none; appearance: none; }
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-2); opacity: 1; }
.campo__fio { display: block; height: 1px; margin-top: -13px; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease); pointer-events: none; }
.campo:focus-within .campo__rotulo { color: var(--acento); }
.campo :is(input, textarea, select):focus ~ .campo__fio { transform: scaleX(1); }
.campo :is(input, textarea):focus-visible { outline: none; }
.campo__ajuda { font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.campo__erro, .escolhas__erro { font-size: 13px; line-height: 1.45; color: var(--erro-cor); }
.campo[data-erro] :is(input, textarea) { border-bottom-color: var(--erro-cor); }
.escolhas { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.escolhas__opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.escolha { position: relative; display: inline-flex; }
.escolha input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.escolha span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--linha-forte); font: 400 15px/1 var(--sans); color: var(--tinta-3);
  transition: border-color var(--t-curto) var(--ease), color var(--t-curto) var(--ease); pointer-events: none; }
.escolha span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento);
  transform: scale(0); transition: transform var(--t-curto) var(--ease); margin-left: -4px; }
.escolha input:checked + span { border-color: var(--acento); color: var(--tinta); }
.escolha input:checked + span::before { transform: scale(1); margin-left: 0; }
.escolha input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .escolha:hover span { border-color: var(--tinta-2); color: var(--tinta); } }
.caixa { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; min-height: 44px;
  font-size: 14px; line-height: 1.5; color: var(--tinta-3); cursor: pointer; }
.caixa input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.caixa__marca { width: 24px; height: 24px; border: 1px solid var(--linha-forte); display: grid; place-items: center; margin-top: -1px;
  transition: border-color var(--t-curto) var(--ease); }
.caixa__marca::after { content: ''; width: 10px; height: 5px; border: solid var(--acento); border-width: 0 0 1.5px 1.5px;
  transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--t-curto) var(--ease); }
.caixa input:checked + .caixa__marca { border-color: var(--acento); }
.caixa input:checked + .caixa__marca::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.caixa input:focus-visible + .caixa__marca { outline: 2px solid var(--acento); outline-offset: 3px; }
.caixa > .campo__erro { grid-column: 2; }
.caixa a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.armadilha { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.form__estado { font-size: 14px; line-height: 1.5; color: var(--tinta-2); min-height: 1.5em; }
.form [type="submit"][aria-busy="true"] { opacity: .6; pointer-events: none; }
.form__confirmacao { display: none; }
.form[data-estado="enviado"] > :not(.form__confirmacao) { display: none; }
.form[data-estado="enviado"] .form__confirmacao { display: grid; gap: 20px; }
.form__nota-previa { font: 500 var(--t-rotulo)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }

/* ------------------------------------------------------------------ 9. vídeo (poster AVIF, vídeo por cima em fundido) */
.vid { position: relative; overflow: hidden; background: var(--cor, var(--noite-2)); isolation: isolate; }
.vid__poster { display: block; background: var(--cor, transparent); }
.vid__poster img { width: 100%; height: auto; object-fit: cover; object-position: var(--foco, 50% 50%); }
.vid__filme { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%);
  opacity: 0; transition: opacity var(--t-medio) var(--ease); }
.vid.a-tocar .vid__filme { opacity: 1; }
.vid--cobrir { position: absolute; inset: 0; }
.vid--cobrir .vid__poster, .vid--cobrir .vid__poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid__pausa { position: absolute; right: var(--vid-pausa-dir, var(--margem)); bottom: var(--vid-pausa-baixo, 24px); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(243, 241, 236, .45); background: rgba(11, 11, 12, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--osso); opacity: 0; pointer-events: none; transition: opacity var(--t-curto) var(--ease), border-color var(--t-curto) var(--ease); }
.vid.pode .vid__pausa { opacity: 1; pointer-events: auto; }
.vid__pausa-ico { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.vid__pausa[aria-pressed="true"] .vid__pausa-ico { width: 0; height: 0; border-inline: 0; border-style: solid; border-color: transparent;
  border-width: 6px 0 6px 10px; border-left-color: currentColor; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { .vid__pausa:hover { border-color: var(--luz); } }
.vid__tocar { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px;
  padding: clamp(20px, 3vw, 40px) var(--margem); color: var(--osso); font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(11, 11, 12, .55), rgba(11, 11, 12, 0) 45%); transition: opacity var(--t-curto) var(--ease); }
.vid__tocar-ico { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(243, 241, 236, .6); position: relative; flex: none;
  transition: border-color var(--t-curto) var(--ease); }
.vid__tocar-ico::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -4px; border-style: solid;
  border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
@media (hover: hover) and (pointer: fine) { .vid__tocar:hover .vid__tocar-ico { border-color: var(--luz); } }
.vid--filme.a-tocar .vid__tocar, .vid--filme.a-tocar .vid__poster { opacity: 0; pointer-events: none; }
.vid--filme .vid__filme { opacity: 0; }
.vid--filme.a-tocar .vid__filme { opacity: 1; object-fit: contain; background: #000; }
.vid__legenda { position: absolute; left: var(--margem); bottom: 24px; z-index: 2; font: 500 var(--t-rotulo)/1.3 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 241, 236, .82); }
html:not(.js) .vid__pausa, html:not(.js) .vid__tocar { display: none; }

/* ------------------------------------------------------------------ 9b. abertura: preto, a frase, e a casa a acender-se */
.abertura { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--noite); color: var(--osso); isolation: isolate; }
.abertura__media { position: absolute; inset: 0; z-index: -2; }
.abertura__media > .vid, .abertura__media > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__media > picture img { width: 100%; height: 100%; object-fit: cover; }
.abertura::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 12, .62) 0%, rgba(11, 11, 12, .18) 38%, rgba(11, 11, 12, 0) 60%),
              linear-gradient(to bottom, rgba(11, 11, 12, .35), rgba(11, 11, 12, 0) 22%); }
.abertura__texto { position: absolute; left: var(--margem); right: var(--margem); bottom: clamp(72px, 11svh, 128px); }
.abertura__frase { max-width: none; }
.abertura__rodape { position: absolute; left: var(--margem); right: var(--margem); bottom: 28px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; }
.abertura .vid__pausa { --vid-pausa-dir: var(--margem); --vid-pausa-baixo: 18px; }
@media (max-width: 767px) { .abertura__texto { bottom: 96px; } }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.sem-mov) [data-abertura]:not(.acesa) .abertura__media { opacity: .02; filter: brightness(.12); }
}

/* ------------------------------------------------------------------ 10. imagem: fundo de espera, moldura, revelação */
picture { background-color: var(--cor, transparent); }
picture img { width: 100%; }
.moldura { position: relative; overflow: hidden; background: var(--cor, var(--superficie)); }
.moldura > picture, .moldura > picture img, .moldura > .vid { width: 100%; height: 100%; }
.moldura > picture img { object-fit: cover; }
.moldura--4x5 { aspect-ratio: 4 / 5; } .moldura--3x2 { aspect-ratio: 3 / 2; } .moldura--16x9 { aspect-ratio: 16 / 9; }
.moldura--1x1 { aspect-ratio: 1; } .moldura--9x16 { aspect-ratio: 9 / 16; } .moldura--ecra { height: 100svh; }
.legenda { margin-top: 14px; display: flex; gap: 14px; align-items: baseline; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.legenda .numeral--pequeno { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .cartao .moldura img, .cartao .moldura .vid__poster img { transform: scale(1.001); transition: transform .6s var(--ease); }
  .cartao:hover .moldura img, .cartao:hover .moldura .vid__poster img { transform: scale(1.02); }
  .cartao__titulo { background: linear-gradient(var(--acento), var(--acento)) 0 100% / 0 1px no-repeat; padding-bottom: .1em;
    transition: background-size var(--t-curto) var(--ease); }
  .cartao:hover .cartao__titulo { background-size: 100% 1px; }
}

/* ------------------------------------------------------------------ 11. comparador (render ↔ realidade) */
.comparar { position: relative; }
.comparar__palco { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: var(--superficie); --x: 50%; }
.comparar [data-camada] { display: block; width: 100%; }
.comparar [data-camada] > picture { height: 100%; }
.comparar [data-camada] img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
html.js .comparar__palco { aspect-ratio: var(--proporcao, 3 / 2); cursor: ew-resize; }
html.js .comparar [data-camada] { position: absolute; inset: 0; height: 100%; visibility: hidden; }
html.js .comparar [data-camada].e-a { visibility: visible; }
html.js .comparar [data-camada].e-b { visibility: visible; clip-path: inset(0 0 0 var(--x)); z-index: 1; }
html:not(.js) .comparar [data-camada] + [data-camada] { margin-top: 8px; }
.comparar__fio { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 1px; margin-left: -.5px; background: var(--luz);
  pointer-events: none; }
.comparar__pega { position: absolute; top: 50%; left: var(--x); z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; border: 1px solid rgba(243, 241, 236, .7); background: rgba(11, 11, 12, .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; color: var(--osso);
  transition: border-color var(--t-curto) var(--ease), transform var(--t-curto) var(--ease); touch-action: none; }
.comparar__pega::before, .comparar__pega::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -4px;
  border-style: solid; border-color: transparent; }
.comparar__pega::before { left: 11px; border-width: 4px 5px 4px 0; border-right-color: currentColor; }
.comparar__pega::after { right: 11px; border-width: 4px 0 4px 5px; border-left-color: currentColor; }
.comparar__pega:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; }
.comparar.a-arrastar .comparar__pega { transform: scale(1.08); border-color: var(--luz); }
@media (hover: hover) and (pointer: fine) { .comparar__palco:hover .comparar__pega { border-color: var(--luz); } }
.comparar__rotulo { position: absolute; top: 18px; z-index: 2; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--osso); padding: 7px 10px; background: rgba(11, 11, 12, .42); pointer-events: none;
  transition: opacity var(--t-curto) var(--ease); }
.comparar__rotulo--a { left: 18px; } .comparar__rotulo--b { right: 18px; }
.comparar__legenda { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px;
  line-height: 1.45; color: var(--tinta-2); }
.comparar__pares { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.comparar__par { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linha-forte); font: 500 13px/1 var(--sans);
  color: var(--tinta-3); transition: border-color var(--t-curto) var(--ease), color var(--t-curto) var(--ease); }
.comparar__par[aria-pressed="true"] { border-color: var(--acento); color: var(--tinta); }
html:not(.js) .comparar__fio, html:not(.js) .comparar__pega, html:not(.js) .comparar__rotulo { display: none; }

/* ------------------------------------------------------------------ 12. (v2) a galeria horizontal presa saiu: a faixa nativa (25, M3) substitui-a */
[data-ecra-inteiro] [data-ecra-item], [data-ecra-inteiro] .galeria__item { cursor: zoom-in; }

/* ------------------------------------------------------------------ 13. ecrã inteiro com swipe */
.ecra { position: fixed; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--noite); color: var(--osso); overflow: hidden; }
.ecra::backdrop { background: var(--noite); }
.ecra[open] { display: block; animation: ecra-entra .45s var(--ease) both; }
@keyframes ecra-entra { from { opacity: 0; } }
.ecra__pista { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior: contain; }
.ecra__pista::-webkit-scrollbar { display: none; }
.ecra__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center;
  padding: calc(var(--cab) + 8px) 0 88px; touch-action: pan-x pinch-zoom; position: relative; }
.ecra__slide > picture, .ecra__slide > .vid { width: 100%; height: 100%; background: transparent; }
/* vistoria final: a linha da grelha media-se pelo conteúdo e a cópia da imagem trazia o aspect-ratio e o transform
   do parallax; as verticais saíam cortadas e as deitadas tapavam a legenda. Agora a imagem cabe entre a barra e a legenda. */
.ecra__slide { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.ecra__slide > picture, .ecra__slide > .vid { min-width: 0; min-height: 0; aspect-ratio: auto !important;
  transform: none !important; translate: none !important; scale: none !important; }
.ecra__slide > picture img { width: 100%; height: 100%; object-fit: contain; }
.ecra__slide > .vid .vid__poster, .ecra__slide > .vid .vid__poster img { width: 100%; height: 100%; object-fit: contain; }
.ecra__slide > .vid .vid__filme { object-fit: contain; }
.ecra__barra { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: var(--cab); display: flex; align-items: center;
  justify-content: space-between; padding-inline: var(--margem); }
.ecra__contador { font: 500 12px/1 var(--sans); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--pedra); }
.ecra__contador b { color: var(--luz); font-weight: 500; }
.ecra__fechar { min-height: 44px; padding: 0 4px 0 16px; display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; }
.ecra__fechar i { width: 18px; height: 18px; position: relative; }
.ecra__fechar i::before, .ecra__fechar i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.ecra__fechar i::after { transform: rotate(-45deg); }
.ecra__legenda { position: absolute; left: var(--margem); right: var(--margem); bottom: 28px; z-index: 3; font-size: 13px; line-height: 1.45;
  color: var(--pedra); min-height: 2.9em; max-width: 60ch; }
.ecra__nav { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, .3); display: grid; place-items: center; font: 400 18px/1 var(--sans);
  transition: border-color var(--t-curto) var(--ease), opacity var(--t-curto); }
.ecra__nav--ant { left: calc(var(--margem) * .5); } .ecra__nav--seg { right: calc(var(--margem) * .5); }
.ecra__nav:disabled { opacity: .2; cursor: default; }
@media (hover: hover) and (pointer: fine) { .ecra__nav:not(:disabled):hover { border-color: var(--luz); } }
@media (pointer: coarse) { .ecra__nav { display: none; } }

/* ------------------------------------------------------------------ 14. (v2) o palco preso saiu: o Método troca as etapas com data-modos (25, M2).
   Fica o traço SVG do Método (svg[data-palco-traco], grupos data-passo), em linha fina de luz. */
[data-palco-traco] :is(path, line, polyline, polygon, rect, circle, ellipse) { fill: none; stroke: var(--luz); stroke-width: 1;
  vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------------ 15. sequência de camadas presa ao scroll (Antevisão 3D) */
.sequencia { position: relative; }
.sequencia__quadro { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--margem); scroll-padding-inline: var(--margem); overscroll-behavior-x: contain; }
.sequencia__quadro::-webkit-scrollbar { display: none; }
.sequencia__camada { flex: 0 0 min(86vw, 1100px); scroll-snap-align: start; scroll-snap-stop: always; position: relative; margin: 0; }
.sequencia__media { position: relative; overflow: hidden; aspect-ratio: var(--proporcao, 3 / 2); background: var(--superficie); }
.sequencia__media > picture, .sequencia__media > picture img, .sequencia__media > .vid, .sequencia__media > svg { width: 100%; height: 100%; }
.sequencia__media > picture img { object-fit: cover; }
.sequencia__media > svg { padding: 6%; }
.sequencia__legenda { margin-top: 16px; display: flex; gap: 14px; align-items: baseline; }
.sequencia__legenda .rotulo { color: var(--tinta); }
.sequencia__legenda p { font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.sequencia__rodape { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--margem) 0; }
.sequencia__contador { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.sequencia__contador b { color: var(--acento); font-weight: 500; }
.sequencia__trilho { display: none; }
/* v2 §4.5: a única secção presa do site, só no PC, com 1,5 ecrãs ao todo (era --n x 100svh) */
.sequencia--presa { height: 150svh; }
.sequencia--presa .sequencia__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid;
  grid-template-rows: 1fr auto; padding: calc(var(--cab) + 16px) var(--margem) 40px; }
.sequencia--presa .sequencia__quadro { position: relative; display: block; overflow: visible; padding: 0; height: 100%; min-height: 0; }
.sequencia--presa .sequencia__camada { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.sequencia--presa .sequencia__media { aspect-ratio: auto; height: 100%; min-height: 0; }
.sequencia--presa .sequencia__camada + .sequencia__camada { opacity: 0; }
.sequencia--presa .sequencia__legenda { opacity: 0; transition: opacity .5s var(--ease); }
.sequencia--presa .sequencia__camada.is-ativa .sequencia__legenda { opacity: 1; }
.sequencia--presa .sequencia__camada.is-ativa { z-index: 2; }
.sequencia--presa .sequencia__rodape { padding: 20px 0 0; }
.sequencia--presa .sequencia__trilho { display: flex; flex: 1; margin-left: 32px; height: 1px; background: var(--linha); position: relative; }
.sequencia--presa .sequencia__trilho i { position: absolute; inset: 0; background: var(--luz); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
svg[data-desenhar] :is(path, line, polyline, polygon, rect, circle, ellipse) { fill: none; stroke: currentColor; stroke-width: 1;
  vector-effect: non-scaling-stroke; }
svg[data-desenhar].a-desenhar :is(path, line, polyline, polygon, rect, circle, ellipse) { stroke-dasharray: 1 1; stroke-dashoffset: var(--d, 0); }
svg[data-desenhar].a-desenhar.traco-cheio :is(path, line, polyline, polygon, rect, circle, ellipse) { stroke-dasharray: none; }
svg[data-desenhar].a-desenhar.traco-vazio { visibility: hidden; }
.planta { color: var(--osso); }
.tema-osso .planta { color: var(--grafite); }

/* ------------------------------------------------------------------ 16. cabeçalho */
.cab { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--cab); display: flex; align-items: center; gap: 32px;
  padding-inline: var(--margem); color: var(--osso); view-transition-name: cab;
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.cab::before { content: ''; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 11, 12, .5), rgba(11, 11, 12, 0)); opacity: 0; transition: opacity .5s var(--ease); }
[data-cabecalho="filme"] .cab:not(.cab--solido)::before { opacity: 1; }
.cab--solido, [data-cabecalho="solido"] .cab { background: rgba(11, 11, 12, .92); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 rgba(243, 241, 236, .06); }
[data-cabecalho="claro"] .cab { color: var(--grafite); }
[data-cabecalho="claro"] .cab.cab--solido { background: rgba(243, 241, 236, .92); box-shadow: 0 1px 0 rgba(43, 42, 40, .08); }
/* sem JS o cabeçalho não sabe quando passa a sólido: fica sempre sólido */
html:not(.js) .cab { background: rgba(11, 11, 12, .92); box-shadow: 0 1px 0 rgba(243, 241, 236, .06); }
html:not(.js) [data-cabecalho="claro"] .cab { background: rgba(243, 241, 236, .92); box-shadow: 0 1px 0 rgba(43, 42, 40, .08); }
.cab__marca { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-right: auto; }
.cab__v { width: 34px; height: auto; color: var(--luz); }
[data-cabecalho="claro"] .cab__v { color: var(--luz-osso); }
.cab__nav ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.cab__ligacao { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; position: relative; }
.cab__ligacao::after { content: ''; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: var(--luz);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-curto) var(--ease); }
.cab__ligacao[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .cab__ligacao:hover::after { transform: scaleX(1); } }
.cab__ligacao sup { font-size: .8em; vertical-align: .35em; }
/* "Contacto" fixo em todos os tamanhos (v2 §4.8): ligação de texto com um ponto de luz, o contacto a 1 toque */
.cab__contacto { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 4px; position: relative;
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.cab__contacto::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--luz); flex: none; }
[data-cabecalho="claro"] .cab__contacto::before { background: var(--luz-osso); }
.cab__contacto::after { content: ''; position: absolute; left: 19px; right: 4px; bottom: 12px; height: 1px; background: currentColor;
  opacity: .35; transition: opacity var(--t-curto) var(--ease), background-color var(--t-curto) var(--ease); }
.cab__contacto[aria-current="page"]::after { opacity: 1; background: var(--luz); }
@media (hover: hover) and (pointer: fine) { .cab__contacto:hover::after { opacity: 1; background: var(--luz); } }
@media (min-width: 1024px) { .cab__contacto { margin-left: clamp(4px, 1vw, 16px); padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(243, 241, 236, .2); } .cab__contacto::after { left: calc(clamp(16px, 2vw, 28px) + 15px); }
  [data-cabecalho="claro"] .cab__contacto { border-left-color: rgba(43, 42, 40, .2); } }
.cab__menu { display: none; min-height: 44px; min-width: 44px; align-items: center; justify-content: flex-end; gap: 10px;
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.cab__menu i { display: block; width: 22px; height: 7px; border-block: 1px solid currentColor; }
@media (max-width: 1023px) {
  .cab { gap: 18px; }
  .cab__nav { display: none; }
  .cab__menu { display: inline-flex; }
  .cab__v { width: 30px; }
}
@media (max-width: 400px) { .cab .marca-palavra { letter-spacing: .24em; } .cab__marca { gap: 10px; } .cab { gap: 12px; } }

/* ------------------------------------------------------------------ 17. menu de ecrã inteiro (telemóvel) */
.menu { position: fixed; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--noite); color: var(--osso); overflow: auto;
  /* o menu é sempre noite, mesmo numa página tema-osso: repõe os tokens */
  --fundo: var(--noite); --tinta: var(--osso); --tinta-2: var(--pedra); --tinta-3: #B7B2A8;
  --linha: rgba(243, 241, 236, .14); --linha-forte: rgba(243, 241, 236, .42); --acento: var(--luz); --erro-cor: var(--erro);
  --superficie: var(--noite-2); color-scheme: dark; }
.menu::backdrop { background: rgba(11, 11, 12, .6); }
.menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
.menu nav { align-self: center; }
.menu__topo { height: var(--cab); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--margem); }
.menu__fechar { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; }
.menu__fechar i { width: 18px; height: 18px; position: relative; }
.menu__fechar i::before, .menu__fechar i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.menu__fechar i::after { transform: rotate(-45deg); }
.menu__lista { align-self: center; display: grid; gap: 4px; padding: 24px var(--margem); counter-reset: menu; }
.menu__item { overflow: hidden; }
.menu__ligacao { display: flex; align-items: baseline; gap: 18px; min-height: 64px; padding-block: 6px;
  font: 300 clamp(40px, 11vw, 64px)/1.08 var(--serif); letter-spacing: -.02em; }
.menu__ligacao .numeral--pequeno { flex: none; width: 2.2em; }
.menu__ligacao[aria-current="page"] { color: var(--luz); }
.menu__fio { margin: 8px var(--margem) 0; width: auto; }
.menu__rodape { padding: 28px var(--margem) calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 22px; }
.menu__contactos { display: grid; gap: 6px; font-size: 14px; color: var(--pedra); }
.menu__contactos a { min-height: 32px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .menu .menu__ligacao { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
  .menu.is-aberto .menu__ligacao { transform: none; }
  .menu .menu__fio { transform: scaleX(0); transition: transform 1.1s var(--ease-io) .35s; }
  .menu.is-aberto .menu__fio { transform: scaleX(1); }
  .menu .menu__rodape { opacity: 0; transition: opacity .6s var(--ease) .5s; }
  .menu.is-aberto .menu__rodape { opacity: 1; }
}

/* ------------------------------------------------------------------ 18. (v2) o botão fixo do telemóvel saiu: "Contacto" está no cabeçalho */

/* ------------------------------------------------------------------ 19. fecho compacto (v2 §4.8: até 0,4 ecrã) */
.fecho { position: relative; isolation: isolate; overflow: hidden; background: var(--noite); color: var(--osso);
  padding: clamp(40px, 5vw, 72px) var(--margem); }
.fecho__luz { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--luz); transform-origin: 0 50%; }
.fecho__corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px clamp(16px, 2vw, 28px); }
.fecho__v { width: clamp(36px, 3vw, 48px); height: auto; color: var(--luz); }
.fecho__assinatura { font: 300 clamp(22px, 2.3vw, 34px)/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.fecho__assinatura .fecho__linha-2 { color: #CFCAC0; }
/* a assinatura oficial em duas linhas: «Versicolor® / Design que eleva a forma de viver.» A segunda nunca parte: no
   telemóvel a letra desce até caber ao lado do V (a linha mede 14,1 vezes o tamanho da letra; 52 px são o V e o
   intervalo): 20,7 px a 390, 18,6 a 360, 15,8 a 320 */
.fecho__linha-1, .fecho__linha-2 { display: block; }
.fecho__linha-2 { white-space: nowrap; }
@media (max-width: 899px) {
  .fecho__assinatura { font-size: min(22px, calc((100vw - 2 * var(--margem) - 52px) / 14.4)); }
}
.fecho__acao { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; }
.fecho__convite { display: inline-flex; align-items: baseline; gap: .6em; min-height: 44px; padding-top: 10px;
  font: 400 clamp(17px, 1.4vw, 20px)/1.4 var(--sans); letter-spacing: .005em; }
.fecho__convite .seta { transition: transform var(--t-curto) var(--ease); }
@media (hover: hover) and (pointer: fine) { .fecho__convite:hover .seta { transform: translateX(5px); } }
.fecho__seguir { font-size: 14px; line-height: 1.5; color: var(--pedra); max-width: 46ch; }
@media (min-width: 900px) {
  .fecho__corpo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fecho__acao { grid-column: 3; justify-items: end; text-align: right; }
}

/* ------------------------------------------------------------------ 20. rodapé compacto (até 0,4 ecrã no PC) */
.rodape { background: var(--noite); color: var(--osso); padding: clamp(28px, 3.4vw, 48px) var(--margem) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(243, 241, 236, .08); font-size: 13px; line-height: 1.5; }
.rodape__grelha { display: grid; gap: 20px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.rodape__marca { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rodape__casa { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
.rodape__assinatura { font: 300 17px/1.3 var(--serif); color: #CFCAC0; }
.rodape__marca svg { width: 28px; height: auto; color: var(--luz); }
.rodape a { color: var(--osso); }
.rodape__col--nav { grid-column: 1 / -1; }
.rodape__col--nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape li a, .rodape address a { display: inline-flex; align-items: center; min-height: 40px; }
.rodape li a sup { font-size: .8em; vertical-align: .35em; }
.rodape address { font-style: normal; color: #CFCAC0; }
.rodape__legal { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(243, 241, 236, .08);
  display: flex; flex-wrap: wrap; gap: 0 22px; align-items: center; font-size: 12px; line-height: 1.5; color: var(--pedra); }
.rodape__legal a { color: var(--pedra); min-height: 40px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .rodape__legal a:hover, .rodape li a:hover, .rodape address a:hover { color: var(--luz); } }
.rodape__creditos { margin-left: auto; }
.rodape__col--contactos > br { display: none; }
.rodape__col--contactos { display: flex; flex-direction: column; align-items: flex-start; }
.rodape__col--contactos > span:last-child { padding-top: 8px; color: var(--pedra); }
/* redes em ícone (REVISAO-CLIENTE §11): pequenos, monocromáticos, sem círculos; o alvo tem 44 px */
.rodape__col--redes { display: flex; flex-direction: row; gap: 0 4px; margin-left: -12px; }
.rodape__rede { display: inline-grid !important; place-items: center; width: 44px; height: 44px; min-height: 44px !important; color: #CFCAC0 !important;
  transition: color var(--t-curto) var(--ease); }
.rodape__icone { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .rodape .rodape__rede:hover { color: var(--luz) !important; } }
@media (min-width: 900px) {
  .rodape__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); row-gap: 0; align-items: center; }
  .rodape__marca { grid-column: 1 / 4; grid-row: 1 / 3; align-self: start; padding-top: 6px; }
  .rodape__col--nav { grid-column: 4 / 10; grid-row: 1; } .rodape__col--redes { grid-column: 10 / 13; grid-row: 1; justify-self: end; margin: 0 -12px 0 0; }
  .rodape__col--contactos { grid-column: 4 / 13; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 22px; }
  .rodape__col--contactos > span:last-child { padding-top: 0; }
}
@media (max-width: 899px) { .rodape__creditos { margin-left: 0; } }

/* ------------------------------------------------------------------ 24. cartão de projeto (contrato v2 §9; M10)
   <a class="cartao" href data-vt data-nivel> .cartao__capa (+ picture.cartao__troca, .cartao__rotulo) .cartao__n .cartao__nome
   .cartao__meta .cartao__linha. Variantes --grande, --linha, --lista, --3d. Só a.cartao: o article.cartao antigo não muda. */
a.cartao { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start;
  color: inherit; min-width: 0; }
.cartao__capa { grid-column: 1 / -1; position: relative; display: grid; overflow: hidden; aspect-ratio: var(--cartao-ar, 4 / 3);
  background: var(--superficie); margin-bottom: 14px; }
.cartao__capa > picture, .cartao__capa > img { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; }
.cartao__capa > picture img, .cartao__capa > img { width: 100%; height: 100%; object-fit: cover; }
.cartao__troca { opacity: 0; transition: opacity .35s ease; }
a.cartao.a-trocar .cartao__troca { opacity: 1; }
.cartao__estado, .cartao__rotulo { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--osso);
  background: rgba(11, 11, 12, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.cartao__rotulo { left: 10px; top: 10px; bottom: auto; }
.cartao__estado::after { content: attr(data-a); }
a.cartao.a-trocar .cartao__estado::after { content: attr(data-b); }
@media (hover: hover) and (pointer: fine) {
  a.cartao:hover .cartao__estado::after, a.cartao:focus-visible .cartao__estado::after { content: attr(data-b); }
}
.cartao__rotulo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--luz); }
.cartao__alternar { position: absolute; z-index: 3; right: 8px; top: 8px; min-height: 36px; min-width: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(243, 241, 236, .5);
  background: rgba(11, 11, 12, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--osso);
  font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.cartao__alternar::after { content: ''; position: absolute; inset: -4px; }
.cartao__n { grid-column: 1; grid-row: 2 / span 3; padding-top: .5em; font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--acento);
  font-variant-numeric: tabular-nums; }
.cartao__nome { grid-column: 2; font: 300 clamp(20px, 1.7vw, 26px)/1.1 var(--serif); letter-spacing: -.012em; }
.cartao__meta { grid-column: 2; margin-top: 8px; font: 500 var(--t-rotulo)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2); }
.cartao__linha { grid-column: 2; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--tinta-3); max-width: 40ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (max-width: 767px) { .cartao__linha { -webkit-line-clamp: 2; } }
a.cartao:focus-visible { outline: none; }
a.cartao:focus-visible .cartao__capa { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  a.cartao:hover .cartao__troca, a.cartao:focus-visible .cartao__troca { opacity: 1; }
  .cartao__capa img { transform: scale(1.001); transition: transform .6s var(--ease); }
  a.cartao:hover .cartao__capa img { transform: scale(1.02); }
  .cartao__nome { background: linear-gradient(var(--acento), var(--acento)) 0 100% / 0 1px no-repeat; padding-bottom: .08em;
    transition: background-size .3s var(--ease); justify-self: start; }
  a.cartao:hover .cartao__nome { background-size: 100% 1px; }
  .cartao__alternar { display: none; }
}
.cartao--grande { --cartao-ar: 6 / 5; }
.cartao--grande .cartao__nome { font-size: clamp(28px, 2.6vw, 40px); }
.cartao--grande .cartao__linha { font-size: 15px; -webkit-line-clamp: 3; }
/* miniatura à esquerda (início: Sobreda, Barreiro, Lavradio) */
a.cartao--linha { grid-template-columns: var(--mini, 240px) auto minmax(0, 1fr); column-gap: 0; align-items: start; }
.cartao--linha .cartao__capa { grid-column: 1; grid-row: 1 / span 4; margin: 0 clamp(14px, 1.6vw, 24px) 0 0; }
.cartao--linha .cartao__n { grid-column: 2; grid-row: 1 / span 3; padding-right: 12px; }
.cartao--linha :is(.cartao__nome, .cartao__meta, .cartao__linha) { grid-column: 3; }
@media (max-width: 767px) { a.cartao--linha { --mini: 112px; } .cartao--linha .cartao__estado { display: none; } }
/* linha de tabela (índice em lista): a imagem vive à direita no PC (M9); no telemóvel, miniatura de 56 px */
a.cartao--lista { grid-template-columns: 3.2em minmax(0, 2fr) minmax(0, 3fr); align-items: center; column-gap: 16px; min-height: 52px;
  border-bottom: 1px solid var(--linha); padding-block: 6px; }
.cartao--lista .cartao__capa { display: none; }
.cartao--lista .cartao__n { grid-row: auto; padding: 0; }
.cartao--lista .cartao__nome { grid-column: 2; font-size: 20px; }
.cartao--lista .cartao__meta { grid-column: 3; margin: 0; }
.cartao--lista .cartao__linha { display: none; }
@media (max-width: 767px) {
  a.cartao--lista { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .cartao--lista .cartao__capa { display: grid; grid-column: 1; grid-row: 1 / span 2; margin: 0; --cartao-ar: 1; }
  .cartao--lista .cartao__n { display: none; }
  .cartao--lista .cartao__meta { grid-column: 2; }
}
/* projetos só em 3D: sem troca, o rótulo "Antevisão 3D" sempre à vista */
.cartao--3d .cartao__troca, .cartao--3d .cartao__alternar { display: none; }
.cartao--3d .cartao__capa { box-shadow: inset 0 0 0 1px rgba(205, 164, 96, .28); }

/* ------------------------------------------------------------------ 25. modos no mesmo palco (M2) e faixa nativa (M3)
   section[data-modos] > [role=tablist] > button[role=tab][data-modo] · .modos__nota[data-nota="id"] · .modos__palco >
   [role=tabpanel][data-painel="id"]. Sem JS, todos os painéis à vista; o JS esconde os inativos. ?modo=id abre o modo. */
.modos { position: relative; }
.modos__separadores { display: flex; gap: 0 clamp(18px, 2vw, 32px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--linha);
  overscroll-behavior-x: contain; }
.modos__separadores::-webkit-scrollbar { display: none; }
.modos [role="tab"] { position: relative; flex: none; min-height: 44px; padding: 0 1px; font: 500 12px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; transition: color .3s var(--ease); }
.modos [role="tab"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.modos [role="tab"][aria-selected="true"] { color: var(--tinta); }
.modos [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .modos [role="tab"]:hover { color: var(--tinta); } }
.modos [role="tab"]:focus-visible { outline-offset: -2px; }
.modos__nota { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--tinta-3); max-width: 56ch; text-wrap: pretty; }
.modos__palco { position: relative; margin-top: 18px; }
html.js [data-modos] [data-painel][hidden], html.js [data-modos] [data-nota][hidden] { display: none !important; }
html:not(.js) [data-modos] [data-painel] + [data-painel] { margin-top: var(--grupo); }

.faixa { display: grid; grid-auto-flow: column; grid-auto-columns: var(--faixa-col, 66%); gap: 8px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.faixa::-webkit-scrollbar { display: none; }
.faixa > * { scroll-snap-align: start; min-width: 0; margin: 0; }
.faixa.a-arrastar { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.faixa.a-arrastar * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .faixa { cursor: grab; } }
.faixa .moldura, .faixa > figure > picture { aspect-ratio: var(--faixa-ar, 3 / 2); max-height: 72svh; }
.faixa > figure > picture img { height: 100%; object-fit: cover; }
@media (max-width: 767px) { .faixa { --faixa-col: 86%; --faixa-ar: 4 / 5; } }
.faixa__controlos { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; min-height: 44px; }
.faixa__contador { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.faixa__contador b { color: var(--acento); font-weight: 500; }
.faixa__setas { display: flex; gap: 8px; }
.faixa__seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center;
  font: 400 16px/1 var(--sans); transition: border-color .3s var(--ease), opacity .3s; }
.faixa__seta:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .faixa__seta:not(:disabled):hover { border-color: var(--acento); } }
@media (pointer: coarse) { .faixa__setas { display: none; } }
html:not(.js) .faixa__controlos { display: none; }
/* legenda numerada que diz a decisão (v2 §3.3) */
.legenda-n { margin-top: 10px; display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.45; color: var(--tinta-2); max-width: 48ch; }
.legenda-n > b, .legenda-n > .numeral--pequeno { flex: none; font: 500 11px/1 var(--sans); letter-spacing: .1em; color: var(--acento); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 26. painel (M6), folha de fotografias (M5), texto a pedido (M7), "Ler mais" (M15)
   <button data-abrir="id"> abre <dialog id="id" class="painel|folha">; [data-fechar] fecha; Esc fecha; o foco volta ao botão.
   Na folha, as miniaturas vêm num <template data-conteudo> e só entram na página ao abrir. */
html.painel-aberto { overflow: hidden; }
.painel { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); height: 100svh; max-width: none; max-height: none; margin: 0 0 0 auto;
  padding: 0; border: 0; background: var(--fundo); color: var(--tinta); overflow: hidden; translate: 100% 0;
  transition: translate .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .28); }
.painel[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); translate: 0 0; transition-duration: .3s; }
@starting-style { .painel[open] { translate: 100% 0; } }
.painel::backdrop { background: rgb(11 11 12 / .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0;
  transition: opacity .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete; }
.painel[open]::backdrop { opacity: 1; }
@starting-style { .painel[open]::backdrop { opacity: 0; } }
.painel__topo, .folha__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--cab);
  padding: 8px var(--margem-painel, clamp(20px, 3vw, 40px)); border-bottom: 1px solid var(--linha); }
.painel__titulo, .folha__titulo { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.painel__corpo { overflow-y: auto; overscroll-behavior: contain; padding: 24px clamp(20px, 3vw, 40px) calc(40px + env(safe-area-inset-bottom)); }
.painel__corpo > * + * { margin-top: 22px; }
.painel__corpo h3 { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }
.painel__corpo h3 + p { margin-top: 8px; }
.painel__corpo p { font-size: 15px; line-height: 1.6; color: var(--tinta-3); }
.fechar { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; padding: 0 2px 0 12px; font: 500 12px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); }
.fechar i { width: 18px; height: 18px; position: relative; }
.fechar i::before, .fechar i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.fechar i::after { transform: rotate(-45deg); }
/* ficha: rótulo e valor, em 2 colunas no primeiro ecrã do projeto e numa coluna no painel */
.ficha { display: grid; grid-template-columns: repeat(var(--ficha-col, 2), minmax(0, 1fr)); gap: 14px var(--calha); }
.ficha > div { min-width: 0; border-top: 1px solid var(--linha); padding-top: 10px; }
.ficha dt { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dd { margin-top: 5px; font-size: 15px; line-height: 1.4; color: var(--tinta); }
.ficha dd ol { display: grid; gap: 2px; counter-reset: ficha; }
.ficha dd ol li { display: flex; gap: 8px; counter-increment: ficha; }
.ficha dd ol li::before { content: counter(ficha, decimal-leading-zero); flex: none; font: 500 11px/1.9 var(--sans); color: var(--acento); }
.painel .ficha { --ficha-col: 1; }
/* folha de fotografias */
.folha { position: fixed; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--noite); color: var(--osso); overflow: hidden; opacity: 0;
  --fundo: var(--noite); --tinta: var(--osso); --tinta-2: var(--pedra); --tinta-3: #B7B2A8; --linha: rgba(243, 241, 236, .14);
  --linha-forte: rgba(243, 241, 236, .42); --acento: var(--luz); --superficie: var(--noite-2); color-scheme: dark;
  transition: opacity .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete; }
.folha[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); opacity: 1; transition-duration: .3s; }
@starting-style { .folha[open] { opacity: 0; } }
.folha::backdrop { background: var(--noite); }
.folha__filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px clamp(20px, 3vw, 40px); }
.folha__filtros::-webkit-scrollbar { display: none; }
.folha__filtros button, .filtro { flex: none; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  border: 1px solid var(--linha-forte); font: 500 12px/1 var(--sans); letter-spacing: .04em; color: var(--tinta-3);
  transition: border-color .3s var(--ease), color .3s var(--ease); }
.folha__filtros button span, .filtro span { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.folha__filtros [aria-pressed="true"], .filtro[aria-pressed="true"] { border-color: var(--acento); color: var(--tinta); }
.folha__corpo { overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(20px, 3vw, 40px) calc(32px + env(safe-area-inset-bottom)); }
.folha__grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.folha__grelha > li { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--superficie); }
.folha__grelha > li > picture, .folha__grelha > li > picture img { width: 100%; height: 100%; }
.folha__grelha > li > picture img { object-fit: cover; }
.folha__grelha > li:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; }
/* render na folha: o rótulo "3D" por cima da miniatura (um render nunca passa por fotografia) */
.folha__3d { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 3px 6px 2px; font-size: 9px; letter-spacing: .12em;
  background: rgb(11 11 12 / .66); color: var(--osso); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .folha__grelha > li picture img { transition: transform .6s var(--ease), opacity .3s; }
  .folha__grelha > li:hover picture img { transform: scale(1.03); }
}
@media (max-width: 767px) { .folha__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } }
/* botão com contagem ("Ver as 103 fotografias", "Fotografias 103") */
.botao-n { display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 20px; border: 1px solid var(--linha-forte);
  border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--tinta); white-space: nowrap;
  transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.botao-n b { font-weight: 500; color: var(--acento); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .botao-n:hover { border-color: var(--acento); } }
/* texto a pedido (M7) */
:root { interpolate-size: allow-keywords; }
.mais { border-top: 1px solid var(--linha); }
.mais:last-of-type { border-bottom: 1px solid var(--linha); }
.mais > summary { position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding-block: 10px; cursor: pointer; font: 400 16px/1.4 var(--sans); color: var(--tinta); }
.mais > summary::-webkit-details-marker { display: none; }
/* o mesmo "+" do "Ler mais" (M15): o traço deitado fica, o de pé deita-se ao abrir e fica o "−" */
.mais > summary::after { content: ''; flex: none; width: 11px; height: 11px; margin-right: 4px;
  background: linear-gradient(var(--acento), var(--acento)) 50% 50% / 11px 1px no-repeat; }
.mais > summary::before { content: ''; position: absolute; right: 4px; top: 50%; width: 11px; height: 1px; margin-top: -.5px;
  background: var(--acento); transform: rotate(90deg); transition: transform .35s var(--ease); }
.mais[open] > summary::before { transform: rotate(0deg); }
.mais__corpo { padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--tinta-3); max-width: 60ch; }
.mais::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.mais[open]::details-content { block-size: auto; }

/* "Ler mais" (M15, 16-Out-2026): um só para o site todo. O texto do cliente fica todo no HTML, à letra.
   <div class="ler-mais [ler-mais--tudo | ler-mais--movel | ler-mais--estreito]" data-ler-mais>
     <div class="ler-mais__texto" id="x"> o texto; o que fica fechado leva .ler-mais__resto (um parágrafo ou o resto de uma frase) </div>
     {{@ ler_mais x}}   o botão: <button class="ler-mais__botao" aria-expanded aria-controls> com .ler-mais__sinal e .ler-mais__rotulo
   </div>
   Fechado: sem .ler-mais__resto; --tudo, só o botão; --movel, só o botão no telemóvel (no PC fica o que não é resto).
   O botão é um rótulo (letra pequena espaçada), com o "+" fino que roda para "−" ao abrir, 44 px de alto. O core.js abre e
   fecha no sítio: a altura anima curta e o que entra acende; com movimento reduzido, sem animação. Só fecha com JS
   (html.js, já no primeiro desenho, por isso nada salta) e sem .sem-mov (a rede de segurança do <head>, aos 3,2 s, se
   o core.js não chegar): sem JS, o texto está todo à vista e o botão não aparece. */
.ler-mais__texto { display: flow-root; }
.ler-mais__botao { display: none; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; background: none; border: 0;
  font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--t-curto) var(--ease); }
.ler-mais__sinal { position: relative; flex: none; width: 11px; height: 11px; }
.ler-mais__sinal::before, .ler-mais__sinal::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px;
  background: var(--acento); }
.ler-mais__sinal::after { transform: rotate(90deg); transition: transform .35s var(--ease); }
[aria-expanded="true"] > .ler-mais__sinal::after { transform: rotate(0deg); }
.ler-mais__botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ler-mais__botao:hover { color: var(--tinta); } }
html.js:not(.sem-mov) .ler-mais__botao { display: inline-flex; }
html.js:not(.sem-mov) .ler-mais:not(.is-aberto):not(.ler-mais--estreito) .ler-mais__resto,
html.js:not(.sem-mov) .ler-mais--tudo:not(.is-aberto) > .ler-mais__texto { display: none; }
@media (max-width: 767px) { html.js:not(.sem-mov) .ler-mais--movel:not(.is-aberto) > .ler-mais__texto { display: none; } }
/* --estreito: só fecha abaixo de 1024 px; no PC o texto todo e nenhum botão (a lista das obras da Versicolor®) */
@media (max-width: 1023px) { html.js:not(.sem-mov) .ler-mais--estreito:not(.is-aberto) .ler-mais__resto { display: none; } }
@media (min-width: 1024px) { html.js:not(.sem-mov) .ler-mais--estreito > .ler-mais__botao { display: none; } }

/* ------------------------------------------------------------------ 27. linha de luz sobre a fotografia (M11, só Porto Salvo)
   figure.luz-sobre[data-linha-luz] > picture + svg (viewBox no tamanho real; foco 50% 50%). Sem JS ou com movimento reduzido: já desenhada. */
.luz-sobre { position: relative; margin: 0; }
/* o quadro manda no tamanho (aspect-ratio e max-height postos pela página); a imagem cobre-o centrada e o SVG em slice faz a mesma conta */
.luz-sobre__quadro { position: relative; overflow: hidden; aspect-ratio: var(--luz-ar, 3 / 2); max-height: 80svh; background: var(--superficie); }
.luz-sobre__quadro > picture, .luz-sobre__quadro > picture img { width: 100%; height: 100%; }
.luz-sobre__quadro > picture img { object-fit: cover; object-position: 50% 50% !important; }
.luz-sobre__quadro > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.luz-sobre path { fill: none; stroke: var(--luz); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(205, 164, 96, .55)); }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.sem-mov) .luz-sobre:not(.acesa) path { stroke: var(--pedra); stroke-dasharray: 1; stroke-dashoffset: 1; filter: none; }
}

/* ------------------------------------------------------------------ 28. barra de contexto do projeto (M12) e pílula do telemóvel
   nav.barra-projeto[data-barra] > .barra__cap .barra__fio a[rel=prev] a[rel=next] button[data-abrir="indice-obras|ficha-x|fotos-x"].
   Aparece quando a capa sai do ecrã. PC: faixa de 44 px por baixo do cabeçalho. Telemóvel: pílula em baixo, só Informação e Fotografias
   (.barra__pc só no PC, .barra__movel só no telemóvel). */
.barra-projeto { position: fixed; z-index: 48; left: 0; right: 0; top: var(--cab); height: var(--barra); display: flex; align-items: center;
  gap: clamp(12px, 1.6vw, 24px); padding-inline: var(--margem); background: rgba(11, 11, 12, .9); color: var(--osso);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(243, 241, 236, .06);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  translate: 0 -100%; opacity: 0; visibility: hidden; transition: translate .3s var(--ease), opacity .3s var(--ease), visibility 0s .3s; }
.barra-projeto.visivel { translate: 0 0; opacity: 1; visibility: visible; transition: translate .3s var(--ease), opacity .3s var(--ease), visibility 0s; }
[data-cabecalho="claro"] .barra-projeto { background: rgba(243, 241, 236, .92); color: var(--grafite); border-top-color: rgba(43, 42, 40, .08); }
.barra__cap { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.6; }  /* 1,6: o til e o acento das maiúsculas (DECISÕES) não se cortam */
.barra__fio { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--luz); transform-origin: 0 50%; scale: var(--p, 0) 1; }
@supports (animation-timeline: scroll()) {
  .barra__fio { animation: vc-enche linear both; animation-timeline: scroll(root); }
}
@keyframes vc-enche { from { scale: 0 1; } to { scale: 1 1; } }
.barra-projeto a, .barra-projeto button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: color .3s var(--ease); }
.barra-projeto b { font-weight: 500; color: var(--luz); font-variant-numeric: tabular-nums; }
[data-cabecalho="claro"] .barra-projeto b { color: var(--luz-osso); }
@media (hover: hover) and (pointer: fine) { .barra-projeto a:hover, .barra-projeto button:hover { color: var(--luz); } }
.barra__movel { display: none; }
@media (max-width: 1023px) {
  .barra-projeto { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; right: auto; width: max-content; max-width: calc(100vw - 32px);
    height: auto; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid rgba(243, 241, 236, .2); translate: -50% calc(100% + 40px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28); letter-spacing: .04em; text-transform: none; font-size: 14px; }
  .barra-projeto.visivel { translate: -50% 0; }
  .barra-projeto > :not([data-abrir^="ficha-"]):not([data-abrir^="fotos-"]) { display: none; }
  .barra-projeto > [data-abrir] { padding: 0 18px; border-radius: 999px; min-height: 44px; }
  .barra-projeto > [data-abrir] + [data-abrir] { border-left: 1px solid rgba(243, 241, 236, .18); border-radius: 0 999px 999px 0; }
  .barra__pc { display: none; } .barra__movel { display: inline; }
}
html:not(.js) .barra-projeto { display: none; }

/* ------------------------------------------------------------------ 29. lista com pré-visualização (M9, opcional)
   [data-espreitar] com ligações [data-espreitar-src="url 800 px"] e um img.espreitar__img; só com rato. */
@media (hover: hover) and (pointer: fine) {
  [data-espreitar]:has([data-espreitar-src]:hover) [data-espreitar-src]:not(:hover) { opacity: .35; }
  [data-espreitar] [data-espreitar-src] { transition: opacity .2s; }
}
.espreitar__img { transition: opacity .15s ease; }
.espreitar__img.a-trocar { opacity: 0; }
@media not ((hover: hover) and (pointer: fine)) { .espreitar__img { display: none; } }

/* ------------------------------------------------------------------ 21. movimento: estados iniciais só com JS e movimento permitido */
/* formas com pronome numa só linha (o build envolve "Fale-nos", "responder-lhe") */
.sq { white-space: nowrap; }
.l { display: block; overflow: hidden; padding-block: .1em .16em; margin-block: -.1em -.16em; }
.l > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.sem-mov) [data-mov~="subir"]:not(.mov-feito) { opacity: 0; transform: translate3d(0, 20px, 0); }
  .js:not(.sem-mov) [data-mov~="escada"]:not(.mov-feito) > * { opacity: 0; transform: translate3d(0, 20px, 0); }
  .js:not(.sem-mov) [data-mov~="linhas"]:not(.mov-pronto) { visibility: hidden; }
  /* o título da abertura não espera pelo JS: as linhas sobem por CSS logo ao primeiro desenho (o LCP no telemóvel), o core.js só o dá por pronto */
  .js:not(.sem-mov) [data-abertura] [data-mov~="linhas"]:not(.mov-pronto) { visibility: visible; }
  .js:not(.sem-mov) [data-abertura] [data-mov~="linhas"] > .l > span { animation: mov-linha .8s cubic-bezier(.22, 1, .36, 1) .15s both; }
  .js:not(.sem-mov) [data-abertura] [data-mov~="linhas"] > .l:nth-child(2) > span { animation-delay: .23s; }
  .js:not(.sem-mov) [data-abertura] [data-mov~="linhas"] > .l:nth-child(3) > span { animation-delay: .31s; }
  @keyframes mov-linha { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
  .js:not(.sem-mov) [data-mov~="mascara"]:not(.mov-feito) { clip-path: inset(100% 0 0 0); }
  .js:not(.sem-mov) [data-mov~="mascara"][data-mov-dir="cima"]:not(.mov-feito) { clip-path: inset(0 0 100% 0); }
  .js:not(.sem-mov) [data-mov~="mascara"][data-mov-dir="esq"]:not(.mov-feito) { clip-path: inset(0 100% 0 0); }
  .js:not(.sem-mov) [data-mov~="mascara"][data-mov-dir="centro"]:not(.mov-feito) { clip-path: inset(50% 50% 50% 50%); }
  .js:not(.sem-mov) [data-mov~="fio"] { transform: scaleX(0); }
  .js:not(.sem-mov) .fio--v[data-mov~="fio"] { transform: scaleY(0); }
  .js:not(.sem-mov) svg[data-desenhar]:not(.desenhado) { --d: 1; }
  .js:not(.sem-mov) [data-mov~="acender"]:not(.mov-feito) { opacity: 0; }
}
[data-mov~="parallax"] { overflow: hidden; }

/* ------------------------------------------------------------------ 22. transições (M1): entre páginas a raiz esbate em .3s e a capa
   partilhada (data-vt) viaja em .45s; ao voltar (tipo "voltar"), inverte. Trocas na mesma página (modos, visor) marcam html.vt-local:
   aí a raiz não anima, só o grupo que muda (modo-palco .3s, foco .45s). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html:not(.vt-local)::view-transition-old(root) { animation: .3s cubic-bezier(.2, .7, .2, 1) both vc-esbate; }
html:not(.vt-local)::view-transition-new(root) { animation: .3s cubic-bezier(.2, .7, .2, 1) both vc-surge; }
html:active-view-transition-type(voltar)::view-transition-old(root) { animation-name: vc-esbate-volta; }
html:active-view-transition-type(voltar)::view-transition-new(root) { animation-name: vc-surge-volta; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-group(root) { animation-duration: .3s; }
::view-transition-group(cab), ::view-transition-group(barra) { animation-duration: .3s; }
/* o cabeçalho não pisca: fica só o novo, sem troca */
::view-transition-old(cab) { display: none; }
::view-transition-new(cab) { animation: none; }
/* o par antigo e novo mistura-se só entre si (o normal da especificação): com isolation: auto, o Safari somava a
   capa que viaja à página clara por baixo (plus-lighter) e ela passava a branco a meio da viagem */
::view-transition-image-pair(*) { isolation: isolate; }
/* a capa que viaja (cartão para obra e volta) e a imagem do visor (foco): a nova acende por cima da antiga, que fica
   inteira por baixo até a nova chegar e só então se apaga. A troca em soma (plus-lighter) deixava a imagem meio
   transparente a meio da viagem no Safari (as duas pontas têm recortes diferentes). O tamanho fica o normal: o
   object-fit nestas camadas não vale no Safari. */
[data-vt] { view-transition-class: capa; }
::view-transition-old(*.capa), ::view-transition-new(*.capa),
::view-transition-old(foco), ::view-transition-new(foco) { mix-blend-mode: normal; animation-duration: .45s; animation-fill-mode: both; }
::view-transition-old(*.capa), ::view-transition-old(foco) { animation-name: vc-fica; }
::view-transition-new(*.capa), ::view-transition-new(foco) { animation-name: vc-acende; }
html.vt-local::view-transition-old(root), html.vt-local::view-transition-new(root) { animation: none; }
html.vt-local::view-transition-group(root) { animation: none; }
::view-transition-group(modo-palco) { animation-duration: .3s; }
::view-transition-old(modo-palco) { animation: .3s var(--ease) both vc-sai; }
::view-transition-new(modo-palco) { animation: .3s var(--ease) both vc-surge; }
::view-transition-group(foco) { animation-duration: .45s; z-index: 100; }
@keyframes vc-esbate { to { opacity: 0; filter: brightness(.6); } }
@keyframes vc-surge { from { opacity: 0; } }
@keyframes vc-sai { to { opacity: 0; } }
@keyframes vc-esbate-volta { to { opacity: 0; } }
@keyframes vc-surge-volta { from { opacity: 0; filter: brightness(.6); } }
@keyframes vc-fica { 0%, 60% { opacity: 1; } to { opacity: 0; } }
@keyframes vc-acende { from { opacity: 0; } 60%, to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------ 23. utilitários e movimento reduzido */
.so-pc { display: none; }
@media (min-width: 1024px) { .so-pc { display: initial; } .so-movel { display: none !important; } }
/* os avisos de material provisório saíram da página (15-Out-2026, REVISAO-CLIENTE §15); o build tira-os do HTML e,
   se algum JS os voltar a pôr, não se veem. O registo está em _research/pendentes/provisorio.md */
.aviso-provisorio { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important; }
}
@media print {
  .cab, .menu, .barra-projeto, .vid__filme, .vid__pausa, .wa, .cc:not(.cc--pagina) { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------------ 30. WhatsApp flutuante e aviso de cookies (revisão do cliente, 15-Out-2026)
   a.wa[data-wa]: canto inferior direito, 44 px (48 no PC), discreto, com o ícone em osso. O core.js põe .wa--fora
   quando há um botão, campo ou ligação por baixo, no rodapé, com diálogos abertos e com o aviso de cookies; no
   telemóvel sobe por cima da pílula das obras (html.pilula-visivel). Sem JS fica sempre à vista. */
.wa { position: fixed; z-index: 45; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(20, 20, 20, .78); color: var(--osso); border: 1px solid rgba(243, 241, 236, .22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .25s var(--ease), visibility 0s linear 0s, translate .35s var(--ease), border-color var(--t-curto) var(--ease); }
.wa__icone { width: 20px; height: 20px; }
.wa--fora { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), visibility 0s linear .2s, translate .35s var(--ease); }
.wa { translate: 0 calc(-1 * var(--wa-subir, 0px)); }
html.pilula-visivel .wa { translate: 0 calc(-62px - var(--wa-subir, 0px)); }
@media (min-width: 1024px) {
  .wa { right: 24px; bottom: 24px; width: 48px; height: 48px; }
  .wa__icone { width: 22px; height: 22px; }
}
@media (hover: hover) and (pointer: fine) { .wa:hover { border-color: var(--luz); } }
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } }

/* aviso de cookies: não modal, em baixo à esquerda no PC e em toda a largura no telemóvel; Aceitar e Recusar com o
   mesmo peso. Só existe no HTML quando há identificadores em site.json medicao. .cc--pagina: as mesmas escolhas em /cookies */
.cc, .cc p, .cc b, .cc span, .cc label { font-family: var(--sans); }
/* opaco (o texto da página não se lê por trás) e baixo: no telemóvel os três botões numa linha; a escolher
   (.cc--escolher) mostra só as categorias e os botões, e nunca passa de 60% do ecrã (rola por dentro). O core.js só
   o mostra depois de a abertura de ecrã inteiro subir meio ecrã (início, Antevisão) */
.cc { position: fixed; z-index: 46; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 440px;
  max-height: 60svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px 12px; border-radius: 14px; background: var(--noite); color: var(--osso);
  border: 1px solid rgba(243, 241, 236, .16); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 13.5px; line-height: 1.45; }
@media (min-width: 768px) { .cc { left: 24px; right: auto; bottom: 24px; max-width: 420px; padding: 18px 20px 14px; } }
.cc__titulo { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--luz); margin-bottom: 6px; }
.cc--escolher .cc__texto, .cc--escolher [data-cc-acao="escolher"] { display: none; }
.cc--escolher .cc__botoes { flex-wrap: wrap; }
.cc:not(.cc--pagina) .cc__botoes { flex-wrap: nowrap; gap: 6px; margin-top: 10px; }
.cc:not(.cc--pagina) .cc__botao { padding: 0 16px; }
.cc:not(.cc--pagina) .cc__botao--texto { padding: 0 8px; }
.cc:not(.cc--pagina) .cc__cats { margin-top: 4px; }
.cc:not(.cc--pagina) .cc__cat { min-height: 48px; padding: 6px 0; }
.cc:not(.cc--pagina) .cc__cat-texto span { font-size: 12.5px; line-height: 1.35; }
.cc__texto { color: #CFCAC0; }
.cc__mais { color: var(--osso); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 241, 236, .4); }
.cc__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.cc__botao { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(243, 241, 236, .34);
  font: 500 14px/1 var(--sans); transition: border-color var(--t-curto) var(--ease), background var(--t-curto) var(--ease); }
.cc__botao--texto { border-color: transparent; padding: 0 12px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(243, 241, 236, .4); }
@media (hover: hover) and (pointer: fine) { .cc__botao:hover { border-color: var(--luz); } }
.cc__cats { display: grid; margin-top: 12px; border-top: 1px solid rgba(243, 241, 236, .12); }
.cc__cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0;
  border-bottom: 1px solid rgba(243, 241, 236, .12); }
.cc__cat-texto { display: grid; gap: 2px; cursor: pointer; }
.cc__cat-texto b { font-weight: 500; color: var(--tinta, var(--osso)); }
.cc__cat-texto span { font-size: 13px; color: var(--pedra); }
.cc__sempre { flex: none; font-size: 12px; color: var(--pedra); white-space: nowrap; }
.cc__interruptor { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0;
  border-radius: 999px; background: rgba(243, 241, 236, .2); cursor: pointer; transition: background .2s var(--ease); }
.cc__interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--osso); transition: translate .2s var(--ease); }
.cc__interruptor:checked { background: var(--luz); }
.cc__interruptor:checked::after { translate: 18px 0; background: var(--noite); }
.cc__estado { min-height: 1.5em; margin-top: 10px; font-size: 13px; color: var(--tinta-2, var(--pedra)); }
.cc--pagina { position: static; grid-column: 2; max-width: 38rem; margin-top: 18px; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--tinta); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc--pagina .cc__cats { border-top-color: var(--linha); margin-top: 0; }
.cc--pagina .cc__cat { border-bottom-color: var(--linha); }
.cc--pagina .cc__cat-texto span, .cc--pagina .cc__sempre { color: var(--tinta-2); }
.cc--pagina .cc__botao { border-color: var(--linha-forte); color: var(--tinta); }
.cc--pagina .cc__interruptor { background: var(--linha-forte); }
.cc--pagina .cc__interruptor:checked { background: var(--acento); }
.cc--pagina .cc__interruptor:checked::after { background: var(--fundo); }

/* 3D (frente "motor-3d"): sequência de fotogramas, planta em 3D, fusão 3D ↔ obra e profundidade ao rato.
   Comportamento em assets/js/vc3d.js (carregado à parte, só perto da secção); marcação pelos blocos sequencia_scroll,
   planta3d e fundir de src/blocks/comum.py. Sem JS e com movimento reduzido: posters, planta SVG e o par lado a lado,
   nada preso. O rótulo "3D" fica sempre à vista sobre o que é render. */
.vc3d-rotulo { position: absolute; top: 14px; left: 14px; z-index: 3; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--osso); padding: 7px 10px; background: rgba(11, 11, 12, .42); pointer-events: none; }
.vc3d-botoes { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 10px; }
.vc3d-botoes button { position: relative; min-height: 44px; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2); transition: color .2s var(--ease); }
.vc3d-botoes button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.vc3d-botoes button[aria-pressed="true"] { color: var(--tinta); }
.vc3d-botoes button[aria-pressed="true"]::after { transform: scaleX(1); }
.vc3d-botoes button:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vc3d-botoes button:hover { color: var(--tinta); } }
.seq3d__legenda, .planta3d__legenda, .fundir__legenda { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }

/* sequência de fotogramas ligada ao scroll */
.seq3d { position: relative; margin: 0; }
.seq3d.sequencia--presa { height: auto; }            /* tira o 150svh da sequência do sistema; o presa daqui vem abaixo */
.seq3d__palco { position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); background: var(--noite-2); }
.seq3d__poster, .seq3d__poster img, .seq3d__tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq3d__poster img { object-fit: cover; }
.seq3d__tela { opacity: 0; transition: opacity .35s var(--ease); }
.seq3d--viva .seq3d__tela { opacity: 1; }
.seq3d__fio { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 1px; background: rgba(243, 241, 236, .16); }
.seq3d__fio i { position: absolute; inset: 0; background: var(--luz); transform-origin: 0 50%; transform: scaleX(0); }
html:not(.js) .seq3d__fio, .seq3d--parada .seq3d__fio { display: none; }
@media (max-width: 767px) {
  .seq3d__palco { aspect-ratio: var(--ar-tel, 9 / 16); width: min(100%, calc((100svh - var(--cab) - 48px) * var(--arn-tel, .5625)));
    margin-inline: auto; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  html.js .seq3d--presa-pc.sequencia--presa:not(.seq3d--parada) { height: calc(100svh + var(--percurso, 1) * 100svh); }
  html.js .seq3d--presa-pc.sequencia--presa:not(.seq3d--parada) > .seq3d__fixo { position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center; padding-top: var(--cab); }
  html.js .seq3d--presa-pc.sequencia--presa:not(.seq3d--parada) .seq3d__palco {
    width: min(100%, calc((100svh - var(--cab) - 96px) * var(--arn, 1.7778))); margin-inline: auto; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  html.js .seq3d--presa-tel.sequencia--presa:not(.seq3d--parada) { height: calc(100svh + var(--percurso-tel, 1) * 100svh); }
  html.js .seq3d--presa-tel.sequencia--presa:not(.seq3d--parada) > .seq3d__fixo { position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center; padding-top: var(--cab); }
}

/* planta em 3D: o SVG desenhado fica por baixo até o three.js chegar, e fica sozinho sem WebGL */
.planta3d { position: relative; margin: 0; }
.planta3d__palco { position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); background: var(--noite); }
.planta3d .planta { color: var(--osso); }
.planta3d__plana { position: absolute; inset: 0; display: grid; place-items: center; padding: 5% 6%; transition: opacity .6s var(--ease); }
.planta3d__plana svg, .planta3d__img { width: 100%; height: 100%; }
.planta3d__img { object-fit: contain; filter: invert(93%) sepia(6%); }   /* o SVG em <img> traça a preto (currentColor) */
.planta3d__tela { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); cursor: grab; }
.planta3d--a-arrastar .planta3d__tela { cursor: grabbing; }
.planta3d--viva .planta3d__tela { opacity: 1; }
.planta3d--viva .planta3d__plana { opacity: 0; }
.planta3d--recurso .planta3d__estados { display: none; }
@media (max-width: 767px) { .planta3d__palco { aspect-ratio: 4 / 5; } }   /* o 3D roda a planta 90 graus no telemóvel */

/* fusão 3D ↔ obra (WebGL por cima das duas imagens; sem WebGL, cruzamento em CSS) */
.fundir { position: relative; margin: 0; }
.fundir__palco { position: relative; overflow: hidden; background: var(--superficie); }
.fundir__camada picture, .fundir__camada img { display: block; width: 100%; height: 100%; }
.fundir__camada img { object-fit: cover; }
html.js .fundir__palco { aspect-ratio: var(--ar, 3 / 2); }
html.js .fundir__camada { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
html.js .fundir__camada.e-atual { opacity: 1; z-index: 1; }
html.js .fundir--gl .fundir__camada { transition: none; }
.fundir__tela { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.fundir--a-fundir .fundir__tela { opacity: 1; }
html:not(.js) .fundir__palco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; }
html:not(.js) .fundir__camada { position: relative; aspect-ratio: var(--ar, 3 / 2); }
html:not(.js) .fundir__camada::before { content: attr(data-camada); position: absolute; top: 10px; left: 10px; z-index: 1;
  font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--osso); padding: 7px 10px;
  background: rgba(11, 11, 12, .42); }
html:not(.js) .fundir__rotulo, html:not(.js) .fundir__botoes { display: none; }
@media (prefers-reduced-motion: reduce) { html.js .fundir__camada { transition: none; } }

/* profundidade ao passar o rato: inclinação do contentor, paralaxe da imagem e um brilho de luz (sem WebGL) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vc3d-prof { transform: perspective(1100px) rotateX(var(--prof-rx, 0deg)) rotateY(var(--prof-ry, 0deg)); will-change: transform; }
  .vc3d-prof img { translate: var(--prof-tx, 0) var(--prof-ty, 0); scale: 1; transition: scale .6s var(--ease); }
  .vc3d-prof--sobre img { scale: 1.03; }
  .cartao .vc3d-prof img, .cartao.vc3d-prof img { scale: none; }   /* o cartão já cresce 1,02 (M13): chega para a paralaxe */
  .vc3d-prof--luz::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--prof-mx, 50%) var(--prof-my, 50%), rgba(205, 164, 96, .16), rgba(205, 164, 96, 0) 55%);
    mix-blend-mode: screen; transition: opacity .4s var(--ease); }
  .vc3d-prof--sobre::after { opacity: 1; }
}