/* Versicolor® · Antes & Depois (pedido do cliente de 19-Out-2026).
   O índice (destaque e cartões dos álbuns) e a página de cada álbum (comparadores, seleção do Depois, processo).
   O comparador é o do site (base.css §11, core.js); aqui só a medida, o grande e os rótulos ANTES e DEPOIS.
   Fundo --noite; o dourado só no foco e nos fios, como no resto do site. */

/* ---------------------------------------------------------------- rótulos ANTES e DEPOIS (tipografia do site, discretos) */
.ad-par .comparar__rotulo, .ini-ad .comparar__rotulo { top: 14px; padding: 6px 9px; font-size: 10px; letter-spacing: .2em;
  background: rgba(11, 11, 12, .36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ad-par .comparar__rotulo--a, .ini-ad .comparar__rotulo--a { left: 14px; }
.ad-par .comparar__rotulo--b, .ini-ad .comparar__rotulo--b { right: 14px; }
/* sem JavaScript as duas fotografias ficam uma sobre a outra: o nome vem com cada uma */
.ad-par__nome { display: none; }
html:not(.js) .ad-par__nome { display: inline-block; position: absolute; top: 14px; left: 14px; padding: 6px 9px; font: 500 10px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--osso); background: rgba(11, 11, 12, .5); }
html:not(.js) .ad-par [data-camada] { position: relative; }
.ad-par .comparar__palco { cursor: ew-resize; }
.ad-par__legenda { margin-top: 12px; }
.ad-par__espaco { color: var(--tinta); font-weight: 500; }
.ad-par__projeto { color: var(--tinta-2); }

/* ---------------------------------------------------------------- índice: abertura com o destaque */
.ad-abertura { position: relative; padding: calc(var(--cab) + clamp(12px, 2vw, 28px)) var(--margem) clamp(36px, 4vw, 60px);
  --etiqueta-topo: calc(var(--cab) + clamp(18px, 2.2vw, 32px)); }
@media (max-width: 1023px) { .ad-abertura > .etiqueta-v { display: none; } }
.ad-abertura__topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); row-gap: 14px;
  align-items: end; padding-bottom: clamp(16px, 1.8vw, 26px); }
.ad-abertura__titulo { grid-column: 1 / 7; margin: 0; font: 300 clamp(36px, 4vw, 60px)/1 var(--serif); letter-spacing: -.024em; text-wrap: balance; }
.ad-abertura__mote { grid-column: 7 / 13; justify-self: end; width: 100%; max-width: 34rem; margin: 0;
  font: 300 clamp(18px, 1.4vw, 21px)/1.35 var(--serif); color: var(--tinta); text-wrap: balance; }
@media (max-width: 767px) { .ad-abertura__titulo, .ad-abertura__mote { grid-column: 1 / -1; justify-self: start; } }
.ad-destaque { min-width: 0; }
html.js .ad-par--grande .comparar__palco { width: 100%; aspect-ratio: 16 / 9; max-height: 68svh; }
@media (max-width: 767px) { html.js .ad-par--grande .comparar__palco { aspect-ratio: 4 / 3; max-height: none; } }
html.js .ad-par .comparar__palco { width: 100%; }
.ad-destaque__legenda { margin: 12px 0 0; font-size: 13px; line-height: 1.45; }
.ad-destaque__onde { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; min-height: 44px; align-items: center; color: var(--tinta); text-decoration: none; }
.ad-destaque__proj { color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .ad-destaque__onde:hover .ad-destaque__proj { color: var(--acento); } }
.ad-destaque__onde:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------------------------------------------------------------- índice: os álbuns */
.ad-albuns { padding: 0 var(--margem) var(--secao); }
.ad-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px) var(--calha); }
@media (max-width: 1023px) { .ad-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ad-cartoes { grid-template-columns: minmax(0, 1fr); } }
.ad-cartao__lig { position: relative; display: grid; gap: 12px; color: var(--tinta); text-decoration: none; }
.ad-cartao__lig:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.ad-cartao__foto { display: block; aspect-ratio: 4 / 3; }
.ad-cartao__foto img { transition: transform 1.1s var(--ease); }
.ad-cartao__texto { display: grid; gap: 4px; padding-right: 28px; }
.ad-cartao__nome { font: 300 clamp(20px, 1.6vw, 24px)/1.15 var(--serif); letter-spacing: -.012em; }
.ad-cartao__meta { font-size: 13px; line-height: 1.4; color: var(--tinta-2); }
.ad-cartao__seta { position: absolute; right: 2px; bottom: 2px; color: var(--tinta-3); transition: transform var(--t-curto) var(--ease), color var(--t-curto) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ad-cartao__lig:hover .ad-cartao__foto img { transform: scale(1.03); }
  .ad-cartao__lig:hover .ad-cartao__seta { transform: translateX(4px); color: var(--acento); }
}

