/* ============================================================
   styles.css — identidade "chapa gravada" do site (Piazzolla/Archivo/IBM Plex Mono,
   paleta "chapa gravada": papel frio + tinta + verdegris + latão).
   Folha de estilo única, partilhada por todas as páginas do site.
   Os ficheiros originais desta identidade já não existem — esta é a versão principal do site.
   ============================================================ */

/* Change here: View Transitions nativas entre páginas (Chrome/Edge) — substitui o corte abrupto da navegação normal por um crossfade suave; em browsers sem suporte (Firefox/Safari) a navegação continua normal, sem quebrar nada */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ---------- Change here: tokens de tema (Modo Claro/Escuro) — cores "novas", nomeadas em PT, controladas por [data-theme] em <html> ---------- */
:root{
  /* Modo Claro (padrão, sem preferência do sistema nem escolha guardada) */
  --bg-papel:#F8F6F0;
  --text-tinta:#121316;
  --text-suave:#5C5E64;
  --acento-principal:#A38042;
  --acento-secundario:#EBE2D0;
  --linha-divisoria:#E6E1D8;
  --card-papel:#F1ECE0;
  /* Change here: cor do texto do selo "Estreada" — dourado/latão sóbrio, ~4.9:1 sobre --bg-papel */
  --acento-selo:#8A6420;
  /* Change here: cor do texto do selo "Por estrear" — terroso/siena quente, distinto do latão, ~5.4:1 sobre --bg-papel */
  --acento-pendente:#A8481F;
  /* Change here: preenchimentos subtis dos dois selos, para reforçar a diferenciação além da cor de texto */
  --selo-bg-estreada:#F1E9D4;
  --selo-bg-pendente:#F3E2D6;
  /* Change here: cor do brilho subtil ("glow") do selo "Premiada" — Modo Claro, tom dourado discreto */
  --premio-glow:rgba(163,128,66,0.38);
}
/* Change here: Modo Escuro automático via preferência do sistema — só se o utilizador não tiver escolhido um tema explicitamente */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-papel:#121316;
    --text-tinta:#EAE8E3;
    --text-suave:#A0A09C;
    --acento-principal:#C9A86A;
    --acento-secundario:#8C6E38;
    --linha-divisoria:#252830;
    --card-papel:#1B1D22;
    /* Change here: latão mais luminoso no selo "Estreada" — ~7:1 sobre #121316 */
    --acento-selo:#D4A94F;
    /* Change here: terracota/âmbar luminoso no selo "Por estrear" — ~7.8:1 sobre #121316, distinto do latão */
    --acento-pendente:#E8946A;
    /* Change here: preenchimentos subtis dos dois selos em Modo Escuro */
    --selo-bg-estreada:#2A2418;
    --selo-bg-pendente:#2E2119;
    /* Change here: brilho do selo "Premiada" em Modo Escuro — um pouco mais luminoso para se notar sobre o fundo escuro, sem exagerar */
    --premio-glow:rgba(201,168,106,0.5);
  }
}
/* Change here: Modo Escuro explícito, ativado pelo botão de alternância e guardado em localStorage — vence sempre a preferência do sistema */
:root[data-theme="dark"]{
  --bg-papel:#121316;
  --text-tinta:#EAE8E3;
  --text-suave:#A0A09C;
  --acento-principal:#C9A86A;
  --acento-secundario:#8C6E38;
  --linha-divisoria:#252830;
  --card-papel:#1B1D22;
  /* Change here: mesmos tons do Modo Escuro automático, repetidos aqui para quando o tema é escolhido explicitamente pelo botão */
  --acento-selo:#D4A94F;
  --acento-pendente:#E8946A;
  --selo-bg-estreada:#2A2418;
  --selo-bg-pendente:#2E2119;
  --premio-glow:rgba(201,168,106,0.5);
}

/* ---------- variáveis globais: fontes, largura máxima e paleta "de trabalho" — mudar aqui afeta o site inteiro ---------- */
:root{
  /* Change here: nomes antigos usados no resto da folha de estilo passam a apontar para os tokens de tema acima */
  --bg:var(--bg-papel);
  --ink:var(--text-tinta);
  --ink-soft:var(--text-suave);
  --muted:var(--text-suave);
  --accent:var(--acento-principal);        /* acento principal (links, hover, contornos) */
  --accent-deep:var(--acento-principal);   /* hover/ênfase — mesmo tom do acento principal no novo sistema de tema */
  --brass:var(--acento-secundario);        /* selos/badges/prémios */
  --line:var(--linha-divisoria);
  --card-bg:var(--card-papel);
  --header-footer-bg:#14171C;   /* fundo do header (.nav) e footer — pedido explícito, independente do tema */
  --header-footer-brand:#F8F6F0; /* nome "César Rafael" sobre o fundo escuro do header */
  --header-footer-link:#DEDCD3;  /* links do menu e rodapé sobre fundo escuro */
  --header-footer-active:#C9A86A; /* link da página ativa / estado aberto no header escuro */
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --display:'Piazzolla', 'Iowan Old Style', 'Palatino Linotype', serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
  --wrap:1180px;
}
*{ box-sizing:border-box; }
/* Change here: remove contornos/bordas residuais em todas as imagens do site (inclui o serrilhado que por vezes aparece em recortes circulares) */
img{ border:none; outline:none; }
/* Change here: teste de isolamento — nenhum recorte geométrico via CSS resolveu a serrilha, por isso a imagem em si (fotografia/home/foto-cesar-circular.png, logo-circular.png) já vem pré-cortada em círculo com fundo transparente; o <img> é renderizado sem qualquer border-radius/clip-path/mask/overflow/border/outline/box-shadow, ver .photo e .brand-icon abaixo */
/* font-size aqui é a base de todos os "rem" da página — reduzir/aumentar isto escala o site inteiro */
html{ scroll-behavior:smooth; font-size:87.5%; }
/* Change here: transição suave em toda a página ao trocar de tema */
*, *::before, *::after{ transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
  /* Change here: sticky footer — body vira coluna com altura mínima do ecrã, footer fica sempre no fundo */
  display:flex; flex-direction:column; min-height:100vh;
  /* Change here: fade-in suave (tempo aqui) quando o JS remove a classe lang-loading do <html> — usado só para evitar o flash de PT em visitas com idioma EN guardado (ver script inline no <head> de cada página + i18n-data.js) */
  opacity:1; transition:opacity .18s ease;
}
/* Change here: enquanto o idioma EN ainda não foi aplicado (classe posta no <head>, antes do 1º paint), body fica invisível sem transição — impede ver o texto em PT antes da troca */
html.lang-loading body{ opacity:0; transition:none; }
/* Change here: empurra o footer para o fundo quando o conteúdo da página é curto */
body > #pageContent{ flex:1 0 auto; }
/* Change here: transição suave (fade) do conteúdo principal ao trocar de página via transitions.js — duração/easing aqui; desativada com prefers-reduced-motion ou classe .reduced-motion */
#pageContent{ transition:opacity .22s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
#pageContent.is-leaving{ opacity:0; }
.reduced-motion #pageContent, html.lang-loading #pageContent{ transition:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--bg); }
h1, h2, h3{ text-wrap:balance; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); position:relative; z-index:2; }

/* ---------- pautas musicais de fundo (mesmo SVG do site original) — filtro tinge o cinza para a família do verdegris; para voltar ao neutro, apagar a linha filter ---------- */
.waves-bg{ position:fixed; top:0; left:0; width:100%; height:100svh; z-index:0; overflow:hidden; pointer-events:none; opacity:0.32; filter:sepia(0.3) hue-rotate(78deg) saturate(1.1) brightness(0.92); transform:translate3d(0,0,0); will-change:transform; backface-visibility:hidden; /* Change here: 100svh (small viewport, fixo) em vez de 100dvh evita que a altura seja recalculada a cada frame quando a barra do browser mobile aparece/desaparece — era essa recalculação contínua que causava o salto; translate3d + will-change mantêm a camada isolada na GPU */ }
.stave-layer{ position:absolute; inset:0; }
.stave-layer svg{ width:100%; height:100%; display:block; }

