/* Site público: usa só tokens de tokens.css (docs/design.md, docs/movimento.md). */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cor-papel); color: var(--cor-lodo);
  font-family: var(--fonte); font-size: var(--texto-base); font-weight: var(--peso-normal);
  line-height: var(--entrelinha-corpo);
}
img, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: var(--peso-leve); line-height: var(--entrelinha-titulo); letter-spacing: var(--tracking-titulo); }
p { margin: 0 0 var(--esp-5); max-width: var(--medida); }
a { color: var(--cor-mare); text-underline-offset: var(--esp-1); }
a:hover { color: var(--cor-mare-funda); }

/* Foco: nunca quadrado azul em clique ou toque; o anel de teclado fica sempre. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor); outline-offset: var(--foco-recuo);
  box-shadow: 0 0 0 var(--foco-recuo) var(--foco-halo);
}
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--esp-4); top: -10rem; background: var(--cor-papel-claro); padding: var(--esp-3) var(--esp-4); z-index: 20; }
.pular:focus { top: var(--esp-4); }

/* Campo: seção pintada pela série (data-serie). Sombras e logo claras nos escuros. */
:root { --sombra-q: var(--sombra-quadro); --logo-filtro: none; }
.campo { position: relative; background: var(--campo-gradiente); color: var(--campo-texto); }
:where(.campo) a { color: var(--campo-realce); }
:where(.campo) a:hover { color: var(--campo-texto); }
.campo :focus-visible { outline-color: var(--campo-foco); box-shadow: 0 0 0 var(--foco-recuo) var(--campo); }
.campo[data-serie="floresta-resta"], .campo[data-serie="hibridos"] { --sombra-q: var(--sombra-quadro-escuro); --logo-filtro: var(--logo-filtro-claro); }
/* Borda de maré: o topo do campo é uma onda irregular, nunca uma linha reta. */
.campo--mare {
  margin-top: calc(-1 * var(--borda-mare-altura)); padding-top: var(--borda-mare-altura);
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C90 22 190 92 310 56S520 8 650 50 900 98 1010 46 1140 18 1200 40V100H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--onda) top / 100% var(--borda-mare-altura) no-repeat, linear-gradient(var(--campo), var(--campo)) bottom / 100% calc(100% - var(--borda-mare-altura) + 1px) no-repeat;
  mask: var(--onda) top / 100% var(--borda-mare-altura) no-repeat, linear-gradient(var(--campo), var(--campo)) bottom / 100% calc(100% - var(--borda-mare-altura) + 1px) no-repeat;
}

.miolo { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--margem-lateral); }
main { padding-block: var(--esp-7) var(--esp-9); min-height: 60vh; }
.titulo-pagina { font-size: var(--texto-2xl); margin-bottom: var(--esp-6); }
.vazio, .erro { color: var(--cor-lodo-suave); }

/* Logo: a assinatura da Sara no lugar do nome escrito */
.logo img { width: auto; height: var(--logo-altura-cabecalho); filter: var(--logo-filtro); }
.logo--rodape img { width: var(--logo-largura-hero); max-width: 100%; height: auto; filter: none; }

/* Cabeçalho */
.cabecalho { box-shadow: var(--sombra-cabecalho); }
.cabecalho .miolo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--esp-6); padding-block: var(--esp-3); }
.cabecalho--sem-logo .miolo { justify-content: flex-end; }
.marca { color: var(--cor-lodo); text-decoration: none; min-height: var(--alvo-min); display: inline-flex; align-items: center; }
.cabecalho .logo { view-transition-name: logo; }
/* Séries: o campo sobe sobre o fim do cabeçalho (onda); o cabeçalho ganha o mesmo espaço para a onda não cortar logo e menu. */
body[data-pagina="serie"] .cabecalho { padding-bottom: var(--borda-mare-altura); }
.menu { display: flex; gap: var(--esp-5); width: 100%; }
.menu a { min-height: var(--alvo-min); display: inline-flex; align-items: center; color: var(--cor-lodo); text-decoration: none; }
.menu a:hover { color: var(--cor-mare); }
.menu a[aria-current="page"] { font-weight: var(--peso-forte); text-decoration: underline; text-decoration-thickness: var(--filete); text-underline-offset: var(--esp-2); }
@media (min-width: 40rem) { .menu { width: auto; } }

