/* ===== CORES E MEDIDAS ===== */
:root {
  --preto: #171a1c;
  --preto-fundo: #111315;
  --preto-2: #1e2225;
  --linha: #2e3337;
  --azul: #0353a4;
  --azul-vivo: #1f63c8;
  --azul-escuro: #062c57;
  --azul-claro: #5c9ded;
  --branco: #fafafa;
  --papel: #f3f0e8;
  --cinza: #9aa1a7;
  --borda: clamp(1rem, 4vw, 3rem);
  --mola: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
.num { font-family: 'Archivo', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0; }
body {
  background: #080b12;
  color: var(--branco);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* font-stretch normal: herdar a largura esticada dos títulos faz o Safari cortar letras como o "g" */
em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-stretch: normal; color: var(--azul-claro); }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
::selection { background: var(--azul); }

.pixel { font-family: 'Pixelify Sans', monospace; font-weight: 400; letter-spacing: 0.02em; }
.etiqueta-pixel { font-family: 'Pixelify Sans', monospace; font-size: 0.95rem; color: var(--cinza); display: inline-flex; align-items: center; gap: 0.5rem; }
.papel-azul .etiqueta-pixel { color: #cfe0ff; }

/* papel quadriculado azul */
.papel-azul {
  background-color: var(--azul);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
}
.papel-azul em { color: #cfe3ff; }

/* caixa de seleção estilo editor, com alças nos cantos */
.selecao { position: relative; display: inline-block; outline: 1.5px solid var(--azul-claro); padding: 0 0.08em; }
.selecao i {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--branco);
  border: 1.5px solid var(--azul-claro);
}
.selecao i:nth-of-type(1) { top: -5px; left: -5px; }
.selecao i:nth-of-type(2) { top: -5px; right: -5px; }
.selecao i:nth-of-type(3) { bottom: -5px; left: -5px; }
.selecao i:nth-of-type(4) { bottom: -5px; right: -5px; }

/* bilhete com alfinete */
.bilhete {
  position: relative;
  display: inline-block;
  padding: 1.1rem 1.3rem 0.9rem;
  background: var(--papel);
  color: #0b2a52;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  text-align: left;
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.35);
}
.alfinete {
  position: absolute;
  top: -11px; left: 50%;
  width: 20px; height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9cc4ff, var(--azul) 55%, #022a55);
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.4);
}

/* estrela em retícula (halftone) */
.estrela-ht { position: absolute; pointer-events: none; }

.botao {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--linha);
  border-radius: 99px;
  font-size: 0.95rem;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.botao:hover { border-color: var(--branco); transform: translateY(-2px); }
.botao-azul { background: var(--azul); border-color: var(--azul); box-shadow: 0 0 24px rgb(31 99 200 / 0.45); }
.botao-azul:hover { background: var(--azul-vivo); border-color: var(--azul-vivo); }

.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--azul-claro); animation: piscar 1.4s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

/* ===== TOPO ===== */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem var(--borda);
  background: linear-gradient(rgb(8 11 18 / 0.9) 35%, transparent);
}
.logo { font-weight: 800; font-stretch: 115%; font-size: 1.15rem; letter-spacing: -0.02em; }
.logo em { font-size: 1.25em; letter-spacing: 0; }
.topo-ano { color: var(--cinza); font-size: 0.95rem; }
.menu { display: flex; gap: 1.6rem; justify-self: end; font-size: 0.95rem; }
.menu a { opacity: 0.75; transition: opacity 0.2s; }
.menu a:hover { opacity: 1; }