/* ---------- nav (header) — fundo escuro dedicado (--header-footer-*), independente da paleta clara do resto da página ---------- */
.nav{ position:relative; z-index:3; padding-block:1.6rem; background:var(--header-footer-bg); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--display); font-style:italic; font-size:1.5rem; font-weight:600; color:var(--header-footer-brand); letter-spacing:-0.01em; }
/* Change here: ícone circular do logótipo no cabeçalho — tamanho e espaçamento em relação ao nome */
.brand-icon{ width:30px; height:30px; object-fit:cover; flex:none; display:block; }
.nav-links{ position:relative; display:flex; align-items:center; gap:2.2rem; }
.nav-links a{ font-size:1.05rem; color:var(--header-footer-link); font-weight:500; padding-bottom:6px; position:relative; transition:color .2s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--header-footer-active); }
.nav-indicator{ position:absolute; bottom:0; height:2px; background:var(--header-footer-active); border-radius:2px; transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1); }
.lang{ display:flex; gap:0.6rem; margin-left:1.6rem; font-family:var(--mono); font-size:0.85rem; }
.lang span{ color:var(--header-footer-link); cursor:pointer; }
.lang span.active{ color:var(--header-footer-active); font-weight:600; }
.nav-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--header-footer-brand); border-radius:2px; }
.nav-mobile{ display:none; flex-direction:column; gap:1rem; padding-top:1rem; }
.nav-mobile a{ font-size:1.05rem; color:var(--header-footer-link); font-weight:500; }
.nav-mobile a:hover, .nav-mobile a.active{ color:var(--header-footer-active); }
.nav-mobile.open{ display:flex; }

/* Change here: botão Sol/Lua de alternância de tema — tamanho/cores/posição do botão redondo no header */
.theme-toggle{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; margin-left:1.2rem; border-radius:50%;
  border:1px solid rgba(234,232,227,0.22); background:none; color:var(--header-footer-link);
  cursor:pointer; transition:border-color .2s ease, color .2s ease, transform .2s ease;
  position:relative; overflow:hidden; /* Change here: overflow:hidden recorta o ícone que "desce" atrás do horizonte do botão */
}
.theme-toggle:hover{ color:var(--header-footer-active); border-color:var(--header-footer-active); }
/* Change here: pôr-do-sol/nascer-do-sol — os dois ícones ficam sobrepostos e o data-theme decide qual está "no horizonte" (visível) e qual está "posto" (deslocado, rodado e transparente) */
.theme-toggle svg{
  position:absolute; top:50%; left:50%; width:16px; height:16px;
  transform:translate(-50%,-50%) translateY(0) rotate(0deg); opacity:1;
  transition:opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.theme-toggle .icon-moon{ opacity:0; transform:translate(-50%,-50%) translateY(70%) rotate(-70deg); }
:root[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform:translate(-50%,-50%) translateY(70%) rotate(70deg); }
:root[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform:translate(-50%,-50%) translateY(0) rotate(0deg); }
/* Change here: micro-animação (brilho + rotação) tocada uma única vez em todo o site — controlada em theme.js via localStorage('hasSeenThemeAnimation') */
@keyframes themeTogglePulse{
  0%{ transform:rotate(0deg) scale(1); box-shadow:0 0 0 0 rgba(201,168,106,0); }
  35%{ transform:rotate(-14deg) scale(1.15); box-shadow:0 0 0 6px rgba(201,168,106,0.28); }
  65%{ transform:rotate(10deg) scale(1.05); box-shadow:0 0 0 2px rgba(201,168,106,0.14); }
  100%{ transform:rotate(0deg) scale(1); box-shadow:0 0 0 0 rgba(201,168,106,0); }
}
.theme-toggle-intro{ animation:themeTogglePulse 1.8s ease-in-out; }

@media (max-width:820px){ .nav-links{ display:none; } .nav-toggle{ display:flex; } }
/* Change here: no header mobile o "PT/EN" fica visível na barra compacta (não escondido/só no menu) — a ordem no HTML já o coloca antes do botão de tema, por isso basta reativar o display e agrupar os 3 controlos (lang, tema, hambúrguer) à direita */
@media (max-width:820px){
  .nav-row{ gap:0.7rem; }
  .lang{ display:flex; margin-left:auto; }
  .theme-toggle{ margin-left:0; }
}

.tick{ width:120px; height:2px; background:var(--accent); margin:0 auto; border-radius:2px; transform:scaleX(0); transform-origin:center; animation:tickIn .7s ease forwards; animation-delay:.2s; }
@keyframes tickIn{ to{ transform:scaleX(1); } }

/* ---------- hero (foto + ligações rápidas + painel Destaques) ---------- */
.hero{ position:relative; padding-block:clamp(1.7rem,4vw,3rem) clamp(2rem,4.7vw,3.3rem); }
.hero-grid{ display:grid; grid-template-columns:0.85fr 1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; margin-top:clamp(2.5rem,6vw,4rem); }

.photo{ width:100%; max-width:340px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; }
.photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .5s ease; pointer-events:none; -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; user-select:none; } /* Change here: pointer-events/user-drag none bloqueiam clique direto e arrastamento (proteção contra download), igual a .perf-media */
.photo:hover img{ transform:scale(1.05); }
/* Change here: overlay transparente que intercepta cliques/menu de contexto sobre a foto, sem alterar o layout */
.photo::after{ content:''; position:absolute; inset:0; z-index:1; background:transparent; }