/* Rodapé: campo nanquim, logo clara */
.rodape { padding-block: var(--esp-8) var(--esp-7); font-size: var(--texto-base); }
.rodape .miolo { display: grid; gap: var(--esp-2); }
.rodape p { margin-bottom: 0; }
/* Links do rodapé: tom do texto do campo, sem sublinhado fixo; um fio na cor de realce só ao passar/focar. */
.rodape a { display: inline-flex; align-items: center; min-height: var(--alvo-min); color: color-mix(in srgb, var(--campo-texto) 86%, var(--campo)); text-decoration: none; transition: color var(--dur-curta, .2s) ease; }
.rodape a:hover { color: var(--campo-texto); text-decoration: none; }
.rodape p a { gap: var(--esp-3); }
.rodape .marca { margin-bottom: var(--esp-3); }
.rodape__menu { display: flex; flex-wrap: wrap; column-gap: var(--esp-6); margin-top: var(--esp-4); padding-top: var(--esp-3); position: relative; }
.rodape__menu::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: color-mix(in srgb, var(--campo-texto) 22%, transparent); }
.rodape__menu a { font-size: var(--texto-sm); font-weight: var(--peso-forte); letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 48rem) {
  .rodape .miolo { grid-template-columns: 1fr auto; column-gap: var(--esp-8); align-items: center; }
  .rodape .marca { grid-row: 1 / span 3; margin-bottom: 0; }
  .rodape p { grid-column: 2; justify-self: start; }
  .rodape__menu { grid-column: 1 / -1; justify-content: center; }
}

/* Botão (pílula) com camada de hover que esmaece por opacidade */
.botao {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-3);
  min-height: var(--alvo-botao); padding-inline: var(--esp-6); width: 100%;
  background: var(--cor-mare); color: var(--cor-papel); font: inherit; font-weight: var(--peso-forte); text-decoration: none;
  border: 0; border-radius: var(--raio-botao); cursor: pointer;
}
.botao::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cor-mare-funda); opacity: 0; transition: opacity var(--mov-rapido) var(--curva-saida); }
.botao:hover { color: var(--cor-papel); }
.botao:hover::before { opacity: 1; }
.botao svg { flex: none; width: var(--esp-5); height: var(--esp-5); }
.botao--sec { background: transparent; color: var(--cor-mare); border: var(--selo-borda) solid var(--cor-mare); }
.botao--sec::before { background: var(--cor-papel-claro); }
.botao--sec:hover { color: var(--cor-mare-funda); }
/* Chamada dentro de campo: contorno e camada na cor viva da série */
.botao--campo { padding-block: var(--esp-3); background: transparent; color: var(--campo-realce); border: var(--selo-borda) solid var(--campo-realce); text-align: center; }
.botao--campo::before { background: var(--campo-realce); }
.botao--campo:hover { color: var(--campo); }
@media (min-width: 40rem) { .botao { width: auto; } }
.nota { font-size: var(--texto-sm); color: var(--cor-lodo-suave); margin-top: var(--esp-3); }

/* Selo: etiqueta com fundo próprio, forma e palavra (igual em todas as séries) */
.selo { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--selo-padding); border-radius: var(--selo-raio); font-size: var(--texto-sm); background: var(--selo-fundo); color: var(--selo-tinta); }
.selo__forma { width: var(--selo-forma); height: var(--selo-forma); flex: none; }
.selo--disponivel { --selo-fundo: var(--selo-disponivel-fundo); --selo-tinta: var(--selo-disponivel-tinta); }
.selo--vendida { --selo-fundo: var(--selo-vendida-fundo); --selo-tinta: var(--selo-vendida-tinta); }
.selo--acervo { --selo-fundo: var(--selo-acervo-fundo); --selo-tinta: var(--selo-acervo-tinta); }
.selo--disponivel .selo__forma { background: currentColor; border-radius: 50%; }
.selo--vendida .selo__forma { border: var(--selo-borda) solid currentColor; border-radius: 50%; }
.selo--acervo .selo__forma { border: var(--selo-borda) solid currentColor; }

/* Quadro: figure > passe-partout > janela > img inteira. A obra nunca é cortada. */
.obra-img { width: 100%; height: auto; aspect-ratio: var(--ar); background: var(--cor-papel-claro); border-radius: var(--raio-obra); }
.quadro { margin: 0; }
.quadro--obra, .quadro__passe, .quadro__janela { display: block; }
.quadro__passe { position: relative; isolation: isolate; background: var(--moldura-passe); padding: var(--moldura-passe-largura); box-shadow: var(--sombra-q); }
.quadro__passe::before, .quadro__passe::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity var(--mov-medio) var(--curva-saida); }
.quadro__passe::before { background: var(--veu); opacity: var(--ativo, 0); }
.quadro__passe::after { z-index: -1; box-shadow: var(--sombra-quadro-alta); opacity: var(--ativo, 0); }
.quadro__janela { position: relative; z-index: 1; overflow: hidden; box-shadow: var(--moldura-bisel); aspect-ratio: var(--ar); background: var(--moldura-passe); }
.quadro__janela img {
  width: 100%; height: 100%; object-fit: contain; border-radius: var(--raio-obra); aspect-ratio: auto; background: none;
  transform: scale(calc(1 + (var(--zoom-obra) - 1) * var(--ativo, 0)));
  transition: transform var(--mov-zoom) var(--curva-mare);
}
/* Caixa: filete escuro, passe largo. Só na página da obra e no ampliador. */
.quadro--caixa > .quadro__passe { padding: var(--moldura-passe-largura-obra); border: var(--moldura-caixa-largura) solid var(--moldura-caixa); }
.quadro--leve > .quadro__passe { box-shadow: var(--sombra-etiqueta); }

