/* Visual das páginas de Masks (aprovado em 17/10/2026): bordô e ouro, MASKS em Cinzel, Naise Minas em Imperial Script */
:root {
  --bg1: #2a080f; --bg2: #561a26; --card: #3a1018; --linha: #8a4a3e;
  --m1: #fff4dc; --m2: #e7c58a; --m3: #9b6d34; --m4: #fbe6bd;
  --acento: #e9c98f; --texto: #f8eadb; --suave: #cfae93; --botao-txt: #3a1206;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--texto);
  font-family: "Cormorant Garamond", Georgia, serif;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--bg2), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--bg2), transparent 75%),
    var(--bg1);
  background-attachment: fixed;
}
a { color: inherit; }
.pagina { max-width: 1180px; margin: 0 auto; padding: 22px 16px 40px; }

/* topo */
.topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.voltar {
  font-family: Cinzel, serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--suave); padding: 9px 16px; border: 1px solid var(--linha); border-radius: 2px; transition: .3s;
}
.voltar:hover { color: var(--acento); border-color: var(--acento); }

/* cabeçalho: MASKS grande e Naise Minas menor, embaixo à direita */
header { text-align: center; padding: 30px 0 6px; }
.marca { display: inline-flex; flex-direction: column; align-items: center; }
.marca h1, .marca .assina {
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%),
    linear-gradient(180deg, var(--m1) 0%, var(--m2) 40%, var(--m3) 58%, var(--m4) 78%, var(--m2) 100%);
  background-size: 250% 100%, 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,255,255,.08));
  animation: brilho 6s ease-in-out infinite;
}
.marca h1 {
  font-family: "Cinzel Decorative", serif; font-size: clamp(46px, 9.5vw, 96px); font-weight: 700; letter-spacing: .06em;
  line-height: 1.1; margin: 0; padding: .1em .4em 0;
}
.marca .assina {
  order: 2; align-self: flex-end; margin: -.35em .2em 0 0; padding: 0 .3em;
  font-family: "Imperial Script", cursive; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.2;
}
@keyframes brilho { 0%, 20% { background-position: 160% 0, 0 0; } 80%, 100% { background-position: -60% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .marca h1, .marca .assina { animation: none; } }
.ornamento { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px auto 0; color: var(--acento); }
.ornamento i { height: 1px; width: min(200px, 26vw); background: linear-gradient(90deg, transparent, var(--acento)); }
.ornamento i:last-child { transform: scaleX(-1); }
.ornamento b { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--acento); }
.frase { font-style: italic; font-size: 21px; color: var(--suave); margin: 14px 0 0; }

/* páginas: losangos */
.paginas { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin: 30px 0 34px; }
.paginas a {
  width: 42px; height: 42px; display: grid; place-items: center; text-decoration: none;
  transform: rotate(45deg); border: 1px solid var(--acento); transition: .3s;
}
.paginas a span { transform: rotate(-45deg); font-family: Cinzel, serif; font-size: 14px; font-weight: 600; }
.paginas a:hover { background: var(--acento); color: var(--botao-txt); box-shadow: 0 0 18px var(--acento); }
.paginas a.atual { background: linear-gradient(135deg, var(--m1), var(--m2) 50%, var(--m3)); color: var(--botao-txt); border-color: transparent; }

