/* ==========================================================================
   Siteflux — camada "personalidade" (vitrine de #projetos, galeria e letras do menu)
   1. Pastas editoriais em #projetos (skill colagem-pastas-interativas)
   2. Letras em rolagem nos links da cortina do menu
      (skill links-rolagem-por-caractere)
   3. Galeria do projeto · 4. Anel de telas · 5. Carrossel de capas
   Só CSS/DOM: funciona igual em file:// e HTTP. Sem JS as pastas ficam
   completas (details/summary nativo com a prévia ampliada) e os links são texto comum.
   ========================================================================== */

/* ---------- 1. Pastas ---------- */
/* a vitrine chega mais cedo: só o intervalo entre apoio e primeira fila desta seção é menor (o global das seções não muda) */
#projetos { padding-top: calc(var(--pad-y) * .72); } /* ~28 % menos ar acima do título, só nesta caixa */
#projetos .sec-head { margin-bottom: clamp(26px, 3vw, 44px); }
.pastas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  gap: clamp(44px, 4.6vw, 76px) clamp(36px, 6.5vw, 120px);
}
@media (max-width: 699px) { .pastas { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 520px; margin-inline: auto; } }

/* cores: cada <li> traz no style a paleta do próprio site (--p-pasta, --p-folha, --p-bg, --p-acc… e --aba para rótulo/ícone);
   os valores abaixo são só o padrão da marca para um item sem paleta */