/* Grade justificada: mesma altura na linha, largura pela proporção real */
.galeria { display: flex; flex-wrap: wrap; gap: var(--galeria-vao); }
.galeria::after { content: ""; flex-grow: 1000; }
.item { flex: 1 1 100%; margin: 0; min-width: 0; --item-extra: 0px; }
.item--quadro { --item-extra: calc(2 * var(--moldura-passe-largura)); }
.item > a { display: block; color: inherit; text-decoration: none; --ativo: 0; }
.item > a:focus-visible { --ativo: 1; }
.item__legenda { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--esp-4); row-gap: var(--esp-1); margin-top: var(--esp-3); transform: translateY(calc(var(--desloc-etiqueta) * var(--ativo, 0))); transition: transform var(--mov-medio) var(--curva-saida); }
.item__titulo { font-size: var(--texto-base); font-weight: var(--peso-normal); }
.item > a:hover .item__titulo { text-decoration: underline; }
.item__ano { font-size: var(--texto-sm); }
@media (hover: hover) and (pointer: fine) { .item > a:hover { --ativo: 1; } }
@media (min-width: 40rem) {
  .item { flex: var(--ar) 1 calc(var(--ar) * var(--galeria-altura-linha) + var(--item-extra)); }
}

/* Etiqueta de museu */
.etiqueta { background: var(--etiqueta-fundo); color: var(--cor-lodo); border-top: var(--etiqueta-fio) solid var(--realce); border-radius: var(--etiqueta-raio); box-shadow: var(--sombra-etiqueta); padding: var(--esp-5); max-width: var(--etiqueta-largura); }
.etiqueta h1, .etiqueta h2 { font-size: var(--texto-xl); font-weight: var(--peso-forte); margin-bottom: var(--esp-4); }
.etiqueta dl { margin: 0 0 var(--esp-4); }
.etiqueta dt { font-size: var(--texto-sm); color: var(--cor-lodo-suave); }
.etiqueta dd { margin: 0 0 var(--esp-3); }
.etiqueta__serie { margin-bottom: var(--esp-4); }
.etiqueta__serie a, .faixa__fecho a { color: var(--tinta); display: inline-flex; align-items: center; min-height: var(--alvo-min); }
.etiqueta .selo { margin-bottom: var(--esp-5); }
.etiqueta p.nota { margin-bottom: 0; }

/* Outras obras desta série */
.faixa { margin-top: var(--esp-9); }
.faixa__titulo { font-size: var(--texto-xl); margin-bottom: var(--esp-5); }
.faixa .galeria { --galeria-altura-linha: var(--galeria-altura-faixa); }
.faixa__fecho { margin-top: var(--esp-6); }
@media (max-width: 39.99rem) { .faixa .item:nth-child(n+4) { display: none; } }

