/* A cena Ateliê: a sala 3D do André com recortes. Por trás da sala (sala.webp, com os recortes transparentes)
   passam a rua de Amsterdã nas janelas, o painel com o texto e o quadro do cavalete, onde as estampas são
   pintadas em perspectiva. O movimento e as medidas moram em assets/atelie.js. */
.atl { position: absolute; inset: 0; overflow: hidden; background: #141316; }
.atl-sala { position: absolute; inset: 0; overflow: hidden; }
.atl-sala-in { position: absolute; left: 0; top: 0; }
.atl-sala-in > * { position: absolute; }
.atl-sala-img { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.atl-sala-img.ok { opacity: 1; }

/* a rua: a cidade mexe mais que a sala (fica mais longe), com luzes, canal, barco, estrelas e o reflexo no vidro */
.atl-fora { overflow: hidden; pointer-events: none; background: #0B0F16; }
.atl-fora-in { position: absolute; inset: -5%; }
.atl-fora-in img { position: absolute; inset: 4.5%; width: 91%; height: 91%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.atl-fora-in img.ok { opacity: 1; }
.atl-cidade { position: absolute; inset: 4.5%; }
.atl-cidade .luz { position: absolute; width: 1.6%; height: 2.2%; margin: -1.1% 0 0 -.8%; border-radius: 2px;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .95), rgba(255, 170, 80, .35) 60%, transparent);
  mix-blend-mode: screen; opacity: .2; animation: atl-acende var(--d, 6s) ease-in-out var(--a, 0s) infinite; }
@keyframes atl-acende { 0%, 100% { opacity: .12; } 40% { opacity: .9; } 55% { opacity: .55; } 70% { opacity: .95; } }
.atl-cidade .apaga { position: absolute; width: 1.6%; height: 2.2%; margin: -1.1% 0 0 -.8%; background: #120F12; opacity: 0;
  animation: atl-apaga var(--d, 14s) steps(1) var(--a, 0s) infinite; }
@keyframes atl-apaga { 0%, 78% { opacity: 0; } 79%, 92% { opacity: .85; } 93%, 100% { opacity: 0; } }
.atl-cidade .agua { position: absolute; height: .45%; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 196, 110, .8), transparent);
  mix-blend-mode: screen; opacity: 0; animation: atl-brilha var(--d, 5s) ease-in-out var(--a, 0s) infinite; }
@keyframes atl-brilha { 0%, 100% { opacity: 0; transform: translateX(-6px) scaleX(.6); } 45% { opacity: var(--o, .7); transform: translateX(5px) scaleX(1); } }
.atl-cidade .barco { position: absolute; top: 76%; left: 0; width: 1.4%; height: 1.4%; border-radius: 50%;
  background: radial-gradient(closest-side, #FFE2A8, rgba(255, 190, 90, .5) 55%, transparent); mix-blend-mode: screen;
  box-shadow: 0 10px 14px -4px rgba(255, 190, 90, .35); animation: atl-barco 46s linear infinite; }
@keyframes atl-barco { 0% { transform: translateX(105vw); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(-10vw); opacity: 0; } }
.atl-cidade .estrela { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFF6DC; opacity: .2;
  animation: atl-pisca var(--d, 4s) ease-in-out var(--a, 0s) infinite; }
@keyframes atl-pisca { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
.atl-reflexo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .02) 52%, transparent 60%);
  background-size: 300% 100%; animation: atl-reflexo 16s ease-in-out infinite; }
@keyframes atl-reflexo { 0%, 60% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }

/* o painel alto: uma placa escura de exposição; o texto da cena fica por cima dela */
.atl-painel { overflow: hidden; pointer-events: none; background: linear-gradient(170deg, #2A2724 0%, #1E1C1A 55%, #171514 100%); }
.atl-mapa { position: absolute; pointer-events: none; mix-blend-mode: multiply; opacity: .75; }
.atl-painel .atl-mapa { inset: 0; width: 100%; height: 100%; }
.atl-mapa:not(.ok) { visibility: hidden; }

/* o quadro do cavalete: uma tela plana em perspectiva (matrix3d), onde cada arte é pintada */
.atl-tela { left: 0; top: 0; width: 400px; height: 580px; padding: 0; border: 0; margin: 0; transform-origin: 0 0; cursor: zoom-in;
  background: #ECE5D6; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.atl-tela:focus-visible { outline: 4px solid #F2C40F; outline-offset: 6px; }
.atl-tela-pinturas { position: absolute; inset: 0; display: block; }
.atl-camada { position: absolute; inset: 0; background: var(--fundo, #17161A); display: grid; place-items: center; }
.atl-camada img { width: 82%; height: 82%; object-fit: contain; }
.atl-camada.foto img { width: 100%; height: 100%; object-fit: cover; }
/* a tela ganha a trama do linho, por cima de tudo que é pintado */
.atl-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 3px); }
/* a pincelada: a camada nova entra por uma borda de tinta que atravessa a tela */
.atl-camada.pinta { -webkit-mask-image: linear-gradient(100deg, #000 0 42%, rgba(0, 0, 0, .6) 47%, transparent 56%); mask-image: linear-gradient(100deg, #000 0 42%, rgba(0, 0, 0, .6) 47%, transparent 56%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: atl-pinta 1.05s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes atl-pinta { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.atl-mapa-quadro { opacity: .8; }

/* o logo clássico estampado na camiseta branca do varal: multiplica com o pano (pega a luz e a trama), é impresso
   como serigrafia quando a cena chega, balança com o tecido e pula quando o mouse passa nas camisetas */
.atl-logo-camisa { pointer-events: none; mix-blend-mode: multiply; transform-origin: 50% -260%; animation: atl-tecido 5.2s ease-in-out infinite alternate; }
.atl-logo-camisa img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: saturate(.92) contrast(.96); transition: opacity .6s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.atl-logo-camisa img.ok { opacity: .93; }
@keyframes atl-tecido { from { transform: rotate(-1.1deg) skewY(.5deg); } to { transform: rotate(1.1deg) skewY(-.5deg); } }
.atl-logo-camisa.imprime img { -webkit-mask-image: linear-gradient(180deg, #000 0 45%, transparent 55%); mask-image: linear-gradient(180deg, #000 0 45%, transparent 55%);
  -webkit-mask-size: 100% 240%; mask-size: 100% 240%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: atl-rodo 1.3s cubic-bezier(.5, .05, .25, 1) .9s both; }
@keyframes atl-rodo { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: scale(1.06); } to { -webkit-mask-position: 0 0; mask-position: 0 0; transform: scale(1); } }
.atl-sala-in:has(.atl-varal-quem:hover) .atl-logo-camisa img, .atl-sala-in:has(.atl-varal-quem:focus-visible) .atl-logo-camisa img { transform: translateY(-3%) scale(1.08); }

/* a luz da luminária: o cone respira e a poeira flutua dentro dele */
.atl-cone { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen;
  clip-path: polygon(57.2% 12.4%, 69.4% 12.4%, 75% 74%, 45% 74%);
  background: linear-gradient(180deg, rgba(255, 214, 150, .2) 0%, rgba(255, 200, 130, .08) 45%, transparent 85%); animation: atl-respira 7s ease-in-out infinite; }
@keyframes atl-respira { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.atl-cone i { position: absolute; width: var(--t, 2px); height: var(--t, 2px); border-radius: 50%; background: #FFE9C4; opacity: 0;
  animation: atl-flutua var(--d, 12s) ease-in-out var(--a, 0s) infinite; }
@keyframes atl-flutua { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 20% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; transform: translate3d(var(--x, 12px), var(--y, -30px), 0); } }

/* as setas ao lado do quadro e a plaquinha no cavalete */
.atl-seta { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 1px solid rgba(246, 240, 225, .7); background: rgba(20, 19, 22, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #F6F0E1; font-size: 19px; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.atl-seta:hover, .atl-seta:focus-visible { background: #F2C40F; border-color: #F2C40F; color: #26241F; outline: none; }
.atl-placa { transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(20, 19, 22, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.atl-placa-txt { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 150px; }
.atl-placa .atl-seta { position: static; margin: 0; flex: none; width: 44px; height: 44px; }
.atl-placa .serie { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #F2C40F; line-height: 1.4; }
.atl-placa .nome { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; line-height: 1; color: #FFFDF4; }
.atl-placa .conta { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(246, 240, 225, .6); }

/* poeira de tinta da sala */
.atl-poeira { position: absolute; inset: 0; pointer-events: none; }
.atl-poeira i { position: absolute; bottom: -2vh; width: var(--t, 5px); height: var(--t, 5px); border-radius: 50%; background: var(--c, #F2C40F);
  opacity: 0; filter: blur(.4px); animation: atl-sobe var(--d, 14s) linear var(--a, 0s) infinite; }
@keyframes atl-sobe {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: .6; }
  50% { transform: translate3d(var(--x, 20px), -48vh, 0); }
  85% { opacity: .4; }
  100% { opacity: 0; transform: translate3d(calc(var(--x, 20px) * -.5), -96vh, 0); } }
/* fora da cena, nada se mexe */
.atl.parado *, .atl.parado *::after { animation-play-state: paused !important; }

/* o texto: uma coluna de leitura à esquerda, no tamanho das outras cenas, sobre um véu escuro */
.atl-veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 9, 12, .9) 0%, rgba(10, 9, 12, .78) 22%, rgba(10, 9, 12, .34) 33%, rgba(10, 9, 12, 0) 42%); }
.atl-texto { position: absolute; left: 0; top: 0; bottom: 0; width: 36vw; z-index: 3; box-sizing: border-box; display: flex; flex-direction: column;
  justify-content: center; padding: 12vh 0 10vh 7vw; pointer-events: none; }
.atl-texto-in { display: flex; flex-direction: column; gap: clamp(12px, 2.1vh, 22px); pointer-events: auto; }
.atl-kick { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 3px; color: #F2C40F; }
.atl-titulo { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(40px, 4.4vw, 78px); line-height: 1; letter-spacing: -0.1vw; margin: 0; color: #FFFDF4; }
.atl-titulo em { font-style: italic; color: #F2C40F; }
.atl-p { font-size: clamp(15px, 1.2vw, 18.5px); line-height: 1.6; color: #DDD4BC; max-width: 27vw; margin: 0; text-wrap: pretty; }
.atl-tempo { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; max-width: 24vw; }
.atl-tempo li { display: flex; align-items: baseline; gap: 14px; padding-top: 8px; border-top: 1px solid rgba(242, 196, 15, .24); }
.atl-tempo b { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(20px, 1.5vw, 26px); line-height: 1; color: #F2C40F; flex: none; }
.atl-tempo span { font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.35; color: #E9E1CB; }
.atl-dica { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 1.5px; line-height: 1.6; color: rgba(246, 240, 225, .66); max-width: 27vw; }

/* o carrossel de miniaturas: a faixa começa na mesma margem do texto; as setas ficam por cima das pontas e só
   aparecem quando o mouse passa pela faixa (sem mouse, ficam sempre à vista) */
.atl-carrossel { position: relative; margin-top: 4px; max-width: 29vw; }
.atl-car-trilho { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding: 5px 3px; margin: 0 -3px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.atl-car-trilho::-webkit-scrollbar { display: none; }
.atl-mini { flex: none; width: 54px; height: 54px; padding: 6px; border: 0; border-radius: 9px; background: var(--fundo, #17161A); cursor: pointer; scroll-snap-align: start;
  box-shadow: 0 0 0 1px rgba(246, 240, 225, .14), 0 6px 12px rgba(0, 0, 0, .35); opacity: .78; transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease; }
.atl-mini img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s ease; }
.atl-mini img.ok { opacity: 1; }
.atl-mini:hover, .atl-mini:focus-visible { opacity: 1; transform: translateY(-2px); outline: none; box-shadow: 0 0 0 1px rgba(246, 240, 225, .4), 0 8px 14px rgba(0, 0, 0, .4); }
.atl-mini[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #F2C40F, 0 8px 14px rgba(0, 0, 0, .4); }
.atl-car-seta { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 1px solid rgba(246, 240, 225, .7);
  background: rgba(20, 19, 22, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #F6F0E1; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .25s ease, color .25s ease, opacity .25s ease; }
.atl-car-seta[data-car="-1"] { left: -14px; }
.atl-car-seta[data-car="1"] { right: -14px; }
.atl-car-seta:hover:not(:disabled), .atl-car-seta:focus-visible { background: #F2C40F; border-color: #F2C40F; color: #26241F; outline: none; }
.atl-car-seta:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) {
  .atl-car-seta { opacity: 0; pointer-events: none; }
  .atl-carrossel:hover .atl-car-seta, .atl-carrossel:focus-within .atl-car-seta { opacity: 1; pointer-events: auto; }
}

/* a chegada em tinta (desenhada em canvas por cima de tudo) */
.atl-tinta { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: none; }
.atl-tinta.on { display: block; }

/* a lupa: a arte inteira num quadro da cor da camiseta, sem rolagem, encolhendo para caber na janela */
.atl-luz { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 72px 6vw; box-sizing: border-box;
  background: rgba(8, 9, 12, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s ease; }
.atl-luz.aberta { opacity: 1; }
.atl-luz[hidden] { display: none; }
.atl-luz figure { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(240px, 340px); gap: clamp(24px, 4vw, 56px); align-items: center;
  max-width: 100%; max-height: 100%; }
.atl-luz-arte { display: grid; place-items: center; min-height: 0; padding: clamp(18px, 2.6vw, 38px); border-radius: 16px; background: var(--fundo, #17161A);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); }
.atl-luz-arte.foto { padding: 12px 12px 44px; border-radius: 4px; }
.atl-luz-arte img { display: block; max-width: min(50vw, 700px); max-height: calc(100vh - 230px); width: auto; height: auto; object-fit: contain;
  transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.atl-luz-arte.troca img { opacity: 0; transform: scale(.96); }
.atl-luz figcaption { display: grid; gap: 14px; color: #E9E1CB; }
.atl-luz .serie { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #F2C40F; line-height: 1.5; }
.atl-luz h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(36px, 3.4vw, 56px); line-height: 1; margin: 0; color: #FFFDF4; }
.atl-luz .historia { margin: 0; font-size: 16px; line-height: 1.6; color: #D9D0B8; max-width: 34ch; text-wrap: pretty; }
.atl-luz .historia[hidden] { display: none; }
.atl-luz .conta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 2px; color: rgba(246, 240, 225, .55); }
.atl-luz-nav { display: flex; gap: 10px; margin-top: 8px; }
.atl-luz button { font: inherit; cursor: pointer; }
.atl-luz-nav button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #F6F0E1; background: transparent; color: #F6F0E1; font-size: 20px;
  transition: background .25s ease, color .25s ease; }
.atl-luz-nav button:hover, .atl-luz-nav button:focus-visible { background: #F2C40F; border-color: #F2C40F; color: #26241F; outline: none; }
.atl-luz-fecha { position: absolute; top: 22px; right: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(246, 240, 225, .4); background: transparent; color: #F6F0E1; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important;
  letter-spacing: 2px; }
.atl-luz-fecha:hover, .atl-luz-fecha:focus-visible { border-color: #F2C40F; color: #F2C40F; outline: none; }
.atl-luz-fecha svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .atl *, .atl *::after { animation: none !important; }
}

/* ── no celular (palco .cel, de assets/celular.js?v=8d7f2514): a cena rola na vertical; o texto vem primeiro e a sala
      se aproxima do cavalete ── */
[data-stage].cel .atl { position: relative; inset: auto; min-height: 100%; display: flex; flex-direction: column; overflow: visible;
  padding-bottom: calc(var(--base-cel, 90px) + 24px); box-sizing: border-box; }
[data-stage].cel .atl-texto { position: relative; width: auto; order: 1; padding: calc(var(--nav-cel, 70px) + 26px) 22px 14px !important; }
[data-stage].cel .atl-texto-in { zoom: 1 !important; }
[data-stage].cel .atl-veu { display: none; }
[data-stage].cel .atl-titulo { font-size: 42px; }
[data-stage].cel .atl-p { font-size: 16px; }
[data-stage].cel .atl-p, [data-stage].cel .atl-tempo, [data-stage].cel .atl-dica, [data-stage].cel .atl-carrossel { max-width: none; }
[data-stage].cel .atl-sala { position: relative; inset: auto; order: 2; height: min(72vh, 620px); border-radius: 0; }
[data-stage].cel .atl-poeira, [data-stage].cel .atl-varal-quem { display: none; }
[data-stage].cel .atl-placa { gap: 8px; padding: 7px 8px; max-width: calc(100vw - 28px); box-sizing: border-box; white-space: normal; }
[data-stage].cel .atl-placa-txt { min-width: 0; flex: 1; }
[data-stage].cel .atl-placa .serie { font-size: 9px; letter-spacing: 1.2px; }
[data-stage].cel .atl-placa .nome { font-size: 21px; }
[data-stage].cel .atl-placa .atl-seta { width: 40px; height: 40px; }
@media (max-width: 820px) {
  .atl-luz { padding: 64px 18px 24px; }
  .atl-luz figure { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; text-align: center; }
  .atl-luz-arte img { max-width: 76vw; max-height: 50vh; }
  .atl-luz-nav { justify-content: center; }
  .atl-luz-fecha { top: 14px; right: 14px; }
}

/* ── as camisetas do varal: a área clicável que abre o mural de quem veste ── */
.atl-varal-quem { padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 18px; -webkit-tap-highlight-color: transparent; }
.atl-varal-quem::before { content: ''; position: absolute; inset: 2%; border-radius: 22px; pointer-events: none; box-shadow: 0 0 0 1px rgba(242, 196, 15, 0); transition: box-shadow .35s ease; }
.atl-varal-quem:hover::before, .atl-varal-quem:focus-visible::before { box-shadow: 0 0 0 2px rgba(242, 196, 15, .75); }
.atl-varal-quem:focus { outline: none; }
/* o mesmo convite no texto */
.atl-quem { align-self: flex-start; display: inline-flex; align-items: center; gap: .55em; padding: .75em 1.25em; border: 0; border-radius: 999px; cursor: pointer;
  background: #F2C40F; color: #26241F; font: 600 15px/1 'Space Grotesk', sans-serif; transition: transform .25s ease, box-shadow .25s ease; }
.atl-quem svg { width: 17px; height: 17px; flex: none; }
.atl-quem:hover, .atl-quem:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); outline: none; }

/* ── o mural de quem veste: polaroides presas num quadro escuro, sem rolagem ── */
.atl-mural { position: fixed; inset: 0; z-index: 290; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 64px 5vw 28px; box-sizing: border-box; background: radial-gradient(ellipse 80% 70% at 50% 45%, #232126 0%, #141316 70%); opacity: 0; transition: opacity .35s ease; }
.atl-mural.aberta { opacity: 1; }
.atl-mural[hidden] { display: none; }
.atl-mural-cab { text-align: center; display: grid; gap: 8px; }
.atl-mural-cab .kick { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: #F2C40F; }
.atl-mural-cab h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; margin: 0; color: #FFFDF4; }
.atl-mural-grade { display: grid; justify-content: center; align-content: center; }
.atl-polar { position: relative; width: var(--w); padding: 7% 7% 0; border: 0; background: #FBF8F1; cursor: zoom-in; display: grid; border-radius: 2px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45); transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.atl-polar img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #2A282D; }
.atl-polar .leg { font-family: 'Caveat', cursive; font-weight: 600; font-size: calc(var(--w) * .12); line-height: 1; color: #2E2B26; padding: .35em .2em .5em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-polar .fita { position: absolute; left: 50%; top: -5%; width: 34%; height: 9%; transform: translateX(-50%) rotate(-3deg); background: rgba(242, 196, 15, .6); }
.atl-polar:hover, .atl-polar:focus-visible { transform: rotate(0) translateY(-6px) scale(1.04); box-shadow: 0 22px 34px rgba(0, 0, 0, .55); outline: none; z-index: 1; }
.atl-polar:focus-visible { box-shadow: 0 0 0 3px #F2C40F, 0 22px 34px rgba(0, 0, 0, .55); }
.atl-mural-grade.entra .atl-polar { animation: atl-cai .6s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) backwards; }
@keyframes atl-cai { from { opacity: 0; transform: translateY(-36px) rotate(calc(var(--r, 0deg) * 4)); } }
.atl-mural-pe { display: flex; align-items: center; gap: 16px; }
.atl-mural-pe[hidden] { display: none; }
.atl-mural-pe .pag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 2px; color: rgba(246, 240, 225, .7); }
.atl-mural-pe button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #F6F0E1; background: transparent; color: #F6F0E1; font-size: 19px; cursor: pointer;
  transition: background .25s ease, color .25s ease, opacity .25s ease; }
.atl-mural-pe button:hover:not(:disabled), .atl-mural-pe button:focus-visible { background: #F2C40F; border-color: #F2C40F; color: #26241F; outline: none; }
.atl-mural-pe button:disabled { opacity: .3; cursor: default; }
@media (max-width: 820px) { .atl-mural { padding: 76px 18px 20px; gap: 12px; } }