.pasta { position: relative; --dir: 1; --aba: var(--sf-lime); --p-pasta: var(--sf-lime); --p-folha: var(--sf-beige); --p-bg: #063326; --p-soft: #0f5643; }
/* orientação alternada, determinística: pares abrem para o outro lado */
.pasta:nth-child(even) { --dir: -1; }

/* A pilha é dimensionada pela capa (barra + tela 1200:750 em fluxo), não por uma proporção fixa: acima dela sobra só o que a
   aba da pasta e as duas folhas precisam (~9 % da largura, eram 25 % da altura). O desenho ocupa 90 % da largura — os 5 % de
   cada lado são a área do leque; a margem negativa alinha a borda da pasta com o texto. Paddings em % da largura do <li>. */
.pasta-pilha { position: relative; margin-inline: -5.556%; padding: 10% 10% 4.2%; }
.pasta-fundo, .pasta-folha { position: absolute; }
.pasta-fundo { inset: 0; width: 100%; height: 100%; max-width: none; fill: var(--p-pasta); transform: scaleX(var(--dir)); }
.pasta-folha, .pasta-capa {
  border-radius: 10px; overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform .36s var(--ease);
}
.pasta-folha { box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.pasta-capa { box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 18px rgba(0, 0, 0, .16); }
.pasta-folha--cor {
  inset: 5.5% 12% 10% 12%; background: var(--p-folha);
  transform: translateX(calc(var(--dir) * -2.5%)) rotate(calc(var(--dir) * -3deg));
}
.pasta-folha--detalhe {
  inset: 8% 12% 9% 12%; background: #fff;
  transform: translateX(calc(var(--dir) * 2.5%)) rotate(calc(var(--dir) * 2.4deg));
}
/* a folha de trás mostra um recorte ampliado do detalhe visual da tela (--fz = zoom, --fx/--fy = deslocamento, no <li>: a
   ilustração, as fotos ou o retrato reais ficam na faixa que aparece acima da capa e no leque),
   não a página inteira: no leque aparecem fatias de imagem, não linhas de texto cortadas */
.pasta-folha img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; transform-origin: 0 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fz, 1)); }
/* capa = janela de navegador na cor do site, nivelada; a tela de abertura aparece inteira (a janela tem a proporção da captura) */
.pasta-capa { position: relative; display: flex; flex-direction: column; cursor: pointer; }
.pasta-barra { flex: none; display: flex; align-items: center; gap: 5px; height: clamp(13px, 1.4vw, 18px); padding-inline: clamp(8px, .9vw, 12px); background: var(--p-soft); }
.pasta-barra i { width: clamp(5px, .5vw, 7px); height: clamp(5px, .5vw, 7px); border-radius: 50%; background: var(--p-acc, #fff); opacity: .55; }
.pasta-barra i:first-child { opacity: 1; }
.pasta-janela { position: relative; display: block; width: 100%; aspect-ratio: 1200 / 750; overflow: hidden; container-type: size; }
.pasta-tira { display: block; transition: transform .55s var(--ease); }
.pasta-tira img { display: block; width: 100%; height: 100cqh; max-width: none; object-fit: cover; object-position: 50% 0; }
/* imagem ausente ou com erro: a superfície fica na cor do próprio site (alt vazio na pilha decorativa; nome e tipo seguem em HTML) */
.pasta-capa, .pasta-folha--detalhe { background: var(--p-bg); }

/* leque: folhas para os lados, capa sobe 6 px. Ponteiro preciso no hover; foco por teclado e <details> aberto valem em qualquer aparelho.
   Regras separadas: um :has() numa lista derruba a lista inteira nos navegadores sem ele (Firefox < 121). */
.pasta:focus-within .pasta-folha--cor { transform: translate(calc(var(--dir) * -2.5% + var(--dir) * -14px), -2px) rotate(calc(var(--dir) * -5.5deg)); }
.pasta:has(details[open]) .pasta-folha--cor { transform: translate(calc(var(--dir) * -2.5% + var(--dir) * -14px), -2px) rotate(calc(var(--dir) * -5.5deg)); }
.pasta:focus-within .pasta-folha--detalhe { transform: translate(calc(var(--dir) * 2.5% + var(--dir) * 16px), -5px) rotate(calc(var(--dir) * 4.8deg)); }
.pasta:has(details[open]) .pasta-folha--detalhe { transform: translate(calc(var(--dir) * 2.5% + var(--dir) * 16px), -5px) rotate(calc(var(--dir) * 4.8deg)); }
.pasta:focus-within .pasta-capa { transform: translateY(-6px); }
.pasta:has(details[open]) .pasta-capa { transform: translateY(-6px); }
@media (hover: hover) and (pointer: fine) {
  .pasta:hover .pasta-folha--cor { transform: translate(calc(var(--dir) * -2.5% + var(--dir) * -14px), -2px) rotate(calc(var(--dir) * -5.5deg)); }
  .pasta:hover .pasta-folha--detalhe { transform: translate(calc(var(--dir) * 2.5% + var(--dir) * 16px), -5px) rotate(calc(var(--dir) * 4.8deg)); }
  .pasta:hover .pasta-capa { transform: translateY(-6px); }
}

/* hover intencional (ponteiro fino, depois de 0,45 s): a capa desliza exatamente uma tela, da abertura até UM detalhe escolhido —
   nunca para no meio de uma emenda — e volta ao sair. Foco por teclado e toque não disparam a viagem; nada se move sozinho. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pasta:hover .pasta-tira { transform: translateY(-100cqh); transition: transform 1.1s cubic-bezier(.45, 0, .2, 1) .45s; }
}
/* a 2ª tela da tira só serve a esse deslize: onde ele não existe (toque, movimento reduzido) ela sai do layout e, lazy,
   nem é baixada; no carrossel, só a capa do centro pode deslizar */
@media not all and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .pasta-tira img + img { display: none; } }
.pastas.is-slider .pasta:not(.is-atual) .pasta-tira img + img { display: none; }

/* identificação: HTML imóvel, fora de qualquer transform ou máscara */
.pasta-info { padding-top: clamp(16px, 1.5vw, 20px); }
.pasta-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.pasta-titulo h3 { font-size: clamp(21px, 1.9vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (max-width: 999px) { .pasta-titulo { flex-direction: column; align-items: flex-start; gap: 6px; } }
.pasta-rotulo { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aba); }
.pasta-resumo { margin-top: 10px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .82); }

.pasta-detalhes { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.pasta-detalhes summary {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; color: #fff;
  transition: color .25s ease;
}
.pasta-detalhes summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .pasta-detalhes summary:hover { color: var(--aba); } }
.pasta-telas { margin-left: auto; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }
.pasta-detalhes summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--aba); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pasta-detalhes summary:hover svg { transform: translateX(3px); } }
.pasta-detalhes[open] summary svg { transform: rotate(90deg); }
.pasta-detalhes-corpo { padding: 6px 0 8px; }
/* conteúdo do <details> (é a galeria sem JS e a fonte de dados da galeria com JS): descrição curta + telas do projeto, na ordem da galeria */
.pasta-descricao { max-width: 48ch; margin-bottom: 18px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.pasta-previa { margin: 0 0 14px; }
.pasta-previa img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--p-bg); color: var(--p-fg, #fff); font-size: 14px; line-height: 1.45; }
.pasta-previa figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

@media (prefers-reduced-motion: reduce) {
  /* pilhas estáticas: o estado se comunica por foco/contraste, sem leque */
  .pasta .pasta-folha--cor { transform: translateX(calc(var(--dir) * -2.5%)) rotate(calc(var(--dir) * -3deg)) !important; }
  .pasta .pasta-folha--detalhe { transform: translateX(calc(var(--dir) * 2.5%)) rotate(calc(var(--dir) * 2.4deg)) !important; }
  .pasta .pasta-capa { transform: none !important; }
  .pasta .pasta-tira { transform: none !important; }
}
@media (forced-colors: active) { .pasta-fundo { fill: CanvasText; } .pasta-folha, .pasta-capa { border: 1px solid CanvasText; } }

/* ---------- 2. Letras em rolagem (links grandes do menu em tela cheia; o JS monta .roll) ---------- */
.roll { display: inline-block; line-height: 1.5; }
.roll-w { display: inline-block; white-space: nowrap; }
.roll-c { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: top; }
.roll-t { display: block; }
.roll-t > span { display: block; height: 1.5em; }
/* fora do desktop (painel do menu) e com movimento reduzido só existe a primeira cópia: texto comum */
.roll-t > span + span { display: none; }
/* a cor dos links no hover e no foco e a ausência de marca de seção atual ficam em siteflux.css (html.js .nav …) */
@media (prefers-reduced-motion: no-preference) {
  .roll-t > span + span { display: block; color: var(--hd-acc, var(--sf-lime)); }
  .roll-t { transition: transform .3s var(--ease) var(--d, 0ms); }
  .nav a.has-roll:focus-visible .roll-t { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .nav a.has-roll:hover .roll-t { transform: translateY(-50%); }
}

/* ---------- 3. Galeria do projeto (skill hero-imersiva-miniaturas; <dialog> montado pelo JS) ----------
   Tela cheia nas cores do próprio site (--g-* copiadas do <li>). Primeiro o trabalho: a tela ocupa a maior parte e forma um
   conjunto só com a legenda, o anel e as setas; o texto é curto. Um índice só governa tela, anel, posição e legenda,
   e eles só mudam quando a imagem nova realmente aparece. */
html.tem-dialog { scrollbar-gutter: stable; } /* abrir/fechar não redimensiona toda a landing */
html.galeria-aberta { overflow: hidden; }
/* 2.36: largura pelo próprio inset (100vw contava a calha reservada da barra de rolagem e deslocava a galeria ~8 px no
   Windows) e só contain: style (contain: layout prendia o fundo fixo ao diálogo, e ao rolar a galeria a landing aparecia
   por baixo, no celular deitado) */
.galeria {
  --g-bg: #063326; --g-soft: #0f5643; --g-fg: #fff; --g-mut: rgba(255, 255, 255, .78); --g-acc: var(--sf-lime); --g-line: rgba(255, 255, 255, .22);
  position: fixed; inset: 0; width: auto; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: transparent; color: var(--g-fg); --focus: var(--g-acc);
  font-family: inherit; contain: style;
}
.galeria::backdrop { background: transparent; }
.galeria-fundo { position: fixed; z-index: 0; inset: 0; background: var(--g-bg); pointer-events: none; }
/* Só opacidade, que não é herdada. Visibilidade e hit-test permanecem estáveis
   entre reaberturas; Escape, Tab e clique podem encerrar o preparo normalmente. */
.galeria.is-preparing .galeria-in { opacity: 0; }
.galeria.is-preparing .galeria-fundo { opacity: 0; }
/* 2.34: só a moldura real se transporta; o diálogo não muda de escala. */
.galeria-moldura { transform-origin: 0 0; }
.galeria.is-morphing .galeria-moldura { position: relative; z-index: 3; will-change: transform; }
.galeria.is-morphing .galeria-fundo { will-change: opacity; }
/* 2.29 (pedido do Walter): UMA coluna centrada — topo · nome · tela principal (+ legenda) · anel giratório com uma seta de
   cada lado · descrição. Sem a fila de miniaturas nem o contador. A tela principal tem a proporção das capturas e a largura
   vem da altura da janela, para o conjunto caber sem rolar quando há altura; em janela baixa o diálogo rola normalmente. */
.galeria-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "titulo" "palco" "nav" "pos" "desc";
  justify-items: center; align-content: start; gap: 0;
  box-sizing: border-box; min-height: 100%; padding: clamp(12px, 1.6vw, 22px) clamp(20px, 4vw, 64px) clamp(12px, 1.6vw, 22px); /* 2.30: respiros menores — a tela principal ganha a altura */
}
.galeria-topo { grid-area: topo; justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(8px, 1vw, 12px); }
/* 2.34: mesmo tratamento do selo das seções — sem bolinha e sem caixa alta; aqui não há número (é a categoria do
   projeto), então entra um fio curto na cor do texto */
.galeria-tipo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--g-mut); }
.galeria-tipo::before { content: ''; flex: none; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.galeria-fechar, .galeria-seta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; min-height: 48px; padding: 0 18px; flex: none;
  border-radius: 999px; border: 1.5px solid var(--g-line); background: transparent; color: var(--g-fg);
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
@media (hover: hover) { .galeria-seta:hover { border-color: var(--g-acc); background: var(--g-acc); color: var(--g-bg); } }
/* toque: retorno só enquanto o dedo está em cima (o hover grudava e a seta parecia presa) */
.galeria-seta:active { border-color: var(--g-acc); background: var(--g-acc); color: var(--g-bg); }
/* 2.34: o Fechar deixa de ser uma pílula de contorno (competia com as setas redondas e ficava solta no canto):
   vira a seta oficial da marca apontando de volta, com o rótulo ao lado em caixa normal */
.galeria-fechar { gap: 12px; min-width: 0; padding: 0 6px 0 0; border: 0; background: transparent; color: var(--g-fg); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.galeria-fechar .gf-seta { width: 40px; height: 40px; flex: none; fill: var(--g-acc); stroke: none; transform: rotate(180deg); transition: transform .3s var(--ease), fill .25s ease; }
@media (hover: hover) {
  .galeria-fechar:hover { background: transparent; color: var(--g-fg); }
  .galeria-fechar:hover .gf-seta { transform: rotate(180deg) translateX(4px); fill: var(--g-fg); }
}
@media (prefers-reduced-motion: reduce) { .galeria-fechar:hover .gf-seta { transform: rotate(180deg); } }
.galeria-seta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.galeria-seta { padding: 0; width: 48px; }

.galeria-titulo { font-family: var(--font-display); grid-area: titulo; min-width: 0; margin-bottom: clamp(8px, 1vw, 12px); font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.galeria-desc { grid-area: desc; margin-top: clamp(8px, 1vw, 12px); max-width: 64ch; font-size: clamp(14px, 1vw, 15.5px); line-height: 1.5; text-align: center; color: var(--g-mut); }

/* palco: tela + legenda, centrados. 2.30: a largura é calculada pelo JS (ajusta) a partir da largura E da altura reais
   disponíveis; este valor é só o ponto de partida antes da medição */
.galeria-palco { grid-area: palco; min-width: 0; max-width: 100%; display: grid; gap: 10px; width: min(100%, 960px); touch-action: pan-y; touch-action: pan-y pinch-zoom; }
.galeria-moldura {
  border-radius: 14px; overflow: hidden; background: var(--g-soft);
  box-shadow: 0 0 0 1px var(--g-line), 0 18px 44px rgba(0, 0, 0, .24);
}
.galeria-barra { display: flex; align-items: center; gap: 7px; height: 28px; padding-inline: 16px; background: var(--g-soft); }
.galeria-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--g-acc); opacity: .5; }
.galeria-barra i:first-child { opacity: 1; }
/* a caixa tem a proporção das capturas (1200:750): contain mostra a tela inteira, sem recorte, e a altura nunca muda entre telas */
.galeria-tela { position: relative; aspect-ratio: 1200 / 750; background: var(--g-bg); overflow: hidden; }
.galeria-tela img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain;
  opacity: 0; transform: none; transition: opacity .22s ease;
  color: var(--g-mut); font-size: 15px; line-height: 1.5; padding: 0;
}
.galeria-tela img.is-on { opacity: 1; transform: none; }
.galeria-aviso { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; font-size: 15.5px; line-height: 1.5; color: var(--g-mut); }
.galeria-aviso[hidden] { display: none; }
.galeria-aviso b { color: var(--g-fg); font-size: 17px; }
.galeria-conta { display: flex; justify-content: center; min-height: 22px; font-weight: 700; text-align: center; }
.galeria-conta span { font-size: clamp(15px, 1.1vw, 18px); }