/* Início: hero em campo, quatro séries em campos de maré, contato */
body[data-pagina="inicio"] main { padding-block: 0; }
/* Início: a pintura é o banner de fundo; a frase e a minibiografia (balão de cantos redondos) ficam sobre ela. */
.banner { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(40rem, 100svh, 62rem); display: flex; align-items: flex-end; padding-block: var(--esp-8) calc(var(--borda-mare-altura) + var(--esp-7)); background: #56676a; color: var(--cor-papel-claro); }
.banner__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.banner__fundo picture { display: block; position: absolute; inset: -8% 0; }
.banner__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* véu: escurece a pintura só o bastante para o texto claro passar de 4,5:1 */
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 24 20 / 0.74) 0%, rgb(18 24 20 / 0.6) 50%, rgb(18 24 20 / 0.3) 100%); }
@media (min-width: 56rem) { .banner::before { background: linear-gradient(90deg, rgb(18 24 20 / 0.74) 0%, rgb(18 24 20 / 0.5) 45%, rgb(18 24 20 / 0.08) 85%); } }
.banner__conteudo { display: grid; gap: var(--esp-6); align-content: space-between; width: 100%; min-height: inherit; }
.banner__conteudo > * { min-width: 0; }
.assinatura { margin: 0; }
.assinatura__veu { display: block; width: var(--logo-largura-hero); max-width: 100%; }
.assinatura .logo img { width: 100%; height: auto; filter: var(--logo-filtro-claro); }
.assinatura .logo { view-transition-name: logo; }
.abertura { margin: 0; font-size: var(--texto-xl); font-weight: var(--peso-leve); line-height: var(--entrelinha-titulo); max-width: 22ch; color: #fff; text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
.banner__legenda { position: absolute; right: var(--margem-lateral); top: var(--esp-4); margin: 0; z-index: 1; }
.banner__legenda a { display: inline-flex; align-items: center; min-height: var(--alvo-min); padding-inline: var(--esp-4); border-radius: 999px; background: rgb(18 24 20 / 0.55); color: #fff; font-size: var(--texto-sm); text-decoration: none; }
.banner__legenda a:hover { background: rgb(18 24 20 / 0.8); }
/* balão: quadrado de cantos redondos, em papel, sobre a pintura */
.balao { background: rgb(247 246 242 / 0.95); color: var(--cor-lodo); border-radius: 1.75rem; padding: var(--esp-6); box-shadow: 0 18px 48px -12px rgb(0 0 0 / 0.5); max-width: 44rem; }
.mini-bio { font-size: var(--texto-base); display: grid; gap: var(--esp-5); align-items: center; }
.mini-bio__foto { margin: 0; width: min(11rem, 60%); }
.mini-bio__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 1.25rem; }
@media (min-width: 40rem) { .mini-bio { grid-template-columns: 11rem 1fr; column-gap: var(--esp-6); } .mini-bio__foto { width: 100%; } }
.mini-bio p { max-width: var(--medida-curta); }
.mini-bio p:last-child { margin-bottom: 0; }
.balao a.botao { color: var(--cor-mare); }
@media (min-width: 56rem) {
  .banner__conteudo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--esp-8); }
  .assinatura { grid-column: 1 / -1; grid-row: 1; }
  .abertura { grid-column: 1; grid-row: 2; align-self: center; }
  .balao { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }
}

.serie-entrada { padding-block: calc(var(--borda-mare-altura) + var(--esp-7)) var(--esp-9); }
.serie-entrada .miolo { display: grid; gap: var(--esp-6); align-items: center; }
.serie-entrada > .miolo > * { min-width: 0; }
.serie-entrada__obra { margin: 0; }
.serie-entrada__obra a { display: block; color: inherit; text-decoration: none; --ativo: 0; }
.serie-entrada__obra a:focus-visible { --ativo: 1; }
@media (hover: hover) and (pointer: fine) { .serie-entrada__obra a:hover { --ativo: 1; } }
.serie-entrada__obra .quadro { width: min(100%, calc(80vh * var(--ar))); margin-inline: auto; }
.serie-entrada__legenda { margin-top: var(--esp-3); font-size: var(--texto-sm); text-align: center; transform: translateY(calc(var(--desloc-etiqueta) * var(--ativo, 0))); transition: transform var(--mov-medio) var(--curva-saida); }
.serie-entrada h2 { font-size: var(--texto-2xl); margin-bottom: var(--esp-5); }
.serie-entrada p { margin: 0; }
.serie-entrada[data-serie="floresta-resta"] h2 { font-weight: var(--peso-preto); letter-spacing: var(--tracking-preto); line-height: var(--entrelinha-display); }
.serie-entrada[data-serie="mangue"] h2 { font-style: italic; }
.serie-entrada[data-serie="hibridos"] h2 { font-weight: var(--peso-forte); }
@media (min-width: 56rem) {
  .serie-entrada .miolo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-8); }
  .serie-entrada:nth-child(even) .miolo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .serie-entrada:nth-child(even) .serie-entrada__obra { order: 2; }
}

.contato-inicio { padding-block: calc(var(--borda-mare-altura) + var(--esp-7)) var(--esp-9); }
.contato-inicio h2 { font-size: var(--texto-xl); margin-bottom: var(--esp-6); }
.contato-inicio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); }
.contato-inicio__lista a { text-decoration: none; display: block; min-height: var(--alvo-botao); padding-block: var(--esp-4); border-top: var(--filete) solid var(--cor-linha-forte); font-size: var(--texto-xl); font-weight: var(--peso-leve); text-decoration: none; }
.contato-inicio__lista a:hover { color: var(--cor-mare-funda); }
.contato-inicio__lista small { display: block; margin-top: var(--esp-1); font-size: var(--texto-base); font-weight: var(--peso-normal); color: var(--campo-texto); overflow-wrap: anywhere; }
@media (min-width: 64rem) { .contato-inicio__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-7); } }