/* ===== TELA 1 — A PASTA ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--borda) 5rem;
  overflow: hidden;
}
.hero-luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 50% 22%, rgb(250 250 250 / 0.07), transparent 70%),
    radial-gradient(ellipse 45% 40% at 50% 62%, rgb(3 83 164 / 0.45), transparent 72%);
}
.hero-titulo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  margin-bottom: 0.42em;
  font-size: clamp(2.6rem, 8.2vw, 7.6rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.hero-titulo em { font-size: 1.18em; letter-spacing: -0.02em; text-shadow: 0 6px 30px rgb(0 0 0 / 0.5); }

.pasta {
  position: relative;
  z-index: 2;
  width: min(88vw, max(640px, 40vw), 980px);
  aspect-ratio: 1.45;
}
.pasta-fundo {
  position: absolute;
  inset: 12% 0 0 0;
  background: linear-gradient(var(--azul), var(--azul-escuro));
  border-radius: 20px;
  box-shadow: 0 40px 80px rgb(0 0 0 / 0.55);
}
.pasta-fundo::before {
  content: '';
  position: absolute;
  top: -9%; left: 0;
  width: 36%; height: 12%;
  background: var(--azul);
  border-radius: 16px 16px 0 0;
}
.pf {
  position: absolute;
  width: 28%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 4px solid var(--branco);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.4);
  transition: transform 0.7s var(--mola);
}
.pf-1 { left: 5%;  bottom: 26%; transform: rotate(-13deg); }
.pf-2 { left: 20%; bottom: 33%; transform: rotate(-5deg); }
.pf-3 { left: 36.5%; bottom: 37%; transform: rotate(1deg); }
.pf-4 { left: 53%; bottom: 32%; transform: rotate(7deg); }
.pf-5 { left: 68%; bottom: 25%; transform: rotate(14deg); }
.pasta:hover .pf-1 { transform: rotate(-19deg) translate(-16%, -4%); }
.pasta:hover .pf-2 { transform: rotate(-9deg) translate(-8%, -8%); }
.pasta:hover .pf-3 { transform: rotate(0deg) translateY(-10%); }
.pasta:hover .pf-4 { transform: rotate(10deg) translate(8%, -8%); }
.pasta:hover .pf-5 { transform: rotate(19deg) translate(16%, -4%); }

.pasta-frente {
  position: absolute;
  left: -1%; right: -1%; bottom: 0;
  height: 52%;
  display: flex;
  align-items: flex-start;
  padding: 1.1rem 1.4rem;
  overflow: hidden;
  /* vidro líquido: quase transparente, pouca desfocagem, cor saturada e bordas que brilham */
  background:
    linear-gradient(180deg, rgb(40 115 225 / 0.62) 0%, rgb(15 90 190 / 0.74) 40%, rgb(3 70 145 / 0.92) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(160%) brightness(0.85);
  backdrop-filter: blur(4px) saturate(160%) brightness(0.85);
  border: 1px solid rgb(160 200 255 / 0.45);
  border-radius: 22px;
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.35),
    inset 1.5px 0 0 rgb(255 255 255 / 0.35),
    inset -1.5px 0 0 rgb(255 255 255 / 0.2),
    inset 0 0 28px rgb(140 190 255 / 0.18),
    inset 0 -30px 50px rgb(3 60 130 / 0.5),
    0 24px 50px rgb(0 0 0 / 0.4);
  transform-origin: bottom;
  transition: transform 0.7s var(--mola);
}
/* reflexo diagonal que passa pelo vidro */
.brilho {
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(112deg, transparent 38%, rgb(255 255 255 / 0.22) 46%, rgb(255 255 255 / 0.05) 52%, transparent 60%);
  transform: translateX(-30%);
  transition: transform 1.2s var(--mola);
  pointer-events: none;
}
.pasta:hover .brilho { transform: translateX(30%); }
/* luz no canto de cima */
.pasta-frente::after {
  content: '';
  position: absolute;
  top: -60%; left: 8%;
  width: 55%; height: 100%;
  background: radial-gradient(ellipse at center, rgb(190 220 255 / 0.28), transparent 65%);
  pointer-events: none;
}
.pasta:hover .pasta-frente { transform: perspective(900px) rotateX(-16deg); }
.pasta-rotulo { position: relative; z-index: 1; padding: 0.25rem 0.7rem; background: rgb(10 20 40 / 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / 0.25); border-radius: 99px; font-size: 0.9rem; color: #fff; }

.selo {
  position: absolute;
  left: -7%; bottom: 7%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul);
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.35);
}
.selo b { font-size: 1.75rem; font-weight: 900; font-stretch: 100%; letter-spacing: -0.04em; }
.selo-texto {
  position: absolute;
  left: calc(-7% + 122px); bottom: 12%;
  z-index: 3;
  font-size: 0.85rem;
  line-height: 1.15;
}

@keyframes subir { from { opacity: 0; transform: translateY(30px); } }

.hero-cantos {
  position: absolute;
  left: var(--borda); right: var(--borda); bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  color: var(--cinza);
  font-size: 0.9rem;
}

/* texto gigante apagado, cortado nas bordas (fica atrás de tudo) */
.hero-fantasma { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-fantasma span {
  position: absolute;
  font-size: 15vw;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: 0.8;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(120 170 255 / 0.16);
  background: linear-gradient(rgb(92 157 237 / 0.12), transparent 75%);
  -webkit-background-clip: text;
  background-clip: text;
}
.f-sup { top: 5.5rem; left: -2.5vw; }
.f-inf { right: -3vw; bottom: -2.2vw; font-weight: 900; letter-spacing: -0.05em; }

@keyframes aparecer { from { opacity: 0; } }

/* ===== TELA 2 — PASTAS DOS ENSAIOS ===== */
.painel {
  position: relative;
  margin: 2rem var(--borda);
  padding: clamp(1.6rem, 5vw, 4rem);
  border-radius: 28px;
  overflow: hidden;
}
.painel-topo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.painel-topo .etiqueta-pixel { width: 100%; }
.painel-titulo, .breve-titulo {
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.painel-titulo { font-size: clamp(2.6rem, 7vw, 6rem); }
.painel-titulo em, .breve-titulo em { font-size: 1.15em; letter-spacing: -0.02em; }
.b-trabalhos { transform: rotate(4deg); }

.galeria {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 1rem;
}
.foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--azul-escuro);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.3);
  cursor: zoom-in;
}
.foto.destaque { grid-column: span 2; grid-row: span 2; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--mola); }
.foto:hover img { transform: scale(1.04); }
.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  pointer-events: none;
}
.selo-video {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  padding: 0.3rem 0.7rem;
  background: var(--azul);
  border-radius: 99px;
  font-size: 0.75rem;
}