/* anel com uma seta de cada lado */
.galeria-nav { grid-area: nav; width: min(100%, calc(var(--tela-w, 960px) + 140px)); display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-areas: "prev anel next"; align-items: center; gap: 8px 12px; margin-top: 4px; } /* as setas ficam junto ao anel, na largura da tela + folga */
/* 2.30: "2 de 5 telas" abaixo do anel, discreto e centrado (o total vem de cada projeto) */
.galeria-pos { grid-area: pos; min-height: 20px; margin-top: 2px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--g-mut); font-variant-numeric: tabular-nums; text-align: center; } /* 2.34: caixa normal, como o resto dos rótulos */
/* 2.30: encaixe por altura (classes escritas pelo JS): anel compacto e, se preciso, sem a descrição */
.galeria.is-anel-compacto .galeria-anel { --ga-w: clamp(100px, 9vw, 140px); }
.galeria.is-anel-compacto .ga-palco { height: calc(var(--ga-w) * .86 + 30px); }
.galeria.is-sem-desc .galeria-desc { display: none; }
/* paisagem curta (celular deitado, notebook com janela baixa): tela à esquerda; nome, anel, contador e descrição à direita */
.galeria.is-paisagem .galeria-in { grid-template-columns: minmax(0, 1fr) minmax(220px, 40%); grid-template-areas: "topo topo" "palco titulo" "palco nav" "palco pos" "palco desc"; column-gap: clamp(16px, 3vw, 40px); align-content: center; align-items: center; }
.galeria.is-paisagem .galeria-palco { grid-row: 2 / 6; align-self: center; justify-self: end; }
.galeria.is-paisagem .galeria-titulo { align-self: end; font-size: clamp(20px, 2.6vw, 30px); margin-bottom: 8px; }
.galeria.is-paisagem .galeria-nav { width: 100%; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px 8px; margin-top: 0; }
.galeria.is-paisagem .galeria-anel { --ga-w: clamp(90px, 10vw, 150px); }
.galeria.is-paisagem .ga-palco { height: calc(var(--ga-w) * .86 + 28px); }
/* deitado e ainda sem altura (568×320): o anel encolhe mais um pouco dentro da coluna da direita */
.galeria.is-paisagem.is-anel-compacto .galeria-anel { --ga-w: clamp(76px, 8vw, 120px); }
.galeria.is-paisagem.is-anel-compacto .ga-palco { height: calc(var(--ga-w) * .86 + 24px); }
.galeria.is-paisagem .galeria-desc { align-self: start; margin-top: 8px; font-size: 14px; max-width: none; }
.galeria.is-paisagem .galeria-topo { margin-bottom: 8px; }
.galeria-seta[data-dir="-1"] { grid-area: prev; } .galeria-seta[data-dir="1"] { grid-area: next; }
/* sem o anel (movimento reduzido, janela baixa, sem 3D): as setas ficam juntas, no centro */
.galeria-nav:has(.galeria-anel[hidden]) { grid-template-columns: 48px 32px 48px; justify-content: center; }