/* Catálogo: filtro em pílulas, cada série em seu campo, obras em moldura com etiqueta */
body[data-pagina="obras"] main { padding-bottom: 0; }
.catalogo:empty { min-height: 100vh; }
.filtro { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-8); }
.filtro:empty { min-height: calc(2 * var(--alvo-min) + var(--esp-3)); }
.filtro a {
  position: relative; isolation: isolate; overflow: hidden; min-height: var(--alvo-min); display: inline-flex; align-items: center; gap: var(--esp-3);
  padding-inline: var(--esp-4); border: var(--selo-borda) solid var(--cor-linha-forte); border-radius: var(--raio-botao);
  color: var(--cor-lodo); text-decoration: none;
}
.filtro a[data-slug="todas"] { --campo: var(--cor-lodo); --campo-texto: var(--cor-papel); }
.filtro a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--campo); opacity: 0; transition: opacity var(--mov-rapido) var(--curva-saida); }
@media (hover: hover) and (pointer: fine) { .filtro a:hover::before { opacity: 0.14; } }
.filtro a[aria-current="page"] { color: var(--campo-texto); border-color: var(--cor-lodo); }
.filtro a[aria-current="page"]::before { opacity: 1; }
.filtro__ponto { flex: none; width: var(--esp-3); height: var(--esp-3); border-radius: 50%; background: var(--realce); }
.filtro a[data-slug="todas"] .filtro__ponto { background: conic-gradient(var(--floresta-clorofila) 0 25%, var(--mangue-turquesa) 0 50%, var(--troncos-ferrugem) 0 75%, var(--hibridos-vermelho) 0); }

.grupo { padding-block: calc(var(--borda-mare-altura) + var(--esp-7)) var(--esp-9); }
.grupo__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--esp-6); margin-bottom: var(--esp-7); }
.grupo__titulo { font-size: var(--texto-2xl); }
.grupo[data-serie="floresta-resta"] .grupo__titulo { font-weight: var(--peso-preto); letter-spacing: var(--tracking-preto); line-height: var(--entrelinha-display); }
.grupo[data-serie="mangue"] .grupo__titulo { font-style: italic; }
.grupo[data-serie="hibridos"] .grupo__titulo { font-weight: var(--peso-forte); }
.grupo__link { min-height: var(--alvo-min); display: inline-flex; align-items: center; }
.galeria--catalogo { list-style: none; margin: 0; padding: 0; row-gap: var(--esp-8); --galeria-altura-linha: clamp(18rem, 28vw, 28rem); }
.item--catalogo { --ativo: 0; display: flex; flex-direction: column; }
.item--catalogo > .item__quadro { --ativo: inherit; display: block; }
.item--catalogo:has(:focus-visible) { --ativo: 1; }
@media (hover: hover) and (pointer: fine) { .item--catalogo:hover { --ativo: 1; } }
/* Etiqueta pendurada sobre a borda do passe-partout: cobre só a moldura, nunca a pintura */
.etiqueta--compacta { position: relative; z-index: 2; width: calc(100% - 2 * var(--esp-4)); margin: calc(-1 * var(--moldura-passe-largura)) 0 0 var(--esp-4); padding: var(--esp-4); transform: translateY(calc(var(--desloc-etiqueta) * var(--ativo, 0))); transition: transform var(--mov-medio) var(--curva-saida); }
.etiqueta--compacta h3 { font-size: var(--texto-lg); font-weight: var(--peso-forte); line-height: var(--entrelinha-titulo); margin-bottom: var(--esp-3); }
.etiqueta--compacta h3 a, .etiqueta--compacta h3 a:hover { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--alvo-min); min-width: var(--alvo-min); }
.etiqueta--compacta h3 a:hover { text-decoration: underline; }
.etiqueta--compacta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-3); margin-bottom: var(--esp-3); font-size: var(--texto-sm); }
.etiqueta--compacta dd { margin-bottom: var(--esp-1); }
.etiqueta--compacta .selo { margin-bottom: var(--esp-4); }
.etiqueta--compacta .etiqueta__acao { margin-top: auto; }
.etiqueta--compacta .botao { width: 100%; padding-inline: var(--esp-3); text-align: center; }
.campo .etiqueta :focus-visible { outline-color: var(--foco-cor); box-shadow: 0 0 0 var(--foco-recuo) var(--etiqueta-fundo); }