.e1 { right: 3%; bottom: -30px; width: 150px; filter: brightness(1.9); opacity: 0.8; }

/* ===== TELA 3 — SOBRE (janela) ===== */
.sobre { padding: 5rem var(--borda); }
.janela {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--preto-2);
  border: 1px solid var(--linha);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.5);
}
.janela-barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.8rem 1.2rem;
  background: #272b2f;
  border-bottom: 1px solid var(--linha);
}
.semaforo { display: flex; gap: 7px; }
.semaforo i { width: 13px; height: 13px; border-radius: 50%; background: #ff5f57; }
.semaforo i:nth-child(2) { background: #febc2e; }
.semaforo i:nth-child(3) { background: #28c840; }
.ferramentas { display: flex; gap: 0.35rem; margin: 0 auto; }
.ferramentas span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #c9ced3; }
.ferramentas .ativa { background: var(--azul-vivo); color: var(--branco); }
.ferramentas svg, .rede-icone svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cor-atual { width: 28px; height: 28px; border-radius: 50%; background: var(--azul-vivo); box-shadow: 0 0 0 3px #272b2f, 0 0 0 4px var(--linha); }

.janela-corpo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 5vw, 3.5rem);
}
.eu { position: relative; aspect-ratio: 1 / 1.05; }
.eu-fundo {
  position: absolute;
  left: 0; bottom: 0;
  width: 82%; height: 70%;
  display: flex;
  align-items: flex-end;
  padding: 0 0 0.1em 0.12em;
  overflow: hidden;
  background: var(--azul);
  border-radius: 20px;
  color: var(--papel);
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.07em;
  line-height: 0.75;
}
.eu img {
  position: absolute;
  right: 0; top: 0;
  width: 62%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 5px solid var(--branco);
  border-radius: 16px;
  transform: rotate(3deg);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.45);
}
.eu-topo { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.4rem; }
.selecao-azul { padding: 0.15rem 0.7rem; background: rgb(92 157 237 / 0.22); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
.carinha { width: 64px; fill: none; stroke: var(--branco); stroke-width: 3.5; stroke-linecap: round; transform: rotate(14deg); }
.eu-nome { font-size: clamp(2.3rem, 4.8vw, 3.8rem); font-weight: 900; font-stretch: 110%; letter-spacing: -0.04em; line-height: 1; }
.pilula {
  display: inline-block;
  margin: 1rem 0 1.4rem;
  padding: 0.45rem 1.1rem;
  background: var(--azul-vivo);
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  transform: rotate(-2deg);
  box-shadow: 0 8px 18px rgb(31 99 200 / 0.4);
}
.eu-texto p { max-width: 30rem; font-size: 1.15rem; color: #d9dcdf; }

.janela-base {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 2.5rem;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.8rem, 5vw, 3.5rem);
}
.janela-base h3 { margin-bottom: 1rem; font-size: 1.6rem; font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; }
.lista-pontos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; list-style: none; }
.lista-pontos li::before { content: '•'; margin-right: 0.6rem; color: #cfe3ff; }
.softwares { display: grid; gap: 0.7rem; list-style: none; }
.softwares li { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; }
.app {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.3);
  transition: transform 0.3s var(--mola);
}
.softwares li:hover .app { transform: rotate(-8deg) scale(1.08); }
.app-davinci { background: #1b1d21; }
.app-davinci svg { width: 32px; height: 32px; }
.app-ae { background: #00005b; color: #9999ff; border: 1.5px solid #9999ff; }
.app-lr { background: #001e36; color: #31a8ff; border: 1.5px solid #31a8ff; font-size: 0.9rem; }
.app-ps { background: #001e36; color: #31a8ff; border: 1.5px solid #31a8ff; }
.rede { display: flex; align-items: center; gap: 0.8rem; padding: 0.45rem 0; font-weight: 600; }
.rede small { font-family: 'Pixelify Sans', monospace; font-weight: 400; opacity: 0.7; }
.rede-icone {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul);
  transition: transform 0.3s var(--mola);
}
.rede:hover .rede-icone { transform: rotate(-12deg) scale(1.1); }

/* ===== TELA 4 — EM BREVE ===== */
.breve {
  position: relative;
  padding: 7rem var(--borda) 8rem;
  overflow: hidden;
  text-align: center;
}
.breve-titulo { margin: 1.5rem 0 2rem; font-size: clamp(3.2rem, 11vw, 9.5rem); }
.vir { position: relative; display: inline-block; isolation: isolate; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-stretch: normal; color: var(--branco); font-size: 1.15em; letter-spacing: -0.02em; }
.vir img { position: absolute; left: -6%; bottom: 0.02em; z-index: -1; width: 112%; height: 0.42em; filter: drop-shadow(0 0 10px rgb(47 123 255 / 0.6)); }
.b-breve { transform: rotate(-3deg); margin-bottom: 2.8rem; }
.instas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.e2 { top: 14%; left: 7%; width: 110px; }
.e3 { bottom: 12%; right: 8%; width: 170px; transform: rotate(18deg); }

/* ===== RODAPÉ ===== */
.rodape {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem var(--borda);
  border-top: 1px solid var(--linha);
  color: var(--cinza);
  font-size: 0.9rem;
}
.rodape .logo { color: var(--branco); }

/* ===== VISOR (foto ampliada) ===== */
/* --glow muda com a cor da imagem aberta (ver script.js) e transiciona suave */
@property --glow { syntax: '<color>'; inherits: true; initial-value: #2f7bff; }
.visor {
  width: 100vw; height: 100dvh;
  max-width: none; max-height: none;
  border: 0;
  overflow: hidden;
  background:
    radial-gradient(50% 45% at 50% 45%, color-mix(in srgb, var(--glow) 24%, transparent), transparent 75%),
    rgb(6 9 15 / 0.94);
  color: var(--branco);
  transition: --glow 0.8s ease;
}
.visor[open] { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; align-items: center; }
.visor::backdrop { background: rgb(6 9 15 / 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.visor-conteudo { grid-column: 2; grid-row: 1; display: grid; place-items: center; height: calc(100dvh - 6.5rem); padding: 1rem; }
.visor-conteudo img, .visor-conteudo video {
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 70px color-mix(in srgb, var(--glow) 50%, transparent), 0 30px 60px rgb(0 0 0 / 0.5);
}
.visor-conteudo iframe { width: min(100%, 1100px); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }

/* botões de vidro */
.visor-seta, .visor-fechar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--mola);
}
.visor-seta:hover, .visor-fechar:hover {
  background: linear-gradient(135deg, #3a86ff, #0353a4);
  border-color: transparent;
  box-shadow: 0 0 28px rgb(47 123 255 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.visor-seta { grid-row: 1; z-index: 2; width: 3.4rem; height: 3.4rem; margin: 0 1.2rem; }
.ant:hover { transform: translateX(-3px); }
.prox:hover { transform: translateX(3px); }
.visor-seta svg, .visor-fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ant { grid-column: 1; }
.prox { grid-column: 3; }
.visor-fechar { position: absolute; top: 1rem; right: 1.2rem; z-index: 3; width: 2.8rem; height: 2.8rem; }
.visor-fechar:hover { transform: rotate(90deg); }

/* contador: pílula de vidro com barra de progresso */
.visor-info {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  padding: 0.55rem 1.2rem;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 99px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.15);
  font-size: 0.9rem;
}
.visor-info b { font-size: 1.15rem; font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
.visor-info .total { color: var(--cinza); font-weight: 500; }
.visor-titulo { padding-right: 0.8rem; border-right: 1px solid rgb(255 255 255 / 0.15); font-weight: 600; color: #c9d6e8; }
.barra { position: relative; width: 90px; height: 3px; border-radius: 99px; background: rgb(255 255 255 / 0.15); overflow: hidden; }
.barra i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--glow); box-shadow: 0 0 10px var(--glow); transition: width 0.4s var(--mola); }

/* seletor slides | inteiro */
.visor-modos {
  position: absolute;
  top: 1rem; left: 50%;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 4px;
  translate: -50% 0;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 99px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.visor-modos[hidden] { display: none; }
.visor-modos button { padding: 0.45rem 1.1rem; border-radius: 99px; font-size: 0.88rem; color: var(--cinza); transition: all 0.25s; }
.visor-modos button:hover { color: var(--branco); }
.visor-modos .on { background: linear-gradient(135deg, #3a86ff, #0353a4); color: #fff; box-shadow: 0 0 18px rgb(47 123 255 / 0.6); }

/* designs: slide atual no centro, vizinhos apagados dos lados */
.modo-design .visor-conteudo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; justify-items: normal; padding: 4.2rem 0 0; overflow: hidden; overflow: clip; }
.palco {
  --alt: min(calc(100dvh - 12rem), 900px); /* altura do slide atual */
  flex: none;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--alt);
  width: max-content;
  transition: transform 0.6s var(--mola);
}
/* slides colados para ver como um continua no outro; os vizinhos ficam menores e escurecidos */
.palco img {
  flex: none;
  height: calc(var(--alt) * 0.8);
  width: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  filter: brightness(0.45) saturate(0.85);
  cursor: pointer;
  box-shadow: none;
  transition: height 0.6s var(--mola), filter 0.5s, box-shadow 0.6s;
}
.palco img:first-child { border-radius: 10px 0 0 10px; }
.palco img:last-child { border-radius: 0 10px 10px 0; }
.palco img:hover { filter: brightness(0.65); }
.palco img.atual {
  position: relative;
  z-index: 1;
  filter: none;
  cursor: default;
  height: var(--alt);
  border-radius: 12px;
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: -1px;
  box-shadow: 0 0 80px color-mix(in srgb, var(--glow) 55%, transparent), 0 30px 60px rgb(0 0 0 / 0.5);
}

/* design inteiro */
.modo-inteiro .visor-seta { visibility: hidden; }
.inteiro { display: grid; place-items: center; height: 100%; padding: 0 2rem; }
.inteiro img { max-width: 100%; max-height: calc(100dvh - 12rem); }

/* ===== ENTRADA SUAVE AO ROLAR ===== */
.revelar { opacity: 0; translate: 0 26px; transition: opacity 0.8s ease, translate 0.8s var(--mola); }
.revelar.visivel { opacity: 1; translate: none; }

/* ===== CELULAR ===== */
@media (max-width: 860px) {
  .topo { grid-template-columns: auto 1fr; }
  .topo-ano { display: none; }
  .menu { gap: 0.65rem; font-size: 0.78rem; }
  .logo { font-size: 0.92rem; }
  .topo { gap: 0.6rem; }

  .hero { padding: 6rem 1rem 11rem; }
  .pasta { width: 94vw; }
  .pf { border-width: 3px; }
  .selo { left: 0; bottom: -22%; width: 76px; height: 76px; }
  .selo b { font-size: 1.2rem; }
  .selo-texto { left: 88px; bottom: -15%; font-size: 0.8rem; }
  .hero-cantos { font-size: 0.8rem; }
  .hero-fantasma span { font-size: 22vw; }
  .f-sup { top: 4.6rem; }

  .painel { margin: 1.5rem 0.6rem; padding: 2rem 1.1rem 1.4rem; border-radius: 20px; }
  .painel-topo { margin-bottom: 2rem; }
  .galeria { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .foto.destaque { grid-column: auto; grid-row: auto; }
  .b-trabalhos { font-size: 1.2rem; }

  .sobre { padding: 3rem 0.6rem; }
  .janela { border-radius: 20px; }
  .janela-corpo, .janela-base { grid-template-columns: 1fr; }
  .janela-corpo { gap: 2rem; padding: 1.6rem 1.3rem 2rem; }
  .janela-base { gap: 2.2rem; padding: 2rem 1.3rem; }
  .janela-base h3 { font-size: 1.4rem; }
  .eu-texto p { font-size: 1.05rem; line-height: 1.6; }
  .lista-pontos { grid-template-columns: 1fr; gap: 0.45rem; }
  .ferramentas span:nth-child(n + 5) { display: none; }
  .eu { max-width: 420px; }

  .e2 { width: 70px; top: 6%; }
  .e3 { width: 100px; bottom: 5%; }


  .visor[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; }
  .visor-conteudo { grid-column: 1 / -1; grid-row: 1; height: calc(100dvh - 10rem); }
  .ant { grid-column: 1; grid-row: 2; justify-self: end; }
  .prox { grid-column: 2; grid-row: 2; justify-self: start; }
  .visor-seta { margin: 0 0.5rem 0.6rem; }
  .visor-info { grid-row: 3; font-size: 0.8rem; }
  .visor-titulo { display: none; }
  .palco { --alt: min(calc(100dvh - 15rem), 88vw); }
  .inteiro { padding: 0 0.6rem; }
}

@media (min-width: 1700px) {
  .hero-titulo { font-size: 6.4vw; }
  .camadas { width: 250px; }
  .camadas a { font-size: 1rem; }
  .selo { width: 128px; height: 128px; }
  .selo b { font-size: 2.05rem; }
  .selo-texto { left: calc(-7% + 140px); font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; translate: none; }
}

/* ===== FUNDO: luzes, grade e granulado ===== */
.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -10%, rgb(31 99 200 / 0.28), transparent 70%),
    linear-gradient(180deg, #0a1020 0%, #080b12 55%, #070a14 100%);
}
/* grade quadriculada que some nas bordas */
.fundo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(120 170 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(120 170 255 / 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
}
/* granulado */
.fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* luzes azuis desfocadas que flutuam devagar */
.bolha {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: vagar 26s ease-in-out infinite alternate;
}
.b1 { width: 46vw; height: 46vw; left: -14vw; top: 8vh; background: #0353a4; }
.b2 { width: 38vw; height: 38vw; right: -12vw; top: 38vh; background: #1f63c8; animation-delay: -9s; opacity: 0.4; }
.b3 { width: 34vw; height: 34vw; left: 30vw; bottom: -18vw; background: #2a4fd6; animation-delay: -17s; opacity: 0.35; }
@keyframes vagar {
  50% { transform: translate(6vw, -5vh) scale(1.1); }
  100% { transform: translate(-4vw, 6vh) scale(0.95); }
}

/* ===== GLOWS E GRADIENTES ===== */
.logo em, .hero-titulo em, .painel-titulo em, .vir-txt {
  /* bloco próprio com folga embaixo para a "perna" do g/p não ser cortada pelo gradiente */
  display: inline-block;
  line-height: 1.2;
  padding: 0 0.08em 0.22em 0;
  margin-bottom: -0.22em;
  background: linear-gradient(100deg, #b9d8ff 0%, #5c9ded 45%, #2f7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
}
.hero-titulo em { filter: drop-shadow(0 0 28px rgb(47 123 255 / 0.55)); text-shadow: none; }
.hero-titulo .selecao { text-shadow: 0 0 40px rgb(120 170 255 / 0.35); }

/* seleção do título: moldura e alças com glow */
.selecao-hero {
  padding: 0.02em 0.1em 0.04em;
  outline: 2px solid #6fb0ff;
  outline-offset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(47 123 255 / 0.16), rgb(47 123 255 / 0.04));
  box-shadow: 0 0 28px rgb(47 123 255 / 0.55), inset 0 0 40px rgb(47 123 255 / 0.18);
}
.selecao-hero > i {
  width: 14px; height: 14px;
  border: 2px solid #2f7bff;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 12px rgb(111 176 255 / 0.95);
}
.selecao-hero > i:nth-of-type(1) { top: -8px; left: -8px; }
.selecao-hero > i:nth-of-type(2) { top: -8px; right: -8px; }
.selecao-hero > i:nth-of-type(3) { bottom: -8px; left: -8px; }
.selecao-hero > i:nth-of-type(4) { bottom: -8px; right: -8px; }
/* cor sólida: no Safari o texto com gradiente corta a perna do "g" de gráfico */
.painel-titulo em { background: none; color: #dcebff; filter: none; text-shadow: 0 0 22px rgb(255 255 255 / 0.4); }
.breve-titulo { text-shadow: 0 0 60px rgb(92 157 237 / 0.25); }
.vir-txt { position: relative; z-index: 1; display: inline-block; background-image: linear-gradient(100deg, #ffffff 30%, #cfe3ff); filter: drop-shadow(0 0 22px rgb(92 157 237 / 0.8)); }

/* holofote de cima e halo atrás da pasta */
.hero-luz {
  background:
    radial-gradient(ellipse 22% 55% at 50% -8%, rgb(220 235 255 / 0.13), transparent 70%),
    radial-gradient(ellipse 42% 36% at 50% 66%, rgb(31 99 200 / 0.6), transparent 72%);
}
.pasta-fundo { box-shadow: 0 0 90px rgb(31 99 200 / 0.55), 0 40px 80px rgb(0 0 0 / 0.55); }
.selo { box-shadow: 0 0 30px rgb(255 255 255 / 0.35), 0 10px 25px rgb(0 0 0 / 0.35); }

/* painel "meus trabalhos" com gradiente e brilho */
.papel-azul {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.09) 1px, transparent 1px),
    radial-gradient(80% 60% at 15% 0%, rgb(120 180 255 / 0.35), transparent 70%),
    linear-gradient(140deg, #0b68d0 0%, #0353a4 45%, #022f66 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
}
.painel { box-shadow: 0 0 80px rgb(31 99 200 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.foto { transition: box-shadow 0.4s, translate 0.8s var(--mola), opacity 0.8s ease; }
.foto:hover { box-shadow: 0 0 0 2px #9cc7ff, 0 0 34px rgb(120 180 255 / 0.75); }

/* janela do sobre */
.janela { box-shadow: 0 0 0 1px rgb(92 157 237 / 0.18), 0 0 90px rgb(31 99 200 / 0.3), 0 40px 90px rgb(0 0 0 / 0.5); }
.janela-corpo { background: radial-gradient(60% 80% at 20% 60%, rgb(31 99 200 / 0.18), transparent 70%); }
.eu-fundo { box-shadow: 0 0 60px rgb(31 99 200 / 0.55); background: linear-gradient(140deg, #1f63c8, #0353a4 50%, #022f66); }
.cor-atual { box-shadow: 0 0 0 3px #272b2f, 0 0 0 4px var(--linha), 0 0 16px rgb(47 123 255 / 0.9); }
.ferramentas .ativa { box-shadow: 0 0 16px rgb(47 123 255 / 0.7); }

/* botões */
.botao-azul {
  background: linear-gradient(135deg, #3a86ff, #0353a4);
  border-color: transparent;
  box-shadow: 0 0 28px rgb(47 123 255 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.botao-azul:hover { background: linear-gradient(135deg, #5a9bff, #1f63c8); box-shadow: 0 0 44px rgb(47 123 255 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.4); }
.botao:not(.botao-azul):hover { box-shadow: 0 0 24px rgb(255 255 255 / 0.18); }
.alfinete { box-shadow: 0 0 12px rgb(92 157 237 / 0.8), 0 4px 6px rgb(0 0 0 / 0.4); }

@media (max-width: 860px) {
  .bolha { filter: blur(60px); }
  .b1 { width: 90vw; height: 90vw; }
  .b2 { width: 80vw; height: 80vw; }
  .b3 { width: 80vw; height: 80vw; }
}

/* ===== CAMADAS (presas na lateral direita da pasta) ===== */
.camadas {
  position: absolute;
  right: -11%; bottom: 7%;
  z-index: 3;
  width: 220px;
  padding: 0.6rem;
  background: rgb(22 26 34 / 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 14px;
  box-shadow: 0 0 40px rgb(31 99 200 / 0.3), 0 20px 40px rgb(0 0 0 / 0.45);
  transform: rotate(3deg);
}
.camadas-titulo { padding: 0.2rem 0.6rem 0.5rem; font-size: 0.75rem; color: var(--cinza); }
.camadas a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: background 0.2s;
}
.camadas a:hover { background: rgb(255 255 255 / 0.07); }
.camadas a.ativa { background: rgb(31 99 200 / 0.35); }
.camadas .check { width: 0.8rem; color: var(--azul-claro); }
.camadas svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.camadas kbd { margin-left: auto; font-family: 'Archivo', sans-serif; font-size: 0.78rem; color: var(--cinza); }

@media (max-width: 860px) {
  .camadas { right: 0; bottom: -46%; width: 180px; padding: 0.45rem; }
  .camadas a { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .camadas kbd { display: none; }
}

/* ===== DESIGN GRÁFICO ===== */
#design { margin-top: 3rem; }
.galeria-design { grid-template-columns: repeat(3, 1fr); }
.foto-design { aspect-ratio: 4 / 5; }
.foto-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(transparent, rgb(5 10 20 / 0.8));
  font-weight: 700;
  text-align: left;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.3s, translate 0.3s;
}
.foto-design:hover .foto-legenda, .foto-design:focus-visible .foto-legenda { opacity: 1; translate: 0 0; }
@media (max-width: 860px) {
  .galeria-design { grid-template-columns: 1fr 1fr; }
  .foto-legenda { opacity: 1; translate: 0 0; font-size: 0.85rem; padding: 1.5rem 0.7rem 0.6rem; }
}

/* ================= ANIMAÇÕES ================= */
/* --mx/--my: posição do mouse na tela inicial (-1 a 1), atualizada com suavidade no script.js */

/* entrada da tela inicial, em sequência */
.hero-titulo .selecao { animation: subir 0.9s 0.1s var(--mola) both; }
.hero-titulo em { animation: subir 0.9s 0.25s var(--mola) both; }
.selecao-hero { animation: subir 0.9s 0.1s var(--mola) both, selecionar 0.7s 0.75s ease-out both; }
@keyframes selecionar { from { outline-color: transparent; box-shadow: none; background: transparent; } }
.selecao-hero > i { animation: alca 0.6s var(--mola) both; }
.selecao-hero > i:nth-of-type(1) { animation-delay: 0.8s; }
.selecao-hero > i:nth-of-type(2) { animation-delay: 0.88s; }
.selecao-hero > i:nth-of-type(3) { animation-delay: 0.96s; }
.selecao-hero > i:nth-of-type(4) { animation-delay: 1.04s; }
@keyframes alca { from { scale: 0; } }

.pasta {
  animation: chegar 1s 0.15s var(--mola) both, flutuar 7s 1.6s ease-in-out infinite alternate;
  transform: perspective(1400px) rotateX(calc(var(--my, 0) * -4deg)) rotateY(calc(var(--mx, 0) * 5deg));
}
@keyframes chegar { from { opacity: 0; translate: 0 40px; } }
@keyframes flutuar { from { top: 0; } to { top: -10px; } }

/* as fotos saem de dentro da pasta, uma de cada vez */
.pf { animation: sair-da-pasta 0.9s var(--mola) both; }
.pf-1 { animation-delay: 0.55s; }
.pf-2 { animation-delay: 0.63s; }
.pf-3 { animation-delay: 0.71s; }
.pf-4 { animation-delay: 0.79s; }
.pf-5 { animation-delay: 0.87s; }
@keyframes sair-da-pasta { from { opacity: 0; translate: 0 45%; } }

.selo { animation: carimbo 0.8s 1.1s var(--mola) both; }
@keyframes carimbo { from { scale: 0; rotate: -120deg; } }
.selo-texto { animation: aparecer 0.6s 1.3s both; }
.camadas { animation: deslizar 0.8s 1.2s var(--mola) both; }
@keyframes deslizar { from { opacity: 0; translate: 50px 0; } }

/* reflexo passa pelo vidro da pasta de tempos em tempos */
.brilho { animation: reflexo 7s 2s ease-in-out infinite; }
@keyframes reflexo { 0%, 70% { translate: 0 0; } 85%, 100% { translate: 60% 0; opacity: 0; } }

/* texto fantasma entra devagar e acompanha o mouse ao contrário (profundidade) */
.hero-fantasma { translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); }
.f-sup { animation: fantasma-esq 1.8s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.f-inf { animation: fantasma-dir 1.8s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes fantasma-esq { from { opacity: 0; translate: -8vw 0; } }
@keyframes fantasma-dir { from { opacity: 0; translate: 8vw 0; } }
.hero-titulo { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 6px); }
.hero-cantos { animation: aparecer 1s 1.4s both; }

/* luz que segue o mouse (só com mouse de verdade) */
.luz-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 0;
  width: 900px; height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  /* queda gaussiana em vários pontos: sem borda nem degraus visíveis */
  background: radial-gradient(circle closest-side, rgb(47 123 255 / 0.1200) 0%, rgb(47 123 255 / 0.1063) 8%, rgb(47 123 255 / 0.0872) 17%, rgb(47 123 255 / 0.0661) 25%, rgb(47 123 255 / 0.0462) 33%, rgb(47 123 255 / 0.0297) 42%, rgb(47 123 255 / 0.0175) 50%, rgb(47 123 255 / 0.0093) 58%, rgb(47 123 255 / 0.0045) 67%, rgb(47 123 255 / 0.0019) 75%, rgb(47 123 255 / 0.0006) 83%, rgb(47 123 255 / 0.0002) 92%, rgb(47 123 255 / 0.0000) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  will-change: transform;
}
.luz-cursor.ligada { opacity: 1; }
@media (hover: none) { .luz-cursor { display: none; } }

/* barra do topo fica mais compacta e de vidro ao rolar */
.topo { transition: padding 0.4s var(--mola), background 0.4s, box-shadow 0.4s; }
.topo.rolou {
  padding-top: 0.7rem; padding-bottom: 0.7rem;
  background: rgb(8 11 18 / 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgb(120 170 255 / 0.15), 0 10px 30px rgb(0 0 0 / 0.3);
}

/* entrada ao rolar: sobe, desfoca → foca, em cascata (atraso definido no script) */
.revelar { transition: opacity 0.9s ease, translate 0.9s var(--mola), filter 0.9s ease, scale 0.9s var(--mola); }
.foto.revelar, .janela.revelar, .instas.revelar { filter: blur(10px); scale: 0.96; }
.foto.revelar.visivel, .janela.revelar.visivel, .instas.revelar.visivel { filter: none; scale: 1; }
.foto.revelar { transition: opacity 0.9s ease, translate 0.9s var(--mola), filter 0.9s ease, scale 0.9s var(--mola), box-shadow 0.4s, transform 0.5s var(--mola); }

/* fotos da galeria inclinam em 3D seguindo o mouse, com reflexo de luz */
.foto { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }
.foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.22), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.foto:hover::before { opacity: 1; }

/* visor: abre com zoom suave e cada foto nova entra com fade */
.visor[open] { animation: aparecer 0.35s ease both; }
.visor[open]::backdrop { animation: aparecer 0.35s ease both; }
.visor[open] .visor-conteudo { animation: abrir-visor 0.55s var(--mola) both; }
@keyframes abrir-visor { from { opacity: 0; scale: 0.92; } }
.visor-conteudo > img { animation: trocar-foto 0.5s var(--mola) both; }
@keyframes trocar-foto { from { opacity: 0; scale: 0.97; filter: blur(6px); } }