@media (max-width: 899px) {
  .galeria-topo { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * clamp(20px, 4vw, 64px)) 6px; padding: 8px clamp(20px, 4vw, 64px); background: var(--g-bg); }
  .galeria-tipo { font-size: 12px; letter-spacing: .06em; }
  .galeria-titulo { font-size: clamp(24px, 6.4vw, 36px); margin-bottom: 12px; }
  .galeria-palco { width: 100%; min-width: 0; }
  .galeria-barra { height: 22px; padding-inline: 12px; } .galeria-barra i { width: 7px; height: 7px; }
  .galeria-nav { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px 8px; }
  .galeria-seta { width: 44px; min-width: 44px; min-height: 44px; }
  .galeria-desc { margin-top: 16px; max-width: 52ch; }
  /* 2.39: em retrato o anel ocupa a largura toda da galeria, de borda a borda (antes ficava entre as setas, num palco de
     ~246 px, e as laterais do cilindro eram cortadas 60 px de cada lado). As setas descem para a linha do contador,
     uma de cada lado, e o JS limita a largura do painel da frente para o cilindro inteiro caber projetado no palco. */
  .galeria:not(.is-paisagem) .galeria-in { grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); grid-template-areas: "topo topo topo" "titulo titulo titulo" "palco palco palco" "anel anel anel" "prev pos next" "desc desc desc"; column-gap: 14px; }
  .galeria:not(.is-paisagem) .galeria-nav { display: contents; }
  .galeria:not(.is-paisagem) .galeria-anel { justify-self: stretch; margin: 6px calc(-1 * clamp(20px, 4vw, 64px)) 0; }
  /* as setas abraçam o contador ("‹ 2 de 5 telas ›"), um conjunto só e centrado, em vez de ficarem coladas nas bordas */
  .galeria:not(.is-paisagem) .galeria-pos { align-self: center; margin-top: 0; }
  .galeria:not(.is-paisagem) .galeria-seta[data-dir="-1"] { justify-self: end; }
  .galeria:not(.is-paisagem) .galeria-seta[data-dir="1"] { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-tela img { transform: none; transition: none; }
}
/* com JS a pasta inteira abre a galeria (a ação acessível continua sendo o resumo "Explorar projeto") */
html.js .pasta-pilha { cursor: pointer; }