/* grade de masks: cada uma numa moldura de quadro */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 26px; }
.mask {
  position: relative; padding: 12px 12px 16px; background: var(--card);
  border: 1px solid var(--linha); transition: transform .35s, box-shadow .35s, border-color .35s;
}
.mask::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--linha); opacity: .55; pointer-events: none; }
.mask:hover { transform: translateY(-6px); border-color: var(--acento); box-shadow: 0 24px 40px -22px #000, 0 0 0 1px var(--acento); }
.foto { position: relative; display: flex; align-items: center; justify-content: center; height: 300px; background: #000; overflow: hidden; }
.foto img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .6s; }
.mask:hover .foto img { transform: scale(1.04); }
.foto .baixe {
  position: absolute; inset: auto 0 0 0; padding: 14px; text-align: center;
  font-family: Cinzel, serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .35s;
}
.mask:hover .foto .baixe { opacity: 1; }
.rodape-card { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 0 4px; }
.num { font-family: Cinzel, serif; font-size: 15px; letter-spacing: .12em; color: var(--acento); }
.baixar {
  font-family: Cinzel, serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 8px 16px; color: var(--botao-txt);
  background: linear-gradient(135deg, var(--m1), var(--m2) 50%, var(--m3)); transition: .3s;
}
.baixar:hover { box-shadow: 0 0 16px var(--acento); }
.baixar:focus-visible, .paginas a:focus-visible, .voltar:focus-visible, .seta:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.vazio { grid-column: 1 / -1; text-align: center; font-size: 26px; font-style: italic; color: var(--suave); padding: 40px 0; }

/* anterior / índice / próxima */
.navega { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 40px 0 0; }
.seta {
  font-family: Cinzel, serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 11px 22px; border: 1px solid var(--acento); color: var(--acento); transition: .3s;
}
.seta:hover { background: var(--acento); color: var(--botao-txt); }

/* índice: vitrine com algumas masks */
.vitrine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; }
@media (max-width: 600px) { .vitrine { grid-template-columns: repeat(2, 1fr); } }
.vitrine a { display: block; aspect-ratio: 3 / 4; background: #000; border: 1px solid var(--linha); overflow: hidden; transition: .35s; }
.vitrine img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.vitrine a:hover { border-color: var(--acento); transform: translateY(-4px); }
.vitrine a:hover img { transform: scale(1.06); }
/* índice: 4 molduras que viram (giram) uma de cada vez mostrando outra mask */
.giro { max-width: 1000px; margin: 6px auto 0; text-align: center; }
/* índice: título e páginas à esquerda, quadro que troca à direita */
.abertura { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; max-width: 1000px; margin: 10px auto 0; }
.abertura header { padding-top: 10px; }
@media (max-width: 820px) { .abertura { grid-template-columns: 1fr; } }
.giro-linha { display: grid; grid-template-columns: min(100%, 400px); justify-content: center; gap: 18px; perspective: 1200px; }
.giro-moldura {
  position: relative; display: block; padding: 10px 10px 12px; background: var(--card); border: 1px solid var(--linha); text-decoration: none;
  transition: transform .45s ease-in, border-color .3s, box-shadow .3s;
}
.giro-moldura::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--linha); opacity: .55; pointer-events: none; }
.giro-moldura.vira { transform: rotateY(90deg); }
.giro-moldura:hover { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), 0 20px 34px -20px #000; }
.giro-foto { display: flex; align-items: center; justify-content: center; height: 330px; background: #000; overflow: hidden; }
.giro-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.giro-moldura .num { display: block; margin-top: 10px; font-size: 14px; }
.giro-dica { font-style: italic; font-size: 17px; color: var(--suave); margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .giro-moldura { transition: none; } }
@media (max-width: 760px) { .giro-foto { height: 280px; } }
.giro .giro-foto img { cursor: pointer; }
/* lupa: mask grande que acompanha o mouse (lupa_masks.js) */
.lupa {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0;
  padding: 5px; background: var(--card); border: 1px solid var(--acento);
  box-shadow: 0 0 0 4px var(--bg1), 0 0 0 5px var(--linha), 0 30px 60px -20px #000;
  transition: opacity .25s;
}
.lupa.mostra { opacity: 1; }
.lupa img { display: block; max-width: min(300px, 30vw); max-height: 300px; background: #000; }
.foto img { cursor: zoom-in; }

.chamada { text-align: center; font-family: Cinzel, serif; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--suave); margin: 0 0 6px; }

footer { margin-top: 50px; text-align: center; font-family: Cinzel, serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
@media (max-width: 520px) { .foto { height: 250px; } .paginas { gap: 16px; } }