/* ==========================================================
   LOJA DA FICÇÃO — vitrine fixa (sem 3D em tempo real)
   Carregado depois do ilha.css: cores de loja premium
   (nogueira escura e ouro) e a vitrine de anúncio no topo,
   com os produtos em 3D parado, feitos só com CSS.
========================================================== */

:root {
    --noite: #120d0a;
    --noite-2: #1a130e;
    --violeta: #2a1f17;
    --violeta-2: #36281d;
    --vidro: rgba(24, 17, 12, 0.66);
    --vidro-forte: rgba(20, 14, 10, 0.9);
    --borda: rgba(255, 220, 160, 0.16);
    --latao: #c9a25a;
}

body { background: var(--noite); }

.topo { background: linear-gradient(180deg, rgba(14, 9, 6, 0.7), rgba(14, 9, 6, 0)); }
body.rolou .topo { background: rgba(20, 14, 10, 0.88); }

.acervo {
    background:
        linear-gradient(180deg, var(--noite), rgba(16, 16, 20, 0) 220px),
        radial-gradient(80% 45% at 50% 12%, rgba(255, 170, 80, 0.12), rgba(255, 170, 80, 0)),
        var(--noite);
}

/* ---------------- a vitrine do topo ---------------- */

.vitrine {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    min-height: min(100svh, 860px);
    padding: calc(var(--topo) + 24px) var(--margem) 48px;
    overflow: hidden;
    isolation: isolate;
}

.vitrine-fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(42% 55% at 68% 38%, rgba(255, 196, 110, 0.26), rgba(255, 196, 110, 0) 70%),
        radial-gradient(60% 40% at 20% 100%, rgba(120, 60, 20, 0.35), rgba(120, 60, 20, 0) 70%),
        linear-gradient(180deg, #1b130d 0%, #140e0a 55%, #0e0a07 100%);
}
/* feixes de luz vindos do alto, como numa vitrine iluminada */
.vitrine-fundo::before {
    content: "";
    position: absolute;
    inset: -10% 0 20% 30%;
    background:
        conic-gradient(from 188deg at 62% -8%,
            rgba(255, 214, 150, 0) 0deg, rgba(255, 214, 150, 0.1) 8deg, rgba(255, 214, 150, 0) 14deg,
            rgba(255, 214, 150, 0) 22deg, rgba(255, 214, 150, 0.08) 28deg, rgba(255, 214, 150, 0) 34deg,
            rgba(255, 214, 150, 0) 360deg);
    filter: blur(6px);
}
/* grão fino, para a luz não ficar "plástica" */
.vitrine-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 230, 190, 0.08) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

.vitrine-texto { position: relative; z-index: 2; max-width: 560px; }
.vitrine-texto h1 {
    margin: 0 0 16px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: clamp(36px, 5.2vw, 66px);
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-wrap: balance;
}
.vitrine-texto h1 em {
    font-style: normal;
    background: linear-gradient(180deg, #fff3cf, var(--ouro) 60%, #e9a94a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(255, 210, 122, 0.4));
}
.vitrine-sub { margin: 0 0 24px; max-width: 470px; color: var(--texto-2); font-size: 17px; }
.vitrine-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 26px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
}
.vitrine-numeros strong { color: var(--ouro); font-weight: 700; }
.vitrine-numeros:empty { display: none; }

/* ---------------- o palco (onde os produtos ficam de pé) ---------------- */

.expositor {
    position: relative;
    height: clamp(420px, 62vh, 620px);
}
.expositor-itens { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

/* arco dourado ao fundo: lembra a janela da biblioteca */
.expositor-arco {
    position: absolute;
    left: 50%;
    bottom: 30%;
    width: 64%;
    height: 78%;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 210, 122, 0.22);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    background: radial-gradient(60% 70% at 50% 60%, rgba(255, 200, 120, 0.16), rgba(255, 200, 120, 0) 70%);
    box-shadow: inset 0 0 0 10px rgba(255, 210, 122, 0.03), 0 0 60px -20px rgba(255, 200, 120, 0.3);
}
.expositor-arco::before {
    content: "";
    position: absolute;
    inset: 14px 14px 0;
    border: 1px solid rgba(255, 210, 122, 0.1);
    border-bottom: 0;
    border-radius: inherit;
}