/* ---------- 4. Anel cilíndrico dentro da galeria do projeto (skill galeria-anel-cilindrico; o JS monta os painéis) ----------
   De um lado o anel 3D com todas as telas do projeto; do outro a tela normal. O anel segue a tela escolhida e pode ser
   arrastado; um toque na metade esquerda/direita volta/avança. Decorativo para leitores de tela. Some com movimento reduzido. */
/* 2.29: o anel fica ABAIXO da tela principal, entre as duas setas (área "anel" do .galeria-nav) */
.galeria-anel { grid-area: anel; position: relative; min-width: 0; --ga-w: clamp(140px, 12.5vw, 200px); }
.galeria-anel[hidden] { display: none; }
.ga-regua { position: absolute; left: 0; top: 0; width: var(--ga-w); height: 0; visibility: hidden; pointer-events: none; }
.ga-palco { position: relative; height: calc(var(--ga-w) * .86 + 44px); /* painel da frente (0,625) + o que a inclinação baixa a frente (≈ 0,3) + a faixa de trás que sobe */ perspective: 1100px; perspective-origin: 50% 62%; overflow: hidden; touch-action: pan-y; touch-action: pan-y pinch-zoom; cursor: grab; -webkit-user-select: none; user-select: none; }
.galeria-anel.is-arrastando .ga-palco { cursor: grabbing; }
.ga-giro, .ga-painel { position: absolute; left: 50%; top: calc(100% - var(--ga-w) * .62 - 18px); width: 0; height: 0; transform-style: preserve-3d; }
.ga-painel { left: 0; top: 0; }
.ga-painel i { position: absolute; left: 0; top: 0; display: block; background-repeat: no-repeat; background-color: var(--g-soft); backface-visibility: visible; transform-style: preserve-3d; pointer-events: none; }
/* O verso tem sombra fixa: girar o anel não repinta os gradientes das 80 tiras a cada quadro. */
.ga-painel i::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .56); transform: rotateY(180deg) translateZ(.1px); backface-visibility: hidden; pointer-events: none; }
@media (max-width: 899px) {
  .galeria-anel { --ga-w: clamp(120px, 34vw, 200px); }
  .ga-palco { height: calc(var(--ga-w) * .86 + 36px); perspective: 820px; }
}
/* 2.30: em janela baixa o anel não some mais — encolhe (.is-anel-compacto / .is-paisagem, pelo JS); só com movimento reduzido ele sai */
@media (prefers-reduced-motion: reduce) { .galeria-anel { display: none; } .galeria-nav { grid-template-columns: 48px 32px 48px; justify-content: center; } }