/* Série */
body[data-pagina="serie"] #serie:empty { min-height: 100vh; }
/* Séries ocupam a página inteira (o campo sobe sobre o cabeçalho): sem respiro do main desde o primeiro quadro, para nada pular quando o CSS da série chega. */
body[data-pagina="serie"] main { padding-block: 0; display: flow-root; }
body[data-pagina="serie"] .miolo > #serie > .erro { margin-top: var(--esp-7); }
body[data-pagina="serie"] .miolo > #serie > a { margin-bottom: var(--esp-9); }
.serie-texto { margin-bottom: var(--esp-8); }
.serie-texto blockquote { margin: var(--esp-5) 0 0; padding-left: var(--esp-5); border-left: var(--filete) solid var(--cor-linha-forte); max-width: var(--medida); font-style: italic; font-weight: var(--peso-leve); }
.serie-texto blockquote footer, .serie-texto blockquote cite { margin-top: var(--esp-2); font-style: normal; font-size: var(--texto-sm); color: var(--cor-lodo-suave); }

/* Obra individual: fundo na parede da série */
body[data-pagina="obra"] main { position: relative; isolation: isolate; background: var(--parede); }
body[data-pagina="obra"] main::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--obra-aura-altura); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--parede)), var(--veu); }
.obra { display: grid; gap: var(--esp-6); }
.obra__imagem { margin: 0; }
.obra__imagem button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; --ativo: 0; }
.obra__imagem button:focus-visible { --ativo: 1; }
@media (hover: hover) and (pointer: fine) { .obra__imagem button:hover { --ativo: 1; } }
.quadro--obra { width: min(100%, calc(80vh * var(--ar))); margin-inline: auto; }
.ficha { min-width: 0; }
@media (min-width: 56rem) {
  .obra { grid-template-columns: minmax(0, 2fr) minmax(var(--coluna-ficha), 1fr); gap: var(--esp-8); align-items: start; }
  .quadro--obra { margin-inline: 0; }
}
.obra__dica { margin-top: var(--esp-3); font-size: var(--texto-sm); color: var(--cor-lodo-suave); }
.navegacao { display: grid; gap: var(--esp-3) var(--esp-6); margin-top: var(--esp-8); padding-top: var(--esp-5); border-top: var(--filete) solid var(--cor-linha); }
.navegacao a { min-height: var(--alvo-botao); display: flex; flex-direction: column; justify-content: center; color: var(--tinta); }
.navegacao__dir { font-size: var(--texto-sm); color: var(--cor-lodo-suave); }
.navegacao__titulo { font-weight: var(--peso-forte); }
.navegacao a:last-child { min-height: var(--alvo-min); }
@media (min-width: 40rem) {
  .navegacao { grid-template-columns: 1fr 1fr; }
  .navegacao [rel="next"] { grid-column: 2; text-align: right; }
  .navegacao a:last-child { grid-column: 1 / -1; }
}
.barra-interesse {
  position: fixed; inset: auto 0 0 0; padding: var(--esp-3) var(--margem-lateral); background: var(--cor-papel-claro); box-shadow: var(--sombra-flutuante); z-index: 10;
  transform: translateY(100%); visibility: hidden; transition: transform var(--mov-medio) var(--curva-saida), visibility 0s linear var(--mov-medio);
}
.barra-interesse.visivel { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 56rem) { .barra-interesse { display: none; } }
/* A barra fixa não pode cobrir o item que recebe o foco (2.4.11). */
@media (max-width: 55.99rem) { html:has(body[data-pagina="obra"]) { scroll-padding-bottom: 7rem; } }

/* Ampliador (dialog): fundo papel, obra em moldura de caixa */
.ampliador { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: none; color: var(--cor-lodo); overflow: auto; }
.ampliador:focus { outline: none; }
.ampliador::backdrop { background: var(--cor-papel); opacity: 0; transition: opacity var(--mov-ampliador-fechar) var(--curva-entrada); }
.ampliador.aberto::backdrop { opacity: 1; transition: opacity var(--mov-ampliador-abrir) var(--curva-saida); }
.ampliador__fechar { position: fixed; top: var(--esp-4); right: var(--esp-4); z-index: 2; width: auto; }
.ampliador__quadro { min-height: 100%; display: grid; place-items: center; padding: var(--esp-9) var(--esp-4) var(--esp-6); margin: 0; }
.ampliador .quadro { width: min(100%, calc((100vh - var(--esp-10)) * var(--ar))); width: min(100%, calc((100dvh - var(--esp-10)) * var(--ar))); opacity: 0; transform: scale(var(--zoom-ampliador)); transition: opacity var(--mov-ampliador-fechar) var(--curva-entrada), transform var(--mov-ampliador-fechar) var(--curva-entrada); }
.ampliador.aberto .quadro { opacity: 1; transform: none; transition: opacity var(--mov-ampliador-abrir) var(--curva-saida), transform var(--mov-ampliador-abrir) var(--curva-saida); }