/* chão escuro e brilhante com a mancha de luz do holofote */
.expositor-chao {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: 0;
    height: 36%;
    background:
        radial-gradient(46% 60% at 50% 18%, rgba(255, 205, 130, 0.28), rgba(255, 205, 130, 0) 70%),
        linear-gradient(180deg, rgba(60, 40, 24, 0.9), rgba(14, 10, 7, 0.2) 70%, rgba(14, 10, 7, 0));
    border-top: 1px solid rgba(255, 214, 150, 0.22);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---------------- cada produto no palco ---------------- */

.peca {
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    z-index: var(--z, 1);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.peca.pronta { opacity: 1; }
.peca.fundo-palco .placa { visibility: hidden; }

.peca-botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.peca-botao:hover,
.peca-botao:focus-visible { transform: translateY(-8px); }
.peca-botao:focus-visible { outline: none; }
.peca-botao:focus-visible .placa { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* reflexo no chão (Chrome, Edge, Safari; no Firefox fica só a sombra) */
.peca-reflexo { -webkit-box-reflect: below 1px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.16)); }

/* sombra de contato */
.peca-sombra {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 120%;
    height: 26px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}
.peca-corpo { position: relative; }

/* plaquinha de latão com o universo */
.placa {
    margin-top: 16px;
    max-width: 180px;
    padding: 4px 10px;
    border-radius: 4px;
    background: linear-gradient(180deg, #e8c77f, #b88d44 55%, #9c7433);
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.7), 0 6px 14px -6px rgba(0, 0, 0, 0.8);
    color: #2a1a08;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* selo "destaque do dia" em cima da peça do meio */
.peca-selo {
    position: absolute;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(20, 14, 10, 0.86);
    border: 1px solid rgba(255, 210, 122, 0.5);
    color: var(--ouro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 24px -6px rgba(255, 196, 90, 0.6);
}

/* ---------------- livro em 3D (capa, lombada, páginas) ---------------- */

.livro3d {
    position: relative;
    width: var(--w);
    height: var(--h);
    perspective: calc(var(--h) * 5);
}
.livro3d-corpo {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-5deg) rotateY(var(--giro, 24deg));
}
.livro3d .face {
    position: absolute;
    left: 50%;
    top: 50%;
    backface-visibility: hidden;
}
.livro3d .frente,
.livro3d .verso {
    width: var(--w);
    height: var(--h);
    margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
    border-radius: 1px 3px 3px 1px;
    overflow: hidden;
}
.livro3d .frente { transform: translateZ(calc(var(--d) / 2)); background: #2a2018; }
.livro3d .frente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* dobra da capa perto da lombada + brilho de plástico */
.livro3d .frente::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(255, 255, 255, 0.16) 2.2%, rgba(0, 0, 0, 0.12) 4.5%, rgba(0, 0, 0, 0) 9%),
        linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 240, 210, 0.08), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}
.livro3d .verso { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #1c140e; }
.livro3d .lombada {
    width: var(--d);
    height: var(--h);
    margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2);
    transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
    background-color: var(--cor-lombada, #3a2a1c);
    background-size: auto 100%;
    background-position: left center;
    border-radius: 2px 0 0 2px;
    overflow: hidden;
}
.livro3d .lombada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(0, 0, 0, 0.35));
}
.livro3d .paginas {
    width: calc(var(--d) - 2px);
    height: calc(var(--h) - 6px);
    margin: calc((var(--h) - 6px) / -2) 0 0 calc((var(--d) - 2px) / -2);
    transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 2px));
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.2)),
        repeating-linear-gradient(90deg, #f3ead6 0 1px, #d8caac 1px 2px);
}
.livro3d .topo-livro {
    width: calc(var(--w) - 3px);
    height: calc(var(--d) - 2px);
    margin: calc((var(--d) - 2px) / -2) 0 0 calc((var(--w) - 3px) / -2);
    transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px));
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 30%),
        repeating-linear-gradient(0deg, #f6eedc 0 1px, #dccfb3 1px 2px);
}
/* quadro (foto que não deu para recortar): moldura clara, foto inteira */
.livro3d.quadro .frente { background: #fbf8f2; }
.livro3d.quadro .frente img { object-fit: contain; padding: 8%; }
.livro3d.quadro .frente::after {
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.22) 42%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    box-shadow: inset 0 0 0 6px #2a1d12, inset 0 0 0 7px rgba(255, 214, 150, 0.5);
}
.livro3d.quadro .lombada,
.livro3d.quadro .paginas,
.livro3d.quadro .topo-livro { background: linear-gradient(90deg, #2a1d12, #4a3420 50%, #2a1d12); }
.livro3d.quadro .lombada::after { display: none; }

/* ---------------- objeto recortado (Funko, figura, caneca...) ---------------- */

.objeto3d {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: var(--w);
    height: var(--h);
}
.objeto3d img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    filter:
        drop-shadow(0 -1px 0 rgba(255, 228, 170, 0.35))
        drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55));
}
/* pedestal: disco de pedra escura com aro de latão */
.objeto3d-base {
    position: absolute;
    left: 50%;
    bottom: calc(var(--h) * -0.06);
    width: calc(var(--w) * 0.96);
    height: calc(var(--w) * 0.2);
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(60% 60% at 50% 38%, rgba(255, 220, 160, 0.25), rgba(255, 220, 160, 0) 70%),
        linear-gradient(180deg, #3b2a1d, #140e0a);
    box-shadow:
        inset 0 2px 0 rgba(255, 214, 150, 0.45),
        inset 0 -4px 10px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(201, 162, 90, 0.55),
        0 14px 24px -10px rgba(0, 0, 0, 0.9);
}

/* ---------------- anúncios por universo ---------------- */

.universos {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 72px var(--margem) 20px;
}
.universos-cabeca { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.universos-cabeca h2 {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.1;
    text-wrap: balance;
}
.universos-cabeca h2 em { font-style: normal; color: var(--ouro); }

.anuncios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.anuncio {
    --cor: var(--ouro);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    min-height: 340px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--cor) 32%, transparent);
    background:
        radial-gradient(55% 75% at 72% 45%, color-mix(in srgb, var(--cor) 24%, transparent), transparent 72%),
        linear-gradient(160deg, #22180f, #140e0a 70%);
    box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--cor) 60%, transparent);
}
.anuncio.largo { grid-column: 1 / -1; min-height: 400px; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }

/* símbolo grande e apagado ao fundo */
.anuncio-marca {
    position: absolute;
    right: -30px;
    top: -30px;
    z-index: -1;
    width: 240px;
    height: 240px;
    color: var(--cor);
    opacity: 0.07;
}

.anuncio-texto { position: relative; z-index: 2; padding: 30px 8px 30px 30px; }
.anuncio-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cor);
}
.anuncio-selo svg { width: 18px; height: 18px; }
.anuncio h3 {
    margin: 0 0 8px;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.anuncio-lista { margin: 0 0 18px; color: var(--texto-2); font-size: 14.5px; }
.anuncio-botao {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
    border-color: color-mix(in srgb, var(--cor) 45%, transparent);
}
.anuncio-botao:hover { border-color: var(--cor); }
.anuncio-botao span { transition: transform 0.2s ease; }
.anuncio-botao:hover span { transform: translateX(3px); }

.anuncio .expositor { align-self: stretch; height: auto; min-height: 300px; }
.anuncio.largo .expositor { min-height: 380px; }
.anuncio .expositor-chao { height: 30%; }
.anuncio .expositor-chao {
    background:
        radial-gradient(46% 60% at 50% 18%, color-mix(in srgb, var(--cor) 26%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(50, 34, 22, 0.8), rgba(14, 10, 7, 0) 80%);
    border-top-color: color-mix(in srgb, var(--cor) 30%, transparent);
}
.anuncio .placa { max-width: 150px; font-size: 10px; margin-top: 12px; }

/* sem JavaScript: fica só o texto */
html:not(.js) .expositor,
html:not(.js) .universos { display: none; }
html:not(.js) .vitrine { grid-template-columns: 1fr; min-height: 70vh; }

/* ---------------- telas menores ---------------- */

@media (max-width: 960px) {
    .vitrine {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-top: calc(var(--topo) + 28px);
        padding-bottom: 20px;
        gap: 8px;
    }
    .vitrine-texto { max-width: 640px; }
    .expositor-grande { height: clamp(340px, 62vw, 480px); }
    .anuncio,
    .anuncio.largo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

@media (max-width: 720px) {
    .anuncios { grid-template-columns: 1fr; gap: 14px; }
    .anuncio,
    .anuncio.largo { grid-template-columns: 1fr; min-height: 0; }
    .anuncio-texto { padding: 24px 22px 0; }
    .anuncio .expositor,
    .anuncio.largo .expositor { min-height: 0; height: 250px; }
    .anuncio-marca { width: 180px; height: 180px; }
    .universos { padding-top: 48px; }
    .expositor .fundo-palco { display: none; }
}

@media (max-width: 520px) {
    .vitrine-sub { font-size: 16px; }
    .expositor-grande { height: 330px; }
    .placa { font-size: 10px; padding: 3px 8px; max-width: 120px; }
    .peca-selo { top: -30px; font-size: 10px; padding: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .peca { transition: none; }
    .peca-botao { transition: none; }
}