/* ---------- 5. Projetos em carrossel de capas (o JS monta a janela, posiciona as capas e cria as setas) ----------
   Referência do Walter: a tela do projeto da vez grande no centro e as vizinhas menores, um pouco mais baixas, levemente
   giradas e escurecidas, saindo pelas bordas. Nada de pasta nem folhas aqui: a capa (janela de navegador com a captura)
   é o cartão. Sob a capa do centro aparece só o nome do projeto, que abre a galeria em tela cheia (a capa também abre);
   clicar numa vizinha traz ela para o centro. Sem JS: a grade de pastas.
   A largura da capa (--cw) também respeita a altura da janela: no celular deitado a capa cabia só pela largura e
   passava da altura útil. O arraste horizontal é do script; rolagem vertical e pinça continuam do navegador. */
.pastas-janela { --cw: min(56vw, 900px); position: relative; overflow: hidden; margin-inline: calc(-1 * var(--pad-x)); padding-block: 12px 4px; touch-action: pan-y; touch-action: pan-y pinch-zoom; cursor: grab; -webkit-user-select: none; user-select: none; } /* --cw na janela: a lista e as setas (irmãs) leem a mesma largura de capa */
.pastas-janela.is-dragging { cursor: grabbing; }
/* página ampliada com pinça (html.is-pinca, pelo JS): o arraste horizontal desloca a vista ampliada, não troca projeto nem tela */
html.is-pinca .pastas-janela, html.is-pinca .galeria-palco, html.is-pinca .ga-palco, html.is-pinca .carousel.is-live .carousel-viewport { touch-action: pan-x pan-y pinch-zoom; }
.pastas.is-slider { display: block; position: relative; max-width: none; margin: 0; }
.pastas.is-slider > .pasta {
  position: absolute; left: 50%; top: 0; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 40%; will-change: transform; transition: transform .75s var(--ease), filter .6s ease, opacity .5s ease;
}
.pastas.is-slider.is-dragging > .pasta, .pastas.is-slider > .pasta.is-salto { transition: none; }
.pastas.is-slider .pasta-pilha { margin: 0; padding: 0; }
.pastas.is-slider .pasta-fundo, .pastas.is-slider .pasta-folha { display: none; }
.pastas.is-slider .pasta-capa, .pastas.is-slider .pasta:hover .pasta-capa, .pastas.is-slider .pasta:focus-within .pasta-capa { transform: none; border-radius: clamp(10px, 1.2vw, 18px); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.pastas.is-slider .pasta-barra { height: clamp(16px, 1.6vw, 24px); }
/* 2.29 (pedido do Walter): sob a capa só o NOME do projeto, e o nome é o botão que abre a galeria (o JS o cria dentro do h3).
   Categoria, resumo, "5 telas" e "Explorar projeto" saem da apresentação; o <details> continua no HTML (dados e fallback sem JS). */
.pastas.is-slider .pasta-info { padding-top: clamp(14px, 1.6vw, 22px); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease); }
.pastas.is-slider .pasta.is-atual .pasta-info { opacity: 1; transform: none; transition-delay: .18s; }
.pastas.is-slider .pasta-titulo { justify-content: center; }
.pastas.is-slider .pasta-titulo h3 { font-size: clamp(24px, 2.6vw, 40px); }
.pastas.is-slider .pasta-rotulo, .pastas.is-slider .pasta-resumo { display: none; }
html.tem-dialog .pastas.is-slider .pasta-detalhes { display: none; } /* só some quando a galeria em <dialog> existe (senão o <details> é o único caminho para as telas) */
.pasta-abrir { display: inline-block; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .25s ease; }
@media (hover: hover) { .pasta-abrir:hover { color: var(--aba); } }
@media (pointer: coarse) { .pasta-abrir { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } /* alvo de toque de 44 px */
.pasta-abrir:focus-visible { outline: 3px solid var(--sf-lime); outline-offset: 2px; }
/* setas: uma de cada lado da capa do centro, sobre a janela (nada de barra vazia no alto); o anúncio para leitor de tela vai junto */
.pastas-nav { position: absolute; left: var(--pad-x); right: var(--pad-x); top: calc(12px + var(--cw) * .33); height: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 20; }
#projetos { padding-bottom: clamp(36px, 4vw, 64px); }
.pastas-seta { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(4, 43, 32, .55); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: border-color .3s ease, color .3s ease, transform .3s var(--ease); }
.pastas-seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .pastas-seta:hover { border-color: var(--sf-lime); color: var(--sf-lime); } }
.pastas-seta:active { transform: scale(.94); border-color: var(--sf-lime); color: var(--sf-lime); }
/* telas pequenas: capas um pouco menores, setas de 44 px nas faixas laterais (as vizinhas), sem cobrir a capa do centro */
@media (max-width: 760px) {
  .pastas-janela { --cw: 72vw; }
  .pastas-nav { left: max(4px, calc(50% - var(--cw) / 2 - 46px)); right: max(4px, calc(50% - var(--cw) / 2 - 46px)); }
  .pastas-seta { width: 44px; height: 44px; }
  .pastas-seta svg { width: 20px; height: 20px; }
}
@media (max-width: 480px) { .pastas-janela { --cw: 68vw; } }
@media (max-width: 360px) { .pastas-janela { --cw: 64vw; } } /* em 320 px as setas de 44 px precisam de 50 px de cada lado */
@supports (height: 100svh) {
  .pastas-janela { --cw: min(56vw, 900px, calc((100svh - 150px) * 1.6)); }
  @media (max-width: 760px) { .pastas-janela { --cw: min(72vw, calc((100svh - 150px) * 1.6)); } }
  @media (max-width: 480px) { .pastas-janela { --cw: min(68vw, calc((100svh - 150px) * 1.6)); } }
  @media (max-width: 360px) { .pastas-janela { --cw: min(64vw, calc((100svh - 150px) * 1.6)); } }
}
@media print { .pastas.is-slider { display: grid; height: auto !important; } .pastas.is-slider > .pasta { position: static; width: auto; margin: 0; transform: none !important; filter: none !important; opacity: 1 !important; } .pastas.is-slider .pasta-info { opacity: 1; transform: none; } .pastas-nav { display: none; } }