/* Contato (o Sobre tem sobre.css) */
.contatos { display: grid; gap: var(--esp-5); max-width: var(--medida); }
.contatos a { display: block; padding: var(--esp-4) 0; border-top: var(--filete) solid var(--cor-linha); text-decoration: none; min-height: var(--alvo-botao); font-size: var(--texto-xl); font-weight: var(--peso-leve); color: var(--cor-mare); }
.contatos a:hover { color: var(--cor-mare-funda); }
.contatos small { display: block; font-size: var(--texto-base); color: var(--cor-lodo-suave); font-weight: var(--peso-normal); }

/* Reserva de espaço antes do JS preencher (evita CLS) */
#obra:empty { min-height: 100vh; }
.series:empty { min-height: 100vh; }

/* ---------------------------------------------------------------------
   Movimento (docs/movimento.md): só transform e opacity. O estado escondido
   só existe com JS ligado e sem redução de movimento; se o JS falhar
   (sem a classe mov-ok), uma animação mostra tudo depois de 2,5 s.
   --------------------------------------------------------------------- */
@keyframes mostrar { to { opacity: 1; transform: none; } }
@keyframes entra { from { opacity: 0; transform: translateY(var(--desloc-revelar)); } }
@keyframes sobe { from { transform: translateY(var(--desloc-revelar)); } }
@keyframes vt-recua { to { opacity: 0.55; transform: scale(0.985); } }
@keyframes vt-revela { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes escreve { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-revela] { opacity: 0; transform: translateY(var(--desloc-revelar)); }
  :root:not(.mov-ok) [data-revela] { animation: mostrar 1ms linear 2.5s forwards; }
  [data-revela].revelado {
    opacity: 1; transform: none;
    transition: opacity var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar)), transform var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar));
  }
  /* Entrada do Início: a assinatura se escreve, depois a frase e a obra (só transform na obra: o LCP não espera). */
  .assinatura:not(.assinatura--quieta) .logo img { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; animation: escreve calc(var(--mov-assinatura) * 1.4) var(--curva-mare) both; }
  .assinatura:not(.assinatura--quieta) ~ .abertura { animation: entra var(--mov-lento) var(--curva-saida) var(--mov-atraso-frase) both; }
  .item--entra { animation: sobe var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar)) backwards; }
  .hero .quadro { animation: sobe var(--mov-lento) var(--curva-saida) var(--mov-atraso-obra) backwards; }
  @view-transition { navigation: auto; }
  /* Troca de página: a antiga recua levemente e a nova sobe como uma cortina de baixo para cima; menu e assinatura ficam firmes. */
  ::view-transition-old(root) { animation: vt-recua calc(var(--mov-pagina) * 2.5) var(--curva-saida) both; }
  ::view-transition-new(root) { animation: vt-revela calc(var(--mov-pagina) * 2.5) var(--curva-saida) both; }
  .cabecalho { view-transition-name: cabecalho; }
  ::view-transition-group(cabecalho) { animation-duration: 0s; }
  ::view-transition-group(*) { animation-duration: var(--mov-filtro); animation-timing-function: var(--curva-mare); }
}

/* Ícones oficiais (Simple Icons, CC0): máscara com a cor da marca; o texto ao lado continua sendo o rótulo. */
.ico { flex: none; display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -0.3em; margin-right: var(--esp-3); background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico--whatsapp { --ico: url("../icones/whatsapp.svg"); background: #25D366; }
.ico--instagram { --ico: url("../icones/instagram.svg"); background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%); }
.ico--email { --ico: url("../icones/email.svg"); }
.rodape .ico { margin-right: 0; }
.contato-inicio__lista a, .contatos a { display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--esp-3); align-items: start; }
.contato-inicio__lista .ico, .contatos .ico { grid-row: 1; grid-column: 1; width: 2rem; height: 2rem; margin: calc((1lh - 2rem) / 2) 0 0; vertical-align: baseline; }
.contato-inicio__lista small, .contatos small { grid-column: 2; }

/* Hitbox do quadro: a etiqueta sobrepõe a base do passe-partout; essa faixa precisa clicar na obra (link por baixo).
   Só o título, o botão e outros links da etiqueta continuam clicáveis. */
.etiqueta--compacta { pointer-events: none; }
.etiqueta--compacta a, .etiqueta--compacta button { pointer-events: auto; }

/* Linhas e traços como pseudo-elementos (para poderem ser "desenhados") */
.contato-inicio__lista a, .contatos a { position: relative; border-top: 0; }
.contato-inicio__lista a::before, .contatos a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--filete); background: var(--cor-linha-forte); }
.contatos a::before { background: var(--cor-linha); }