/* Change here: crédito do autor da foto (📷 Nome) — texto vem de data-credit no HTML; borderradius:50% acompanha o recorte circular da imagem, evitando que o rótulo ultrapasse a curvatura */
.photo-credit{ border-radius:50%; overflow:hidden; } /* Change here: overflow:hidden recorta o gradiente/texto rigorosamente à circunferência, evitando que "escape" para fora do círculo */
.photo-credit::before{
  content:attr(data-credit); position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:12%; text-align:center; /* Change here: padding-bottom aproxima o texto do arco inferior — aumentar/diminuir para subir/descer a etiqueta */
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
  color:#F8F6F0; font-family:var(--mono); font-size:0.8rem; letter-spacing:0.03em;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.photo-credit:hover::before{ opacity:1; }
@media (max-width:600px){ .photo-credit::before{ font-size:0.72rem; } }
.photo .placeholder{ font-family:var(--mono); font-size:0.8rem; color:var(--muted); text-align:center; padding:1rem; }

.quicklinks{ display:flex; flex-direction:column; gap:0.4rem; padding-top:0.5rem; }
.qtitle{ font-family:var(--mono); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:0.6rem; }
.qlink{ display:flex; align-items:center; gap:0.9rem; padding:0.7rem 0.6rem; border-radius:4px; transition:background .2s ease, transform .2s ease; }
.qlink:hover{ background:var(--card-bg); transform:translateX(4px); }
.qicon{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .2s ease, background .2s ease; color:var(--ink); }
.qlink:hover .qicon{ border-color:var(--accent); background:var(--accent); color:var(--bg); }
.qicon svg{ width:17px; height:17px; }
.qlabel{ font-weight:600; font-size:0.98rem; color:var(--ink); }

.destaques{ background:var(--card-bg); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:3px; padding:clamp(1.6rem,3vw,2.2rem); }
.destaques h3.dtitle{ font-family:var(--mono); font-size:0.82rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 1.1rem; color:var(--accent-deep); }
.eyebrow{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:0.5rem; }
.piece-title{ font-family:var(--display); font-size:1.5rem; font-weight:600; font-style:italic; line-height:1.22; margin:0 0 0.4rem; color:var(--ink); }
.piece-date{ font-family:var(--mono); font-size:0.85rem; font-weight:600; color:var(--accent-deep); margin-bottom:0.9rem; }
.piece-credit{ font-size:0.92rem; color:var(--ink-soft); line-height:1.6; margin-bottom:0.3rem; }
.piece-venue{ font-size:0.92rem; color:var(--ink-soft); margin-top:0.6rem; padding-top:0.6rem; border-top:1px solid var(--line); }
.destaque-divider{ height:1px; background:var(--line); margin:1.3rem 0; }

.destaque-carousel{ display:flex; align-items:center; gap:0.5rem; }
/* Change here: altura do contentor passa a ser controlada por JS (transitions.js, updateHeight) consoante o cartão ativo — align-items:start evita que os cartões curtos sejam esticados ao tamanho do mais alto; overflow:hidden + transition fazem a mudança de altura entre cartões curtos/longos ser suave (0.3s) em vez de um salto brusco */
.destaque-viewport{ flex:1; min-width:0; display:grid; align-items:start; overflow:hidden; transition:height .3s ease; }
.destaque-item{ grid-area:1/1; visibility:hidden; opacity:0; pointer-events:none; }
.destaque-item.active{ visibility:visible; opacity:1; pointer-events:auto; animation:destFade .45s ease; }
@keyframes destFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.destaque-item .piece-title{ margin-top:0; }
.destaque-item .piece-credit:last-child, .destaque-item .piece-venue{ margin-bottom:0; }
/* Change here: botão "Ver peça" nos cartões de Destaque referentes a composições — mesmo visual de .work-card .work-link; aqui o próprio link é que reage ao :hover (o cartão não é um <a> inteiro, ao contrário dos cartões de Composições) */
.destaque-item .work-link{
  display:inline-flex; align-items:center; gap:0.35rem; margin-top:1rem;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em; font-weight:600;
  text-transform:uppercase; color:var(--accent-deep); border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.destaque-item .work-link:hover, .destaque-item .work-link:focus-visible{ border-color:var(--accent-deep); }

.dest-nav{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:none; color:var(--muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.05rem; line-height:1; padding:0; opacity:0.55;
  transition:opacity .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.dest-nav:hover{ opacity:1; border-color:var(--accent); background:var(--accent); color:var(--bg); }

.dest-dots{ display:flex; justify-content:center; gap:0.4rem; margin-top:1.2rem; }
.dest-dots .dot{ width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s ease; padding:0; border:none; }
.dest-dots .dot.active{ background:var(--accent-deep); }

/* Change here: a partir dos 750px (>= 750px) volta ao layout de desktop — grid de 3 colunas, "Destaques" à direita das ligações rápidas/foto (ver regra .hero-grid mais acima); abaixo disso entra em vigor a disposição vertical de telemóvel na regra seguinte */
@media (max-width:749px){ .hero-grid{ grid-template-columns:1fr; gap:2.2rem; } .photo{ max-width:180px; } }
/* Change here: telemóvel — foto de perfil e ligações rápidas lado a lado; .destaques continua a ocupar a linha toda por baixo. Válido só até 749px — a partir dos 750px o hero-grid volta a ser grid de desktop */
@media (max-width:749px){
  .hero-grid{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; }
  .hero-grid .photo{ max-width:180px; flex:none; order:1; margin:0; } /* Change here: tamanho da foto em mobile — mesmo valor da versão anterior (180px) */
  .hero-grid .quicklinks{ flex:1 1 auto; min-width:0; flex-direction:column; gap:0.4rem; padding-top:0; order:2; } /* Change here: ícones em coluna (não em linha) ao lado da foto */
  .hero-grid .quicklinks .qtitle{ display:none; } /* Change here: sem espaço para o rótulo "Ligações rápidas" ao lado da foto — reativar removendo esta linha, se necessário */
  /* Change here: por omissão (telemóveis mais largos, 400–999px) mostra ícone+texto, alinhados à esquerda; sem o retângulo de fundo/hover herdado do desktop nem o destaque cinzento nativo do toque em mobile */
  .hero-grid .quicklinks .qlink{
    padding:0.5rem; gap:0.7rem; justify-content:flex-start; align-items:center;
    background:transparent; transform:none; -webkit-tap-highlight-color:transparent;
  }
  .hero-grid .quicklinks .qlink:hover,
  .hero-grid .quicklinks .qlink:active,
  .hero-grid .quicklinks .qlink:focus{ background:transparent; transform:none; }
  .hero-grid .destaques{ order:3; flex-basis:100%; }
}
/* Change here: telemóveis estreitos (<400px) — sem espaço para o texto ao lado do ícone, por isso esconde-o e centra só o ícone; para subir/descer este limiar, ajusta os 400px aqui e acima */
@media (max-width:399px){
  .hero-grid .quicklinks .qlink{ justify-content:center; gap:0; }
  .hero-grid .quicklinks .qlabel{ display:none; }
}

/* ---------- shared section chrome ---------- */
section.block{ position:relative; z-index:2; padding-block:clamp(2rem,4.7vw,3.3rem); }
.section-head{ margin-bottom:1.5rem; }
.section-head h2{ font-family:var(--display); font-style:italic; font-size:clamp(1.5rem,3vw,2rem); font-weight:600; margin:0.4rem 0 0; color:var(--ink); }
.section-head .lede{ color:var(--ink-soft); margin-top:0.6rem; max-width:52ch; line-height:1.6; }
.more-link{ display:inline-flex; align-items:center; gap:0.4rem; margin-top:1.8rem; font-family:var(--mono); font-size:0.88rem; letter-spacing:0.03em; text-transform:uppercase; font-weight:600; color:var(--accent-deep); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.more-link:hover{ border-color:var(--accent-deep); }

/* ---------- composições preview (3 cartões na Home) — cartão de catálogo fiel ao mockup .piece-card de identidade-catalogo.html ---------- */
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; }
.work-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; background:var(--bg); border:1px solid var(--line);
  border-top:3px solid var(--accent); border-radius:2px; padding:1.6rem 1.6rem 1.5rem; min-height:13.77rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.work-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(20,23,28,0.35); }
/* Change here: badge "Premiada" fixo no canto superior direito do cartão — space-between + align-items:flex-start garantem que é sempre o título que quebra linha à esquerda, nunca o badge que desce */
.work-card .title-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; width:100%; }
/* Change here: sem numeral de catálogo — título deixa de ter width:100% fixo para poder partilhar a linha com o selo e quebrar para uma 2ª linha sem empurrar o badge */
.work-card h4{
  position:relative; z-index:1; flex:1 1 auto; min-width:0;
  font-family:var(--display); font-style:italic; font-weight:600; font-size:1.5rem; margin:0; color:var(--ink); text-align:left;
}
/* Change here: selo "Premiada" nunca encolhe nem quebra — fica sempre encostado ao canto superior direito */
.work-card .title-row .award-badge{ flex:none; margin-top:0.2rem; }
.work-card .instr{ position:relative; z-index:1; display:block; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); text-align:left; margin-top:0.35rem; }
.work-card .rule{ width:100%; height:1px; background:var(--line); margin-block:1rem; }
/* selo "Estreada"/"Por estrear" — mesma lógica de cor do carimbo usado em Composições (verdegris = estreada, latão = por estrear) */
.work-card .stamp{
  display:inline-block; font-family:var(--mono); font-size:0.84rem; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:3px; padding:0.3rem 0.6rem; transform:rotate(-3deg);
}
/* Change here: mesmo par de tons do selo em Composições — "Estreada" sóbrio, "Por estrear" em terracota para se distinguirem de imediato */
.work-card .stamp.premiered{ color:var(--acento-selo); background:var(--selo-bg-estreada); border:1px solid var(--acento-selo); }
.work-card .stamp.unpremiered{ color:var(--acento-pendente); background:var(--selo-bg-pendente); border:1px solid var(--acento-pendente); transform:rotate(3deg); }
.work-card .duration{ display:block; font-family:var(--mono); font-size:0.88rem; color:var(--ink-soft); margin-top:0.9rem; }
.work-card .work-link{
  display:inline-flex; align-items:center; gap:0.35rem; margin-top:1.1rem;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em; font-weight:600;
  text-transform:uppercase; color:var(--accent-deep); border-bottom:1px solid transparent;
}
.work-card:hover .work-link{ border-color:var(--accent-deep); }
@media (max-width:820px){ .works-grid{ grid-template-columns:1fr; } .work-card{ min-height:0; } }

/* ---------- sobre preview (texto + barra + foto) ---------- */
.body-text{ color:var(--ink-soft); line-height:1.85; font-size:1.05rem; max-width:52rem; text-align:justify; hyphens:auto; }
.sobre-grid{ display:grid; grid-template-columns:1fr auto 220px; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.sobre-grid .photo{ width:100%; max-width:220px; }
.sobre-divider{ width:3px; height:70px; background:var(--accent); border-radius:2px; justify-self:center; align-self:center; }
@media (max-width:820px){
  .sobre-grid{ grid-template-columns:1fr; gap:2rem; }
  .sobre-grid .photo{ max-width:180px; margin:0 auto; } /* Change here: sem order:-1 — a foto fica na ordem natural do HTML, ou seja, depois do texto */
  .sobre-divider{ display:none; }
}

/* ---------- bio preview (Composições) ---------- */
.bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.bio-grid p.body-text{ color:var(--ink-soft); line-height:1.75; }
.pull{ font-family:var(--display); font-style:italic; font-weight:600; font-size:clamp(1.2rem,2.4vw,1.5rem); line-height:1.4; color:var(--ink); border-left:3px solid var(--accent); padding-left:1.2rem; }
@media (max-width:820px){ .bio-grid{ grid-template-columns:1fr; gap:1.8rem; } }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Change here: tooltip genérico dos badges "Premiada"/"Estreada"/"Por estrear" — usado na Home e em composicoes.html; texto vem de data-tooltip, lógica de posição/fade em script.js (initInfoTooltips) */
.info-tooltip{
  position:absolute; top:0; left:0; z-index:60; max-width:min(280px, calc(100vw - 24px));
  background:var(--ink); color:var(--bg-papel); font-family:var(--sans); font-size:0.8rem; line-height:1.5;
  padding:0.6rem 0.85rem; border-radius:4px; box-shadow:0 12px 28px -12px rgba(20,23,28,0.45);
  opacity:0; visibility:hidden; transform:translateY(4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.info-tooltip.below{ transform:translateY(-4px); }
.info-tooltip.visible{ opacity:1; visibility:visible; transform:translateY(0); }
/* Change here: seta do balão — aponta sempre para o centro do badge via --tip-arrow-x, calculado em JS */
.info-tooltip::after{
  content:''; position:absolute; left:var(--tip-arrow-x, 50%); top:100%; width:9px; height:9px;
  background:var(--ink); transform:translateX(-50%) rotate(45deg); margin-top:-5px;
}
.info-tooltip.below::after{ top:0; margin-top:-4px; transform:translateX(-50%) rotate(45deg); }
/* Change here: badges com tooltip ganham um cursor de "ajuda" para sinalizar que há mais informação ao passar o rato/focar */
[data-tooltip]{ cursor:help; }
[data-tooltip]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:600px){ .info-tooltip{ font-size:0.86rem; padding:0.55rem 0.75rem; } }

/* ---------- footer — mesmo fundo escuro do header (--header-footer-*) ---------- */
/* Change here: footer permanece encostado ao fundo graças ao sticky footer no body */
footer{ position:relative; z-index:2; border-top:1px solid rgba(250,250,248,0.12); padding-block:2rem; background:var(--header-footer-bg); flex-shrink:0; }
.copy{ text-align:center; font-family:var(--mono); font-size:0.88rem; color:var(--header-footer-link); }

/* botão flutuante "voltar ao topo" */
.back-to-top{
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:50;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(20,23,28,0.4);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s ease, background .2s ease, color .2s ease;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ border-color:var(--accent); background:var(--accent); color:var(--bg); }
.back-to-top svg{ width:18px; height:18px; }
@media (max-width:600px){ .back-to-top{ bottom:1.2rem; right:1.2rem; width:40px; height:40px; } }

/* ============================================================
   composicoes.html — cabeçalho de página, pesquisa/filtros, acordeão de anos e cartão de peça
   ============================================================ */

.page-head{ padding-block:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,2.5rem); }
.page-head h1{ font-family:var(--display); font-style:italic; font-size:clamp(2rem,4.5vw,2.8rem); font-weight:600; color:var(--ink); margin:0; }
/* Change here: alinha o título do page-head com a largura do conteúdo principal que se segue (860px article / 980px performances) */
.page-head:has(+ main.article) .wrap, .page-head:has(+ main.performances) .wrap{ max-width:860px; margin-inline:auto; }
.page-head:has(+ main.performances) .wrap{ max-width:980px; }

.article{ position:relative; z-index:2; padding-block:0 clamp(3rem,6vw,4.5rem); }
.article .wrap{ max-width:860px; margin-inline:auto; }
.article p{ font-size:1.02rem; line-height:1.85; color:var(--ink); margin:0 0 1.4rem; }
.article p b, .article p strong{ color:var(--ink); font-weight:700; }

.lede{ font-family:var(--display); font-size:1.1rem; color:var(--ink-soft); margin:0 0 2.6rem; font-style:italic; }

/* caixa de pesquisa por instrumento */
.search-row{ display:flex; gap:0.8rem; margin-bottom:2.4rem; }
.search-input{
  flex:1; padding:0.8rem 1rem; border:1px solid var(--line); border-radius:3px;
  font-family:var(--sans); font-size:0.95rem; color:var(--ink); background:var(--bg);
}
.search-input:focus{ outline:none; border-color:var(--accent); }
.search-clear{
  padding:0.8rem 1.4rem; border-radius:3px; border:none; background:var(--ink);
  color:var(--bg); font-weight:600; font-size:0.9rem; cursor:pointer; transition:background .2s ease;
}
.search-clear:hover{ background:var(--accent-deep); }

/* Change here: mensagem "sem resultados" da pesquisa/filtros — aparece no lugar do year-list quando nenhuma peça corresponde; cor/padding aqui */
.search-empty{
  font-family:var(--sans); font-size:0.98rem; color:var(--ink-soft); line-height:1.7;
  background:var(--card-bg); border:1px solid var(--line); border-radius:3px;
  padding:1.6rem clamp(1.2rem,3vw,1.8rem); margin-top:0.4rem; text-align:center;
}
.search-empty-clear{
  display:inline; margin-left:0.3rem; padding:0; border:none; background:none;
  font-family:var(--sans); font-size:inherit; font-weight:600; color:var(--accent-deep);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.search-empty-clear:hover{ color:var(--accent); }

/* filtros como abas de índice — sublinhado em vez de pill preenchida */
.filter-chips{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line); }
.chip{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:0 0 0.7rem; border-radius:0; border:none; border-bottom:2px solid transparent; background:none;
  color:var(--muted); cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.chip:hover{ color:var(--ink); }
.chip.active{ border-color:var(--accent); color:var(--ink); }

/* acordeão por ano letivo — cabeçalho de "temporada" tipo programa de sala */
.year-list{ display:flex; flex-direction:column; gap:0; }
.year-item{
  position:relative; border:none; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent; transition:border-color .2s ease, box-shadow .2s ease; /* Change here: transparente para deixar as pautas de fundo (.waves-bg) transparecerem por trás do acordeão */
  scroll-margin-top:5.5rem; /* Change here: reforço nativo do alinhamento ao topo (compensa o cabeçalho) — o cálculo exato faz-se em JS via scrollToTop(), isto é só rede de segurança para scroll nativo */
  /* Change here: overflow:hidden removido — cortava a seta/ícone do cabeçalho na margem esquerda; a animação do acordeão já é contida por .year-content-inner */
}
.year-item:first-child{ border-top:1px solid var(--line); }
.year-item::before{ content:none; }
.year-item:hover{ box-shadow:none; }
.year-item.open{ border-color:var(--line); }
.year-item.no-match{ display:none; }
.year-toggle{
  display:flex; align-items:center; gap:1rem; width:100%; max-width:100%; box-sizing:border-box; padding:1.2rem 0.6rem;
  background:none; border:none; cursor:pointer; text-align:left; font-family:var(--sans);
  transition:background .2s ease;
} /* Change here: padding-left aumentado de 0.3rem para 0.6rem — dava pouco espaço à seta, que ficava a tocar/cortar na margem esquerda */
.year-toggle:hover{ background:var(--card-bg); }
.year-arrow{
  display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center;
  color:var(--accent-deep); transition:transform .3s cubic-bezier(.4,0,.2,1); flex:none;
}
.year-arrow svg{ width:100%; height:100%; }
.year-item.open .year-arrow{ transform:rotate(90deg); }
.year-info{ display:flex; align-items:baseline; gap:1rem; flex:1; }
.year-num{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.06em;
  color:var(--muted); font-weight:500;
}
.year-name{ font-family:var(--display); font-style:italic; font-weight:600; font-size:1.25rem; color:var(--ink); line-height:1.3; }
.year-item.open .year-name{ color:var(--accent-deep); }
.year-count{
  flex:none; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em;
  color:var(--muted); border:none; border-radius:0; padding:0;
  transition:color .2s ease;
}
.year-item:hover .year-count{ color:var(--accent-deep); }
.year-item.open .year-count{ color:var(--accent-deep); background:none; }

/* Change here: agrupa total + "X por estrear" por ano — tamanho/cor do texto secundário abaixo do total */
.year-counts{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:0.2rem; }
.year-unpremiered{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.04em;
  color:var(--ink-soft); opacity:0.75;
}

.year-content-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.year-item.open .year-content-wrap{ grid-template-rows:1fr; }
.year-content-inner{ overflow:hidden; }
.year-content{ padding:0.8rem 0.6rem 1.9rem; display:flex; flex-direction:column; gap:1.9rem; } /* Change here: padding-top 0.8rem dá respiro ao selo do 1º item, que ficava cortado pelo topo; padding-inline alinhado com .year-toggle (0.6rem) */
.year-empty{ color:var(--muted); font-size:0.92rem; font-style:italic; margin:0; }
.year-item.jump-open, .year-item.jump-open *{ transition:none !important; animation:none !important; }

/* ---------- cartão de cada composição ---------- */
.piece{
  display:grid; grid-template-columns:1fr 124px; gap:1.6rem; padding-top:1.9rem; border-top:1px solid var(--line);
  opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease;
  scroll-margin-top:5.5rem; /* Change here: idem — rede de segurança para o alinhamento ao topo ao saltar para uma peça específica */
  /* Change here: 2ª coluna com largura FIXA (não "auto") e ajustada à largura natural do botão (~122px) — impede que o texto à esquerda mude de largura ao trocar entre botão/miniatura, E garante que o botão fica encostado à direita, à mesma distância da margem do cartão que o título está da margem esquerda */
}
.piece:first-child{ border-top:none; padding-top:0; }
.piece.hidden{ display:none; }
.piece.highlight{ animation:pieceHighlight 2.2s ease; border-radius:2px; }
@keyframes pieceHighlight{
  0%{ background:var(--card-bg); box-shadow:0 0 0 1px var(--accent); }
  100%{ background:transparent; box-shadow:0 0 0 1px transparent; }
}
.year-item.open .piece{ opacity:1; transform:translateY(0); }
.year-item.open .piece:nth-of-type(1){ transition-delay:.05s; }
.year-item.open .piece:nth-of-type(2){ transition-delay:.13s; }
.year-item.open .piece:nth-of-type(3){ transition-delay:.21s; }
.year-item.open .piece:nth-of-type(4){ transition-delay:.29s; }
.year-item.open .piece:nth-of-type(5){ transition-delay:.37s; }
.year-item.open .piece:nth-of-type(6){ transition-delay:.45s; }
.piece-heading{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0.7rem; margin:0 0 0.2rem; }
.piece-main h4{ font-family:var(--display); font-style:italic; font-weight:600; font-size:1.15rem; margin:0; color:var(--ink); }

/* estados como selo (carimbo), não pill — leve rotação para lembrar tinta de carimbo real */
.piece-status{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.25rem 0.6rem; border-radius:3px; white-space:nowrap; flex:none;
  display:inline-flex; align-items:center; gap:0.4rem; transform:rotate(-2deg);
  position:relative; z-index:1; /* Change here: garante que o selo (rodado) nunca fica por baixo/cortado por elementos vizinhos */
}
.piece-status::before{ content:none; }
/* Change here: "Estreada" mantém-se sóbrio (dourado/latão + preenchimento subtil); "Por estrear" ganha tom terroso/terracota próprio para se distinguir à primeira vista */
.piece-status.unpremiered{ color:var(--acento-pendente); background:var(--selo-bg-pendente); border:1px solid var(--acento-pendente); font-weight:600; transform:rotate(2deg); }
.piece-status.premiered{ color:var(--acento-selo); background:var(--selo-bg-estreada); border:1px solid var(--acento-selo); transform:rotate(-2deg); }
/* Change here: selo compacto "Premiada" — mantém o cartão limpo (o nome do prémio já vai na descrição da peça); brilho dourado subtil via box-shadow, não via cor de texto ruidosa */
.award-badge{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  padding:0.25rem 0.6rem; border-radius:3px; white-space:nowrap; flex:none;
  display:inline-flex; align-items:center; gap:0.35rem;
  color:var(--acento-selo); background:var(--selo-bg-estreada); border:1px solid var(--acento-selo);
  box-shadow:0 0 9px 0 var(--premio-glow); /* Change here: intensidade/alcance do brilho — ajustar blur (9px) e var(--premio-glow) */
  position:relative; z-index:1; /* Change here: garante que o selo nunca fica por baixo/cortado por elementos vizinhos */
}
.award-badge svg{ width:12px; height:12px; flex:none; }
.piece-instr{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.8rem;
}
.piece-desc{ color:var(--ink-soft); line-height:1.7; font-size:0.95rem; margin:0 0 0.8rem; }
.piece-meta{ font-family:var(--mono); font-size:0.78rem; color:var(--muted); margin:0 0 1rem; font-variant-numeric:tabular-nums; }
.piece-main > *:last-child{ margin-bottom:0; }

/* Change here: player de vídeo do YouTube recolhido por omissão — poupa espaço vertical; o iframe só é criado quando se clica no botão (lazy real, não só o atributo loading) */
.piece-video{
  border-radius:3px; overflow:hidden; border:1px solid var(--line); background:var(--card-bg);
  box-shadow:0 16px 32px -18px rgba(20,23,28,0.28);
}
.video-toggle{
  display:flex; align-items:center; gap:0.8rem; width:100%; padding:0.9rem 1.1rem;
  background:none; border:none; cursor:pointer; text-align:left; font-family:var(--sans);
  transition:background .2s ease;
}
.video-toggle:hover{ background:var(--bg); }
/* Change here: círculo com ícone de "play" — muda de cor/preenchimento quando o vídeo está aberto */
.video-toggle-icon{
  flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--accent-deep);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.video-toggle-icon svg{ width:15px; height:15px; }
.video-toggle:hover .video-toggle-icon{ border-color:var(--accent); background:var(--accent); color:var(--bg); }
.video-toggle-label{
  flex:1; font-family:var(--mono); font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  font-weight:600; color:var(--ink);
}
.video-toggle-arrow{ flex:none; width:16px; height:16px; color:var(--muted); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.piece-video.open .video-toggle-arrow{ transform:rotate(90deg); }
.piece-video.open .video-toggle-icon{ border-color:var(--accent); color:var(--accent-deep); }

/* Change here: mesmo mecanismo de acordeão (grid-template-rows 0fr → 1fr) já usado no acordeão de anos, aplicado à secção do vídeo */
.video-frame-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.piece-video.open .video-frame-wrap{ grid-template-rows:1fr; }
.video-frame-inner{ overflow:hidden; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.piece-audio{ border-radius:3px; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 32px -18px rgba(20,23,28,0.28); }
.piece-audio iframe{ width:100%; height:166px; display:block; border:0; }

/* Change here: coluna de largura fixa (ver .piece) — botão e miniatura empilham no mesmo espaço reservado, sem nunca alterar a largura do texto ao lado */
/* Change here: align-items:center — centra a miniatura (mais estreita) diretamente por baixo do botão (que ocupa a largura total da coluna, encostado à direita do cartão) */
.piece-scores{ display:flex; flex-direction:column; flex-wrap:wrap; gap:0.6rem; align-items:center; padding:0; max-width:100%; box-sizing:border-box; } /* Change here: remove padding assimétrico; botão agora alinhado com topo do título para simetria de margens esquerda/direita; max-width/box-sizing evitam transbordo lateral da coluna */
/* Change here: centra o botão verticalmente no espaço entre o título e a linha de instrumentação — ajustar este valor se o título/instrumentação mudarem de tamanho */
.piece-scores .score-reveal{ margin-top:1.05rem; }
/* Change here: miniatura só aparece depois de revelada — arranca escondida atrás do botão "Revelar partitura" */
.piece-scores .score-thumb{ display:none; }
.piece-scores.revealed .score-thumb{ display:block; animation:scoreThumbIn .35s ease; }
/* Change here: recolhe com uma transição de saída suave (JS remove a classe "hiding" no fim da animação — ver composicoes.html) */
.piece-scores.hiding .score-thumb{ display:block; animation:scoreThumbOut .25s ease forwards; }
@keyframes scoreThumbIn{ from{ opacity:0; transform:translateY(6px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes scoreThumbOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(4px) scale(.96); } }

/* Change here: botão "Revelar/Ocultar partitura" pequeno, quadrado e elegante — border-radius reduzido (3px, entre 2-4px) em vez de formato pílula; contorno fino, fundo subtil e tipografia minimalista. Fica sempre visível (toggle), nunca desaparece */
.score-reveal{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.35rem;
  border-radius:3px; border:1px solid var(--line);
  background:var(--card-bg); color:var(--muted); cursor:pointer; padding:0.35rem 0.5rem;
  font-family:var(--mono); font-size:0.72rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; text-align:center; line-height:1.2; white-space:normal;
  max-width:100%; box-sizing:border-box; /* Change here: evita que o texto "OCULTAR PARTITURA" empurre o botão para fora da coluna/margem — reduz também font-size/letter-spacing se ainda transbordar */
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.score-reveal svg{ width:12px; height:12px; flex:none; }
.score-reveal:hover{ border-color:var(--accent); color:var(--accent-deep); background:var(--selo-bg-estreada); transform:translateY(-1px); }
.score-reveal:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Change here: estado ativo "Ocultar partitura" — contorno/cor de destaque para sinalizar que a miniatura está aberta */
.piece-scores.revealed .score-reveal{ border-color:var(--accent); color:var(--accent-deep); }
/* Change here: pulso subtil (quase impercetível) na 1ª vez que o botão aparece — reutiliza o brilho dourado var(--premio-glow) já usado no selo "Premiada"; controlado por sessionStorage('hasSeenScoreRevealIntro') em composicoes.html (nível de sessão, não localStorage) */
@keyframes scoreRevealPulse{
  0%{ box-shadow:0 0 0 0 transparent; }
  30%{ box-shadow:0 0 0 5px var(--premio-glow); }
  65%{ box-shadow:0 0 0 2px var(--premio-glow); }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.score-reveal.score-reveal-intro{ animation:scoreRevealPulse 2s ease-in-out .3s; }

/* Change here: seletor de versão (ex. "Tuba"/"Eufónio"/"Eufónio Si♭" em Inexorável) — pill com destaque deslizante
   entre o botão "Ocultar partitura" e a miniatura; só existe em peças cujo .piece-scores tem data-versions (ver
   composicoes.html). Suporta qualquer nº de opções (largura do destaque = 100%/nº versões, definida inline pelo JS;
   os botões usam flex:1 para dividir o espaço em partes iguais, tal como o destaque). Mesma linguagem visual do
   .score-reveal (borda/fundo/tipografia), arranca escondido tal como a miniatura */
.piece-scores .score-version-switch{ display:none; }
.piece-scores.revealed .score-version-switch{ display:flex; animation:scoreThumbIn .35s ease; }
.piece-scores.hiding .score-version-switch{ display:flex; animation:scoreThumbOut .25s ease forwards; }
.score-version-switch{
  position:relative; width:100%; max-width:100%; box-sizing:border-box;
  border-radius:3px; border:1px solid var(--line); background:var(--card-bg); overflow:hidden;
}
/* Change here: retângulo de destaque que desliza por trás do botão ativo — cor/velocidade da transição aqui;
   translateX(N * 100%) desliza suavemente por qualquer nº de posições, incluindo as 3 versões atuais */
.score-version-highlight{
  position:absolute; top:0; left:0; bottom:0; z-index:0;
  background:var(--accent); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.score-version-btn{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  flex:1 1 0%; min-width:0; border:0; background:none; cursor:pointer; padding:0.35rem 0.25rem;
  font-family:var(--mono); font-size:0.62rem; font-weight:600; letter-spacing:0.01em; text-transform:uppercase;
  color:var(--muted); line-height:1.25; text-align:center; word-break:break-word; transition:color .2s ease;
}
.score-version-btn.active{ color:#F8F6F0; }
.score-version-btn:hover:not(.active){ color:var(--accent-deep); }
.score-version-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* Change here: botão discreto "Partitura de consulta (PDF)" — só existe em peças de orquestra/ensemble (ver data-perusal em composicoes.html); mesma linguagem visual do .score-reveal, texto mais pequeno para caber em 2 linhas na coluna estreita */
/* Change here: oculto por defeito — só aparece junto com a miniatura revelada (ver .piece-scores.revealed/.hiding abaixo) */
.perusal-download{ display:none; }
.piece-scores.revealed .perusal-download{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.35rem; animation:scoreThumbIn .35s ease; /* Change here: mesma entrada suave da miniatura */
  border-radius:3px; border:1px solid var(--line);
  background:none; color:var(--muted); cursor:pointer; padding:0.35rem 0.5rem;
  font-family:var(--mono); font-size:0.72rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  text-align:center; line-height:1.25; white-space:normal; width:100%; max-width:100%; box-sizing:border-box;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.perusal-download svg{ width:12px; height:12px; flex:none; }
.perusal-download:hover{ border-color:var(--accent); color:var(--accent-deep); background:var(--selo-bg-estreada); transform:translateY(-1px); }
.perusal-download:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Change here: some junto com a miniatura ao clicar em "Ocultar partitura" — mesma transição de saída (.hiding), depois fica display:none outra vez */
.piece-scores.hiding .perusal-download{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.35rem;
  border-radius:3px; border:1px solid var(--line); background:none; color:var(--muted); cursor:pointer; padding:0.35rem 0.5rem;
  font-family:var(--mono); font-size:0.72rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  text-align:center; line-height:1.25; white-space:normal; width:100%; max-width:100%; box-sizing:border-box;
  animation:scoreThumbOut .25s ease forwards;
}

/* Change here: lightbox da amostra da partitura — reutiliza as classes .lightbox/.lightbox-backdrop/.lightbox-nav/.lightbox-close
   já definidas para a galeria da Autobiografia (ver mais abaixo); mostra 2 páginas lado a lado (livro aberto) em ecrãs largos,
   1 página em ecrãs estreitos (ver SPREAD_BREAKPOINT no script de composicoes.html, tem de bater certo com o media query abaixo) */
.score-sample-lightbox .lightbox-content{ max-width:min(94vw, 1480px); } /* Change here: largura máxima do conjunto de páginas */
.score-lightbox-pages{
  display:flex; align-items:flex-start; justify-content:center; gap:0; position:relative; overflow:hidden;
  perspective:1800px; -webkit-perspective:1800px; /* Change here: profundidade do efeito 3D da animação de folhear */
  transform-origin:center center; touch-action:none; /* Change here: touch-action:none entrega os gestos táteis (pinch/arrasto) ao nosso JS, em vez do scroll/zoom nativo do browser */
}
/* Change here: zoom/pan da amostra — ver setZoomAtPoint()/pointerdown-move-up em composicoes.html; o transform (translate+scale)
   aplica-se a este MESMO elemento que a folha usa como referência, mas o folhear só corre com zoom=1 (ver navScoreLightbox),
   por isso as duas coisas nunca entram em conflito */
.score-lightbox-pages.is-zoomed{ cursor:grab; }
.score-lightbox-pages.is-zoomed.is-panning{ cursor:grabbing; }
.score-lightbox-pages .score-page-img{
  display:block; max-height:76vh; width:auto; max-width:min(45vw, 620px); /* Change here: tamanho máx. de cada página no modo livro (2 páginas) */
  object-fit:contain; background:#FBFAF6; box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);
}
.score-lightbox-pages.two-up .score-page-img{ max-width:min(45vw, 560px); }
.score-lightbox-pages.two-up::before{
  /* Change here: sombra da "lombada" entre as 2 páginas — cor/largura aqui */
  content:''; position:absolute; top:0; bottom:0; left:50%; width:18px; margin-left:-9px; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,0.16), rgba(0,0,0,0) 50%, rgba(0,0,0,0.16));
}
@media (max-width:719px){
  /* Change here: abaixo do breakpoint só há espaço para 1 página — tem de bater certo com SPREAD_BREAKPOINT no script */
  .score-lightbox-pages .score-page-img{ max-width:88vw; max-height:70vh; }
}
/* Change here: a folha que se vira ao mudar de página — só ESTE elemento roda (ver buildFlipLeaf() em composicoes.html);
   a página do outro lado e o resto da vista ficam completamente parados. .score-flip-face--front/back são as duas caras
   da folha (página atual / página seguinte já por baixo), coladas costas-com-costas e viradas para lados opostos —
   backface-visibility:hidden faz cada cara desaparecer assim que fica de perfil, revelando a outra a meio da rotação */
.score-flip-leaf{
  position:absolute; top:0; z-index:5; pointer-events:none;
  transform-style:preserve-3d; transform:rotateY(0deg);
  transition:transform .6s cubic-bezier(.45,.05,.35,1); /* Change here: duração/curva do folhear — tem de bater certo com FLIP_MS em composicoes.html */
}
.score-flip-face{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#FBFAF6; box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.score-flip-face img{ display:block; width:100%; height:100%; object-fit:contain; }
.score-flip-face--back{ transform:rotateY(180deg); } /* Change here: pré-roda a cara de trás para o conteúdo não sair espelhado quando a folha completa a rotação */
@media (prefers-reduced-motion:reduce){
  .score-flip-leaf{ transition-duration:.01s; }
}
/* Change here: seta desativada (início/fim do "livro") — não há wrap-around, fica visível mas inerte;
   NÃO usar pointer-events:none aqui — a seta fica por cima do .lightbox-backdrop, e com pointer-events:none
   o clique atravessava o botão e atingia o backdrop por baixo, fechando o leitor sem querer (ver guarda em
   composicoes.html que trata is-disabled em JS, com stopPropagation/preventDefault) */
.score-sample-lightbox .lightbox-nav.is-disabled{ opacity:0.3; cursor:default; }
/* Change here: barra de zoom (+/−/repor) — fica em fluxo normal (não mais position:absolute) DEPOIS da legenda de páginas,
   para nunca sobrepor o texto "Páginas X–Y de Z"; margin-top dá o espaçamento entre os dois blocos. Opcional — a roda do
   rato/duplo-clique/duplo-toque/pinch funcionam sem ela */
.score-zoom-controls{
  margin-top:0.85rem; z-index:6;
  display:flex; align-items:center; gap:8px;
}
.score-zoom-btn{
  width:32px; height:32px; padding:0; border-radius:50%; border:1px solid rgba(248,246,240,0.35);
  background:rgba(20,23,28,0.55); color:#F8F6F0; font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.score-zoom-btn svg{ width:16px; height:16px; flex:none; } /* Change here: tamanho do ícone dentro dos botões de zoom/repor */
.score-zoom-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg-papel); }
/* Change here: botão "repor vista" — mesmo tamanho/estilo circular dos botões +/−, só com ícone, sem texto (ver HTML) */
.score-zoom-btn--reset svg{ width:14px; height:14px; }
/* Change here: miniatura de partitura como "folha real" — proporção A4 vertical (210x297); troca para aspect-ratio:297/210 ou usa a classe .landscape em peças cuja partitura é apresentada na horizontal */
.score-thumb{
  width:92px; aspect-ratio:210/297; border-radius:2px; overflow:hidden; position:relative; cursor:pointer;
  background:#FBFAF6; /* Change here: papel sempre claro, mesmo em Modo Escuro — simula a folha impressa real */
  box-shadow:
    3px 3px 0 0 var(--bg),      /* Change here: recorte que separa a "folha de baixo" da pilha — cor = fundo da página */
    3px 3px 0 1px var(--line),  /* Change here: contorno da folha de baixo — dá a ilusão de pilha de páginas */
    0 10px 20px -14px rgba(20,23,28,0.4);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.score-thumb.landscape{ aspect-ratio:297/210; } /* Change here: aplica esta classe nas peças cuja partitura é apresentada em modo apaisado */
/* pauta impressa subtil no topo da folha — reforça a leitura de manuscrito musical em vez de papel genérico */
.score-thumb::before{
  content:''; position:absolute; left:16%; right:12%; top:14%; height:44%;
  background-image:repeating-linear-gradient(#C9C2AE 0 1px, transparent 1px 6px);
  opacity:0.55; pointer-events:none;
}
/* dobra de canto — pequeno detalhe que reforça a leitura de "página física" */
.score-thumb::after{
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 11px 11px 0; border-color:transparent var(--line) transparent transparent; pointer-events:none;
}
.score-thumb:hover, .score-thumb:focus-visible{
  transform:translateY(-4px);
  box-shadow:3px 3px 0 0 var(--bg), 3px 3px 0 1px var(--accent), 0 20px 32px -16px rgba(20,23,28,0.5);
  outline:none;
}
.score-thumb img{ width:100%; height:100%; object-fit:cover; position:relative; }

/* Change here: badge "Ver Amostra" sobre a folha ao passar o rato/focar — cor/opacidade do véu e texto aqui */
.score-overlay{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem;
  background:rgba(18,19,22,0.74); color:#F8F6F0; opacity:0; padding:0.3rem; text-align:center;
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  transition:opacity .22s ease;
}
.score-overlay svg{ width:18px; height:18px; }
.score-thumb:hover .score-overlay, .score-thumb:focus-visible .score-overlay{ opacity:1; }
.score-thumb--empty .score-overlay{ display:none; } /* Change here: sem miniatura real não há "amostra" para mostrar em hover */

/* Change here: estado sem miniatura — bloco alternativo elegante com CTA "Ver Partitura (PDF)" em vez do retângulo cinzento genérico */
.score-thumb .placeholder{ color:var(--ink-soft); gap:0.4rem; padding:0.4rem; text-align:center; transition:color .2s ease, transform .2s ease; }
.score-thumb .placeholder svg{ width:22px; height:22px; }
.placeholder-label{ font-family:var(--mono); font-size:0.76rem; letter-spacing:0.03em; line-height:1.35; }
.score-thumb--empty{ background:var(--card-bg); box-shadow:0 0 0 1px var(--line) inset; }
.score-thumb--empty::before, .score-thumb--empty::after{ content:none; }
.score-thumb--empty:hover, .score-thumb--empty:focus-visible{ transform:none; box-shadow:0 0 0 1px var(--accent) inset; }
.score-thumb--empty:hover .placeholder, .score-thumb--empty:focus-visible .placeholder{ color:var(--accent-deep); transform:scale(1.05); }

@media (max-width:820px){
  .article p{ font-size:0.98rem; }
  .piece{ grid-template-columns:1fr; }
  .piece-scores{ margin-top:0.2rem; }
  .score-thumb{ width:78px; } /* Change here: largura da miniatura de partitura em mobile — o botão "Revelar partitura" já é compacto/auto e não precisa de ajuste */
}

/* ============================================================
   performances.html — lista de concertos por ano, imagem/texto alternado
   ============================================================ */

.performances{ position:relative; z-index:2; padding-block:0 clamp(3rem,6vw,4.5rem); }
.performances .wrap{ max-width:980px; margin-inline:auto; }

/* cabeçalho de cada ano — mesma voz do cabeçalho de "temporada" do acordeão de Composições */
.perf-year{
  font-family:var(--display); font-style:italic; font-weight:600; color:var(--accent-deep);
  font-size:clamp(1.6rem,3.4vw,2.1rem);
  margin:clamp(2.6rem,5vw,3.6rem) 0 1.8rem; padding-bottom:0.8rem; border-bottom:1px solid var(--line);
}
.perf-year:first-child{ margin-top:0; }

.perf-entry{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3rem); align-items:center;
  padding-block:clamp(1.8rem,4vw,2.4rem);
}
.perf-entry.divided{ border-top:1px solid var(--line); }

.perf-media{
  border-radius:3px; overflow:hidden; width:100%; height:auto; order:2; border:1px solid var(--line);
  background:var(--card-bg,var(--bg)); box-shadow:0 20px 40px -22px rgba(20,23,28,0.3);
  display:flex; align-items:center; justify-content:center;
}
.perf-media img{ width:100%; height:auto; display:block; pointer-events:none; -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; user-select:none; } /* Change here: sem aspect-ratio fixo nem object-fit, a moldura segue a proporção real da imagem — sem faixas de fundo visíveis; pointer-events/user-drag none bloqueiam clique direto e arrastamento (proteção contra download) */
.perf-media .placeholder{ font-family:var(--mono); font-size:0.82rem; color:var(--muted); text-align:center; padding:1rem; }
/* Change here: overlay transparente que intercepta cliques/menu de contexto sobre a imagem, sem alterar o layout — só em performances.html */
.perf-media{ position:relative; }
.perf-media::after{ content:''; position:absolute; inset:0; z-index:1; background:transparent; }

.perf-info{ order:1; text-align:left; }
.perf-entry.reverse .perf-media{ order:1; }
.perf-entry.reverse .perf-info{ order:2; text-align:right; }

.perf-title{ font-family:var(--display); font-style:italic; font-weight:600; font-size:1.35rem; color:var(--ink); margin:0 0 0.5rem; line-height:1.3; }
.perf-date{ font-family:var(--mono); font-size:clamp(1.05rem,1.9vw,1.25rem); font-weight:600; font-style:normal; color:var(--accent-deep); margin:0 0 0.9rem; font-variant-numeric:tabular-nums; }
.perf-meta{ color:var(--ink-soft); font-size:0.92rem; line-height:1.75; margin:0; }

@media (max-width:820px){
  .perf-entry{ grid-template-columns:1fr; }
  /* Change here: em telemóvel o texto (título/local/detalhes) fica sempre acima da imagem, independentemente de o cartão ser "reverse" no desktop */
  .perf-entry .perf-info, .perf-entry.reverse .perf-info{ order:1; text-align:left; }
  .perf-entry .perf-media, .perf-entry.reverse .perf-media{ order:2; }
}

/* ============================================================
   autobiografia.html — timeline vertical + carrossel de fotos nos marcos
   ============================================================ */

.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{
  content:""; position:absolute; top:0.4rem; bottom:0.4rem; left:5px;
  width:2px; background:var(--line);
}
.timeline-item{ position:relative; padding-bottom:2.8rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:-2.2rem; top:0.35rem; width:12px; height:12px;
  border-radius:50%; background:var(--accent-deep); border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--line);
}
.timeline-item.milestone .timeline-dot{ background:var(--accent); width:14px; height:14px; left:-2.3rem; top:0.28rem; }
.timeline-year{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:600; margin-bottom:0.4rem;
}
.timeline-title{ font-family:var(--display); font-style:italic; font-weight:600; font-size:1.18rem; color:var(--ink); margin:0 0 0.5rem; line-height:1.4; }
.timeline-text{ color:var(--ink-soft); line-height:1.75; font-size:0.98rem; margin:0; }
.timeline-text + .timeline-text{ margin-top:0.8rem; }

.chapter-subtitle{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 1.4rem; padding-left:0;
}
.timeline .chapter-subtitle{ margin-top:2.6rem; }
.timeline .chapter-subtitle:first-child{ margin-top:0; }

.timeline-item.milestone{ min-height:28rem; } /* Change here: aumentado junto com .milestone-media para acomodar a imagem maior sem sobrepor o item seguinte da timeline */
.milestone-text{ max-width:52ch; }
.milestone-media{ position:absolute; top:3.3rem; right:0; width:min(360px, 40%); } /* Change here: largura do bloco de imagem/carrossel — era min(300px,34%); posicionamento absoluto, não afeta a coluna de texto */

/* carrossel de fotos nos marcos da timeline */
.carousel-frame{ position:relative; }
.carousel-track{
  width:100%; aspect-ratio:4/3; border-radius:3px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(145deg,#EFEDE4,#DFDCCF);
  box-shadow:0 24px 48px -24px rgba(20,23,28,0.28);
  position:relative; cursor:pointer; /* Change here: indica que a foto abre em vista ampliada ao clicar */
}
/* Change here: crédito do fotógrafo em fotos retangulares (carrossel) — texto vem de data-credit no HTML; gradiente/overlay contidos pelo overflow:hidden de .carousel-track, ao contrário do formato circular de .photo-credit */
.carousel-credit::after{
  content:attr(data-credit); position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:1.8rem 0.8rem 0.8rem; text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color:#F8F6F0; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.carousel-frame:hover .carousel-credit::after{ opacity:1; }
.carousel-slide{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.carousel-slide.active{ display:flex; opacity:1; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; }
.carousel-slide .placeholder{ font-family:var(--mono); font-size:0.8rem; color:var(--muted); text-align:center; padding:1rem; }

.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--card-bg); color:var(--ink); /* Change here: fundo segue o tema (claro/escuro) em vez de branco fixo, para o ícone nunca perder contraste */
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:1.2rem; line-height:1;
  opacity:0; transition:opacity .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  z-index:2;
}
.carousel-frame:hover .carousel-nav,
.carousel-nav:focus-visible{ opacity:1; }
/* Change here: hover usa o acento com texto --bg (claro sobre acento em Modo Claro, escuro sobre acento dourado em Modo Escuro) — nunca "bola branca" sólida */
.carousel-nav:hover{ border-color:var(--accent); background:var(--accent); color:var(--bg-papel); }
.carousel-nav.prev{ left:12px; }
.carousel-nav.next{ right:12px; }

.carousel-download{
  position:absolute; top:12px; right:12px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--card-bg); color:var(--ink); /* Change here: fundo segue o tema, mesmo raciocínio de .carousel-nav */
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition:opacity .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.carousel-frame:hover .carousel-download,
.carousel-download:focus-visible{ opacity:1; }
.carousel-download:hover{ border-color:var(--accent-deep); background:var(--accent-deep); color:var(--bg-papel); }
.carousel-download svg{ width:16px; height:16px; }

.carousel-meta{ margin-top:0.9rem; }
.carousel-meta figcaption{
  text-align:center; font-style:italic; font-family:var(--display); font-size:0.92rem;
  color:var(--ink-soft); line-height:1.6; max-width:56ch; margin:0 auto 1rem;
  min-height:4.2em; /* Change here: min-height (não height fixo) mantém o espaçamento em legendas curtas sem cortar as mais longas */
  display:flex; align-items:center; justify-content:center;
}
.carousel-controls{ display:flex; align-items:center; justify-content:center; }
.carousel-dots{ display:flex; gap:0.5rem; }
.carousel-dots .dot{
  width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer;
  transition:background .2s ease;
}
.carousel-dots .dot.active{ background:var(--accent-deep); }

@media (max-width:820px){
  .carousel-nav{ width:34px; height:34px; }
  .timeline-item.milestone{ min-height:0; }
  .milestone-text{ max-width:none; }
  .milestone-media{ position:static; width:100%; max-width:320px; margin-top:1.5rem; } /* Change here: largura da imagem/carrossel em mobile — era 280px */
}

/* vista ampliada (lightbox) das fotos da autobiografia — para mudar o desfoque/escurecimento do fundo ajusta backdrop-filter/background em .lightbox-backdrop */
body.lightbox-locked{ overflow:hidden; } /* Change here: bloqueia o scroll da página enquanto a vista ampliada está aberta */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lightbox-backdrop{
  position:absolute; inset:0; background:rgba(15,17,21,0.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); /* Change here: intensidade do desfoque do fundo */
}
.lightbox-content{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  max-width:min(92vw, 920px); max-height:90vh; padding:0 1rem;
}
.lightbox-img{
  max-width:100%; max-height:72vh; width:auto; height:auto; object-fit:contain;
  border-radius:4px; box-shadow:0 30px 70px -20px rgba(0,0,0,0.55);
}
.lightbox-caption{
  margin:1rem 0 0; text-align:center; font-style:italic; font-family:var(--display); font-size:0.95rem;
  color:#F8F6F0; line-height:1.6; max-width:60ch;
}
.lightbox-credit{ margin:0.4rem 0 0; text-align:center; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em; color:rgba(248,246,240,0.7); }
/* Change here: tamanho/posição dos botões flutuantes (fechar, download, setas) da vista ampliada */
.lightbox-close, .lightbox-download, .lightbox-nav{
  position:absolute; z-index:2; border-radius:50%; border:1px solid rgba(248,246,240,0.35);
  background:rgba(20,23,28,0.5); color:#F8F6F0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.lightbox-close:hover, .lightbox-download:hover, .lightbox-nav:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg-papel); }
.lightbox-close{ top:20px; right:20px; width:42px; height:42px; font-size:1.6rem; line-height:1; }
.lightbox-download{ top:20px; right:74px; width:42px; height:42px; }
.lightbox-download svg{ width:18px; height:18px; }
.lightbox-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.7rem; line-height:1; }
.lightbox-nav.prev{ left:20px; }
.lightbox-nav.next{ right:20px; }
@media (max-width:600px){
  .lightbox-close{ top:12px; right:12px; width:38px; height:38px; }
  .lightbox-download{ top:12px; right:60px; width:38px; height:38px; }
  .lightbox-nav{ width:38px; height:38px; }
  .lightbox-nav.prev{ left:8px; }
  .lightbox-nav.next{ right:8px; }
  .lightbox-caption{ font-size:0.85rem; }
}

/* ============================================================
   contactos.html — cabeçalho, ícones diretos e formulário (Netlify Forms)
   ============================================================ */

/* contactos.html tem o cabeçalho centrado (as outras páginas têm-no alinhado à esquerda) — por isso a regra é isolada com body.page-contactos */
body.page-contactos .page-head{ text-align:center; padding-block:clamp(2.5rem,6vw,4rem) clamp(0.5rem,2vw,1rem); }
body.page-contactos .page-head .lede{ font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--ink-soft); margin:0.7rem auto 0; max-width:48ch; line-height:1.6; }

.contact-wrap{ position:relative; z-index:2; padding-block:0 clamp(3rem,6vw,4.5rem); }

.contact-intro{ display:flex; align-items:center; justify-content:center; gap:0.7rem; margin-bottom:1.2rem; }
.contact-intro .mini-photo{ position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; background:var(--card-bg); border:1px solid var(--line); }
.contact-intro .mini-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); pointer-events:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
/* Change here: camada transparente sobre a foto — recebe clique-direito/toque-longo/arrasto em vez do <img>, para o browser não expor "Guardar imagem como..."/"Copiar imagem" no ficheiro real */
.contact-intro .mini-photo-shield{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; background:transparent; -webkit-user-drag:none; -webkit-touch-callout:none; }
.contact-intro span.name{ font-family:var(--display); font-style:italic; font-weight:600; color:var(--ink); font-size:1rem; }

/* cartão do formulário — filete superior a condizer com o resto dos cartões do catálogo */
.contact-card{
  max-width:560px; margin:0 auto; background:var(--card-bg); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:3px; padding:clamp(1.8rem,4vw,3rem);
}
.contact-form{ display:flex; flex-direction:column; gap:1.2rem; }
.field label{
  display:block; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem;
}
.field input, .field textarea{
  width:100%; padding:0.85rem 1rem; border:1px solid var(--line); border-radius:3px;
  font-family:var(--sans); font-size:0.98rem; color:var(--ink); background:var(--bg); resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.submit-btn{
  width:100%; padding:0.95rem 1.8rem; border-radius:3px; border:none;
  background:var(--ink); color:var(--bg); font-weight:600; font-size:0.95rem; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.submit-btn:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.form-success{
  max-width:560px; margin:0 auto; text-align:center; background:var(--card-bg); border:1px solid var(--accent);
  border-radius:3px; padding:clamp(1.8rem,4vw,3rem); color:var(--ink); font-weight:600;
}
/* mensagem de erro do formulário de contacto — mesmo estilo do form-success, cor de aviso; ver script inline em contactos.html */
.form-error{ max-width:560px; margin:1rem auto 0; text-align:center; color:#b3413a; font-weight:600; font-size:0.92rem; }

/* ícones de contacto direto */
.contact-alt{ display:flex; justify-content:center; gap:0.9rem; margin-bottom:2.4rem; }
.alt-icon{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.alt-icon:hover{ border-color:var(--accent); background:var(--accent); color:var(--bg); }
.alt-icon svg{ width:18px; height:18px; }