/* ---------------------------------------------------------------- álbum: topo */
.ad-album { padding: calc(var(--cab) + clamp(12px, 2vw, 28px)) var(--margem) var(--secao); }
.ad-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--calha); row-gap: 8px; align-items: end;
  padding-bottom: clamp(18px, 2vw, 30px); }
.ad-topo__voltar { grid-column: 1 / -1; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; color: var(--tinta-3); text-decoration: none; }
.ad-topo__titulo { grid-column: 1; margin: 0; font: 300 clamp(36px, 4vw, 60px)/1 var(--serif); letter-spacing: -.024em; }
.ad-topo__linha { grid-column: 2; grid-row: 2; margin: 0; font-size: 14px; color: var(--tinta-2); text-align: right; }
.ad-topo__projeto { grid-column: 2; grid-row: 3; justify-self: end; min-height: 44px; color: var(--tinta); text-decoration: none; }
@media (max-width: 767px) {
  .ad-topo { grid-template-columns: minmax(0, 1fr); }
  .ad-topo__titulo, .ad-topo__linha, .ad-topo__projeto { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; }
}

/* ---------------------------------------------------------------- álbum: os pares */
.ad-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 36px) var(--calha); align-items: start; }
@media (max-width: 767px) { .ad-pares { grid-template-columns: minmax(0, 1fr); } }
.ad-pares__item { min-width: 0; }
.ad-pares .ad-par__projeto { display: none; }
/* uma fotografia vertical sozinha na última fila fica ao centro, com uma largura que não passa o ecrã */
@media (min-width: 768px) {
  .ad-pares__item--v:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 520px); }
}
@media (max-width: 767px) { .ad-pares__item--v { width: min(100%, 440px); justify-self: center; } }

/* ---------------------------------------------------------------- álbum: seleção do Depois e processo */
.ad-sel, .ad-proc, .ad-vid { margin-top: clamp(40px, 5vw, 80px); }
.ad-sel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--linha); }
.ad-sec__titulo { margin: 0; font: 300 clamp(24px, 2.2vw, 34px)/1.1 var(--serif); letter-spacing: -.018em; }
.ad-sel__credito { margin: 0; }
.ad-sel__grade { column-count: 3; column-gap: var(--calha); }
@media (max-width: 767px) { .ad-sel__grade { column-count: 2; } }
.ad-sel__item { margin: 0 0 var(--calha); break-inside: avoid; background: var(--superficie); }
.ad-sel__item picture, .ad-sel__item img { display: block; width: 100%; height: auto; }
.ad-sel__item:focus-visible, .ad-proc__item:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.ad-proc__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--calha); }
@media (max-width: 767px) { .ad-proc__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-proc__item { margin: 0; aspect-ratio: 4 / 5; }
[data-ecra-inteiro] .ad-proc__item { cursor: zoom-in; }

/* ---------------------------------------------------------------- álbum: seguinte */
.ad-seguinte { display: grid; gap: 8px; margin-top: clamp(44px, 5vw, 80px); padding-top: 22px; border-top: 1px solid var(--linha);
  color: var(--tinta); text-decoration: none; }
.ad-seguinte__nome { font: 300 clamp(26px, 3vw, 44px)/1.1 var(--serif); letter-spacing: -.02em; }
.ad-seguinte .seta { display: inline-block; transition: transform var(--t-curto) var(--ease); }
.ad-seguinte:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .ad-seguinte:hover .seta { transform: translateX(6px); color: var(--acento); } }

.ad-vid__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--calha); }
.ad-vid__grade li { margin: 0; min-width: 0; }
.ad-vid__item { margin: 0; }
.ad-vid__item video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 80vh; object-fit: cover; background: var(--superficie); }
.ad-vid__item figcaption { margin-top: 8px; }
.ad-vid__grade li:first-child { grid-column: span 2; }
.ad-vid__grade li:first-child video { margin: 0 auto; width: auto; max-width: 100%; height: 80vh; max-height: 80vh; }
@media (max-width: 1023px) { .ad-vid__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-vid__grade li:first-child { grid-column: span 2; } }
@media (max-width: 767px) { .ad-vid__grade li:first-child video { height: auto; width: 100%; } }