/* Desenho: tudo é "traçado" ao entrar na tela, devagar e uma vez (movimento.js > desenhar). Só com JS e sem reduced-motion. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-desenha="antes"]::before, [data-desenha="depois"]::after { transform-origin: left center; transition: transform calc(var(--mov-assinatura) * 0.8) var(--curva-mare); }
  .mov-ok [data-desenha="antes"]:not(.desenhado)::before, .mov-ok [data-desenha="depois"]:not(.desenhado)::after { transform: scaleX(0); transition: none; }
  [data-desenha="tinta"] img { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; transition: -webkit-mask-position calc(var(--mov-assinatura) * 1.4) var(--curva-mare), mask-position calc(var(--mov-assinatura) * 1.4) var(--curva-mare); }
  .mov-ok [data-desenha="tinta"]:not(.desenhado) img { -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: none; }
  [data-desenha="arco"]::after { transition: clip-path calc(var(--mov-assinatura) * 1.2) var(--curva-mare); clip-path: inset(-2px -2px -2px -2px); }
  .mov-ok [data-desenha="arco"]:not(.desenhado)::after { clip-path: inset(-2px 100% -2px -2px); transition: none; }
  /* Traço dos SVGs: pathLength=1 (definido em movimento.js) em vez de vector-effect, que o Safari do iPhone interpreta diferente. */
  .deco[data-desenha] path { vector-effect: none; stroke-width: calc(var(--deco-traco) * var(--esc, 1)); stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--mov-assinatura) * 1.6) var(--curva-mare); transition-delay: calc(var(--p, 0) * 140ms); }
  .mov-ok .deco[data-desenha]:not(.desenhado) path { stroke-dashoffset: 1; transition: none; }
}

/* Cortina de papel (fallback de troca de página, ver cortina.js) */
@keyframes cortina-desce { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes cortina-sobe { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
html.cortina-sai::after, html.cortina-entra::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: linear-gradient(135deg, var(--cor-papel) 0%, var(--cor-papel-claro) 100%); border-top: var(--esp-2) solid var(--realce-2, #D4E157); }
html.cortina-sai::after { animation: cortina-desce 420ms var(--curva-saida) both; }
html.cortina-entra::after { animation: cortina-sobe 650ms var(--curva-saida) both; }
@media (prefers-reduced-motion: reduce) { html.cortina-sai::after, html.cortina-entra::after { display: none; } }

/* Contato: três cartões de papel, cada um com um traço de cor no topo que se desenha; sobem em sequência. */
body[data-pagina="contato"] main { padding-block: var(--esp-8) var(--esp-9); }
body[data-pagina="contato"] .titulo-pagina { font-size: var(--texto-3xl, var(--texto-2xl)); font-weight: var(--peso-preto); letter-spacing: var(--tracking-preto); line-height: var(--entrelinha-display); color: var(--cor-mare-funda); margin-bottom: var(--esp-4); }
.contato-intro { font-size: var(--texto-lg); font-weight: var(--peso-leve); max-width: var(--medida-curta); margin-bottom: var(--esp-7); }
.contatos { max-width: none; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); }
@media (min-width: 56rem) { .contatos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); } }
.contatos a { overflow: hidden; padding: var(--esp-6) var(--esp-5); border-radius: 1.25rem; background: var(--cor-papel-claro); box-shadow: var(--sombra-quadro); align-content: start; transition: transform var(--mov-filtro) var(--curva-saida), box-shadow var(--mov-filtro) var(--curva-saida); }
.contatos a::before { height: var(--esp-2); background: var(--cor-mare); }
.contatos a:has(.ico--whatsapp)::before { background: #25D366; }
.contatos a:has(.ico--instagram)::before { background: linear-gradient(90deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); }
@media (hover: hover) and (pointer: fine) { .contatos a:hover { transform: translateY(calc(-1 * var(--esp-2))); box-shadow: 0 18px 36px -14px rgb(31 38 32 / 0.35); } .contatos a:hover .ico { transform: scale(1.12); } }
.contatos .ico { transition: transform var(--mov-filtro) var(--curva-saida); }

/* Filtro do catálogo: a área esmaece e sobe 8px na troca (só opacity/transform); grupos fora da tela não são pintados. */
.catalogo { transition: opacity 150ms ease, transform 150ms ease; }
.catalogo.trocando { opacity: 0; transform: translateY(8px); }
.catalogo .grupo:nth-child(n+2) { content-visibility: auto; contain-intrinsic-size: auto 70rem; }
@media (prefers-reduced-motion: reduce) { .catalogo { transition: none; } }

/* Início: no celular o link "ver obra" some; no computador a foto da Sara ganha mais espaço no balão. */
@media (max-width: 55.99rem) { .banner__legenda { display: none; } }
@media (min-width: 64rem) {
  .banner__conteudo { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .balao { max-width: 60rem; }
  .mini-bio { grid-template-columns: 17rem 1fr; column-gap: var(--esp-7); }
  .mini-bio__foto { width: 100%; }
  .mini-bio { font-size: var(--texto-lg); }
}