/* Sobrenatural: o grimório do pacto. Estante de lombadas, livro 3D que fecha, gira e abre a cada pacto, atmosfera em canvas. */

[data-segmento="sobrenatural"] .sb-palco {
    --livro-w: clamp(350px, min(28vw, (100dvh - 330px) * 0.75), 420px);
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* cena: dois quadros para o crossfade; espelho e filtro vão na img, a tinta na grade de cada quadro */

[data-segmento="sobrenatural"] .sb-quadro { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease-in-out; }
[data-segmento="sobrenatural"] .sb-quadro[data-on="true"] { opacity: 1; }
[data-segmento="sobrenatural"] .sb-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-segmento="sobrenatural"] .sb-palco .cena-veu {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(1, 1, 1, 0.9) 0%, rgba(1, 1, 1, 0.66) 38%, rgba(1, 1, 1, 0.35) 100%),
        linear-gradient(to bottom, rgba(1, 1, 1, 0.55) 0%, rgba(1, 1, 1, 0) 24%, rgba(1, 1, 1, 0) 64%, var(--bg) 100%);
}
[data-segmento="sobrenatural"] .sb-atmos { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
[data-segmento="sobrenatural"] .sb-lua,
[data-segmento="sobrenatural"] .sb-feixe { position: absolute; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 600ms ease; }
[data-segmento="sobrenatural"] .sb-lua {
    left: 57%;
    top: calc(var(--seg-topo) - 2vh);
    width: clamp(140px, 13vw, 250px);
    aspect-ratio: 1;
    background: radial-gradient(circle closest-side, rgba(245, 243, 238, 0.9) 0 30%, rgba(245, 243, 238, 0.28) 34%, rgba(245, 243, 238, 0.08) 60%, transparent 100%);
}
[data-segmento="sobrenatural"] .sb-feixe {
    left: 72%;
    top: -20%;
    width: 16%;
    height: 140%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent 8%, rgba(245, 243, 238, 0.1) 34%, rgba(245, 243, 238, 0.26) 50%, rgba(245, 243, 238, 0.1) 66%, transparent 92%);
    -webkit-mask-image: linear-gradient(transparent 8%, var(--bg) 30%, var(--bg) 58%, transparent 88%);
    mask-image: linear-gradient(transparent 8%, var(--bg) 30%, var(--bg) 58%, transparent 88%);
}
[data-segmento="sobrenatural"] [data-pacto="lobisomens"] .sb-lua { opacity: 0.55; }
[data-segmento="sobrenatural"] [data-pacto="padres"] .sb-feixe { opacity: 1; }

/* miolo do hero */

[data-segmento="sobrenatural"] .sb-miolo {
    position: relative;
    z-index: 1;
    width: var(--largura);
    margin: 0 auto;
    padding: calc(var(--seg-topo) + 3vh) 0 6vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--livro-w) * 2.06);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "titulo titulo" "texto livro" "estante livro";
    gap: 22px 24px;
}
[data-segmento="sobrenatural"] .sb-titulo {
    grid-area: titulo;
    margin: 0;
    font-family: var(--seg-font-titulo);
    font-size: clamp(64px, 8vw, 128px);
    line-height: 0.9;
    letter-spacing: 0.02em;
}
[data-segmento="sobrenatural"] .sb-texto { grid-area: texto; display: grid; gap: 24px; justify-items: start; align-content: start; }
[data-segmento="sobrenatural"] .sb-frase { max-width: 46ch; color: rgba(245, 243, 238, 0.8); font-size: clamp(16px, 1.1vw, 19px); }

/* estante */

[data-segmento="sobrenatural"] .sb-estante-bloco { grid-area: estante; align-self: end; display: grid; justify-items: start; min-width: 0; }
[data-segmento="sobrenatural"] .sb-estante-nome { min-height: 1.1em; font-family: var(--seg-font-nome); font-size: 26px; line-height: 1.1; color: var(--text); }
[data-segmento="sobrenatural"] .sb-estante {
    --lb-w: 40px;
    --lb-h: 240px;
    position: relative;
    display: flex;
    gap: 6px;
    max-width: 100%;
    padding: 30px 2px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
[data-segmento="sobrenatural"] .sb-estante::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(30px + var(--lb-h));
    height: 4px;
    background: var(--text);
    opacity: 0.3;
    -webkit-mask: var(--tex-divider) center / 100% 100% no-repeat;
    mask: var(--tex-divider) center / 100% 100% no-repeat;
}
[data-segmento="sobrenatural"] .sb-lombada { flex: none; display: grid; justify-items: center; gap: 10px; padding: 0; scroll-snap-align: start; }
[data-segmento="sobrenatural"] .sb-lombada:focus-visible { outline: 2px solid var(--seg-foco); outline-offset: 4px; }
[data-segmento="sobrenatural"] .sb-lombada-corpo { position: relative; display: block; width: var(--lb-w); height: var(--lb-h); transition: transform 180ms ease-out; }
[data-segmento="sobrenatural"] .sb-lombada-corpo img { width: 100%; height: 100%; object-fit: cover; }
[data-segmento="sobrenatural"] .sb-lombada-corpo .rule { position: absolute; left: -2px; right: -2px; top: -9px; width: auto; --rule-tex: var(--tex-line-narrow); --rule-opacity: 0; transition: opacity 180ms ease-out; }
[data-segmento="sobrenatural"] .sb-lombada-num { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; line-height: 1; color: rgba(245, 243, 238, 0.5); transition: color 180ms ease-out; }
[data-segmento="sobrenatural"] .sb-lombada:focus-visible .sb-lombada-corpo { transform: translateY(-10px); }
[data-segmento="sobrenatural"] .sb-lombada[aria-checked="true"] .sb-lombada-corpo { transform: translateY(-14px); }
[data-segmento="sobrenatural"] .sb-lombada[aria-checked="true"] .rule { --rule-opacity: 0.6; }
[data-segmento="sobrenatural"] .sb-lombada[aria-checked="true"] .sb-lombada-num { color: var(--red); }
@media (hover: hover) and (pointer: fine) {
    [data-segmento="sobrenatural"] .sb-lombada:not([aria-checked="true"]):hover .sb-lombada-corpo { transform: translateY(-10px); }
    [data-segmento="sobrenatural"] .sb-lombada:hover .sb-lombada-num { color: var(--text); }
}

/* livro: preserve-3d sem filter; a sombra é irmã e só muda opacity */

[data-segmento="sobrenatural"] .sb-livro-area { grid-area: livro; align-self: center; justify-self: end; width: var(--livro-w); }
[data-segmento="sobrenatural"] .sb-livro-palco { position: relative; width: 100%; aspect-ratio: 3 / 4; perspective: 1600px; }
[data-segmento="sobrenatural"] .sb-livro-palco::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -12%;
    bottom: -9%;
    height: 22%;
    background: radial-gradient(closest-side, rgba(1, 1, 1, 0.85), transparent);
}
[data-segmento="sobrenatural"] .sb-livro-sombra {
    position: absolute;
    right: 30%;
    width: 150%;
    top: 6%;
    bottom: -8%;
    opacity: 0.15;
    background: radial-gradient(closest-side, rgba(1, 1, 1, 0.95), rgba(1, 1, 1, 0.4) 60%, transparent);
}
[data-segmento="sobrenatural"] .sb-livro { position: absolute; inset: 0; transform-style: preserve-3d; }
[data-segmento="sobrenatural"] .sb-livro img:not(.sb-marca) { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-segmento="sobrenatural"] .sb-livro img[data-falhou] { visibility: hidden; }
/* Bloco das páginas: gira sobre a lombada (esquerda) e fecha em cima da capa aberta. */
[data-segmento="sobrenatural"] .sb-bloco { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; }
[data-segmento="sobrenatural"] .sb-fundo img { position: absolute; inset: 0; }
[data-segmento="sobrenatural"] .sb-fundo-novo { opacity: 0; }
[data-segmento="sobrenatural"] .sb-esqueleto { position: absolute; inset: 0; opacity: 0.5; --plate-fill: rgba(245, 243, 238, 0.08); }
[data-segmento="sobrenatural"] .sb-contracapa { position: absolute; inset: 0; }
/* Fundo do livro: só aparece com o livro de costas; recuado em Z para ficar na frente de quem olha por trás. */
[data-segmento="sobrenatural"] .sb-fundo { position: absolute; inset: 0; transform: translateZ(-3px) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
[data-segmento="sobrenatural"] .sb-contracapa::after {
    content: "";
    position: absolute;
    top: 1.2%;
    bottom: 1.2%;
    right: 1.1%;
    width: 2.2%;
    background: repeating-linear-gradient(90deg, rgba(245, 243, 238, 0.5) 0 1px, rgba(1, 1, 1, 0.45) 1px 2px);
}
[data-segmento="sobrenatural"] .sb-pagina { position: absolute; inset: 1.6% 2.6% 1.6% 0.8%; }
[data-segmento="sobrenatural"] .sb-pagina { overflow: hidden; isolation: isolate; color: var(--ink); container-type: inline-size; }
[data-segmento="sobrenatural"] .sb-papel { position: absolute; inset: 0; z-index: -1; }
[data-segmento="sobrenatural"] .sb-dobra,
[data-segmento="sobrenatural"] .sb-pag-sombra,
[data-segmento="sobrenatural"] .sb-livro-luz,
[data-segmento="sobrenatural"] .sb-face-luz { position: absolute; inset: 0; pointer-events: none; }
[data-segmento="sobrenatural"] .sb-dobra { background: linear-gradient(90deg, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0.14) 5%, transparent 14%), linear-gradient(270deg, rgba(1, 1, 1, 0.2), transparent 4%); }
[data-segmento="sobrenatural"] .sb-pag-sombra { opacity: 0; background: linear-gradient(90deg, rgba(1, 1, 1, 0.92), rgba(1, 1, 1, 0.6) 55%, rgba(1, 1, 1, 0.35)); }
[data-segmento="sobrenatural"] .sb-livro-luz { opacity: 0.95; mix-blend-mode: screen; background: radial-gradient(110% 80% at 0% 100%, rgba(245, 243, 238, 0.2), transparent 70%); }
[data-segmento="sobrenatural"] .sb-capa { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(-162deg); transition: opacity 300ms ease; }
[data-segmento="sobrenatural"] .sb-livro[data-sem-capa] .sb-capa { opacity: 0; }
[data-segmento="sobrenatural"] .sb-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
[data-segmento="sobrenatural"] .sb-verso { transform: rotateY(180deg); }
[data-segmento="sobrenatural"] .sb-verso::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(1, 1, 1, 0.6), rgba(1, 1, 1, 0.15) 7%, transparent 16%); pointer-events: none; }
[data-segmento="sobrenatural"] .sb-face-luz { inset: 1.5%; opacity: 0; background: linear-gradient(90deg, rgba(1, 1, 1, 0.95), rgba(1, 1, 1, 0.7)); }

/* página: texto em tinta, rubricas em vermelho */

[data-segmento="sobrenatural"] .sb-pag-texto { position: relative; height: 100%; display: flex; flex-direction: column; gap: clamp(5px, 2.6cqi, 16px); padding: 9cqi 6cqi 6cqi 11cqi; }
[data-segmento="sobrenatural"] .sb-marca { position: absolute; right: 6%; bottom: 5%; width: 36%; opacity: 0.13; mix-blend-mode: multiply; pointer-events: none; }
[data-segmento="sobrenatural"] .sb-pag-cab { display: flex; align-items: baseline; gap: 0.35em; font-family: var(--seg-font-nome); font-size: clamp(28px, min(2.6vw, 10cqi), 40px); line-height: 1.05; }
[data-segmento="sobrenatural"] .sb-romano { color: var(--red); }
[data-segmento="sobrenatural"] .sb-pag-nome { margin: 0; font: inherit; }
[data-segmento="sobrenatural"] .sb-pag-fio { --rule-tex: var(--tex-divider); --rule-color: var(--ink); --rule-opacity: 0.45; margin-bottom: 4px; }
[data-segmento="sobrenatural"] .sb-pag-frase { font-size: 16px; line-height: 1.45; }
[data-segmento="sobrenatural"] .sb-pag-frase::first-letter { float: left; margin: 0.04em 0.1em 0 0; font-family: var(--seg-font-nome); font-size: 3.1em; line-height: 0.8; color: var(--red); }
[data-segmento="sobrenatural"] .sb-rot { font-family: var(--font-display); font-size: 12px; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
[data-segmento="sobrenatural"] .sb-pag-bloco { display: grid; gap: 2px; }
[data-segmento="sobrenatural"] .sb-vertentes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; font-family: var(--seg-font-nome); font-size: 21px; line-height: 1.25; }
[data-segmento="sobrenatural"] .sb-vertentes li { display: flex; align-items: center; gap: 7px; }
[data-segmento="sobrenatural"] .sb-vertentes li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: -2px; background: var(--red); -webkit-mask: var(--ico-diamante) center / contain no-repeat; mask: var(--ico-diamante) center / contain no-repeat; }
[data-segmento="sobrenatural"] .sb-pag-magias { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
[data-segmento="sobrenatural"] .sb-pag-magias b { margin-right: 0.3em; font-family: var(--seg-font-nome); font-size: 32px; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
[data-segmento="sobrenatural"] .sb-destaques { list-style: none; margin: -2px 0 0; padding: 0; display: grid; font-family: var(--seg-font-nome); font-size: clamp(22px, 1.3vw, 24px); line-height: 1.2; }
[data-segmento="sobrenatural"] [data-fase] .sb-pag-texto .sb-l,
[data-segmento="sobrenatural"] [data-fase="fechado"] .sb-livro,
[data-segmento="sobrenatural"] [data-fase="fechado"] .sb-livro-sombra,
[data-segmento="sobrenatural"] [data-fase="fechado"] .sb-lombada { opacity: 0; }
[data-segmento="sobrenatural"] [data-fase="fechado"] .sb-capa { transform: rotateY(0deg); }

/* o que vem no pacote */

[data-segmento="sobrenatural"] .sb-pacote { --seg-card-fill: rgba(24, 20, 17, 0.94); width: var(--largura); margin: 0 auto; padding: 8vh 0 14vh; display: grid; gap: 26px; }
[data-segmento="sobrenatural"] .sb-secao-titulo { margin: 0; font-family: var(--seg-font-titulo); font-size: clamp(36px, 3.2vw, 56px); line-height: 1; letter-spacing: 0.02em; }
[data-segmento="sobrenatural"] .sb-secao-fio { width: min(380px, 70vw); }
[data-segmento="sobrenatural"] .sb-entradas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 10px; }
[data-segmento="sobrenatural"] .sb-entrada {
    --plate-tex: var(--seg-card-tex);
    --plate-slice: var(--seg-card-slice);
    --plate-fill: var(--seg-card-fill);
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 44px 44px 36px;
    color: var(--seg-card-cor);
    transition: transform 180ms ease-out;
}
[data-segmento="sobrenatural"] .sb-entrada:active { transform: scale(0.985); }
[data-segmento="sobrenatural"] .sb-selo { display: block; width: 56px; height: 56px; }
[data-segmento="sobrenatural"] .sb-selo img { width: 56px; height: 56px; object-fit: contain; }
[data-segmento="sobrenatural"] .sb-selo .ico { --ico-size: 44px; --ico-color: rgba(245, 243, 238, 0.7); margin: 6px; }
[data-segmento="sobrenatural"] .sb-entrada-nome { margin: 0; font-family: var(--seg-font-nome); font-size: 30px; line-height: 1.1; }
[data-segmento="sobrenatural"] .sb-entrada-tag { max-width: 56ch; color: var(--text-dim); font-size: 15px; }
[data-segmento="sobrenatural"] .sb-entrada-feat { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
[data-segmento="sobrenatural"] .sb-entrada-feat li { display: flex; gap: 10px; }
[data-segmento="sobrenatural"] .sb-entrada-feat .ico { --ico-size: 12px; --ico-color: var(--red); margin-top: 6px; }
[data-segmento="sobrenatural"] .sb-entrada-pe { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; padding-top: 18px; }
[data-segmento="sobrenatural"] .sb-entrada-pe::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--text);
    opacity: 0.14;
    -webkit-mask: var(--tex-line-narrow) center / 100% 100% no-repeat;
    mask: var(--tex-line-narrow) center / 100% 100% no-repeat;
}
[data-segmento="sobrenatural"] .sb-ver { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); transition: color 150ms ease; }
[data-segmento="sobrenatural"] .sb-ver .ico { --ico-size: 10px; --ico-color: var(--red); transition: transform 150ms ease-out; }
[data-segmento="sobrenatural"] .sb-vazio .sb-entrada { opacity: 0.3; min-height: 180px; }
[data-segmento="sobrenatural"] .sb-vazio-txt { grid-column: 1 / -1; color: var(--text-dim); }
@media (hover: hover) and (pointer: fine) {
    [data-segmento="sobrenatural"] a.sb-entrada:hover { --plate-fill: rgba(34, 29, 25, 0.96); transform: translateY(-3px); }
    [data-segmento="sobrenatural"] a.sb-entrada:hover .sb-ver { color: var(--text); }
    [data-segmento="sobrenatural"] a.sb-entrada:hover .sb-ver .ico { transform: translateX(4px); }
}
[data-segmento="sobrenatural"] .sb-pacote[data-revelar] .sb-entrada:not([data-visto]),
[data-segmento="sobrenatural"] .sb-pacote[data-revelar] .sb-numeros:not([data-visto]) { opacity: 0; }

[data-segmento="sobrenatural"] .sb-numeros { --vao: clamp(40px, 9vw, 160px); display: flex; justify-content: center; align-items: center; gap: var(--vao); padding: 7vh 0 1vh; }
[data-segmento="sobrenatural"] .sb-num { position: relative; display: grid; justify-items: center; gap: 8px; }
[data-segmento="sobrenatural"] .sb-num b { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
[data-segmento="sobrenatural"] .sb-num span { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
[data-segmento="sobrenatural"] .sb-num + .sb-num::before {
    content: "";
    position: absolute;
    left: calc(var(--vao) / -2 - 2px);
    top: 50%;
    width: 4px;
    height: 92px;
    translate: 0 -50%;
    background: var(--text);
    opacity: 0.22;
    -webkit-mask: var(--tex-vline) center / 100% 100% no-repeat;
    mask: var(--tex-vline) center / 100% 100% no-repeat;
}
[data-segmento="sobrenatural"] .sb-fecho { justify-self: center; max-width: 46ch; margin-top: 2vh; text-align: center; font-family: var(--seg-font-nome); font-size: clamp(22px, 1.8vw, 28px); line-height: 1.3; color: rgba(245, 243, 238, 0.78); }

@media (max-width: 1080px) and (min-width: 761px) {
    [data-segmento="sobrenatural"] .sb-palco { --livro-w: 380px; }
    [data-segmento="sobrenatural"] .sb-miolo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "titulo" "texto" "livro" "estante"; }
    [data-segmento="sobrenatural"] .sb-livro-area { justify-self: start; margin: 12px 0 24px 50%; }
}

@media (max-width: 760px) {
    [data-segmento="sobrenatural"] .sb-palco { --livro-w: min(86vw, 330px); }
    [data-segmento="sobrenatural"] .sb-miolo {
        width: calc(100% - 32px);
        padding: calc(var(--seg-topo) + 28px) 0 40px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "titulo" "texto" "livro" "estante";
        gap: 22px;
    }
    [data-segmento="sobrenatural"] .sb-titulo { font-size: min(64px, 15.6vw); }
    [data-segmento="sobrenatural"] .sb-livro-area { justify-self: center; margin: 12px 0 18px; }
    [data-segmento="sobrenatural"] .sb-estante-bloco { justify-self: center; }
    [data-segmento="sobrenatural"] .sb-estante { --lb-w: 30px; --lb-h: 180px; }
    [data-segmento="sobrenatural"] .sb-pag-texto { gap: 5px; padding: 8cqi 5cqi 5cqi 10cqi; }
    [data-segmento="sobrenatural"] .sb-destaques { line-height: 1.05; }
    [data-segmento="sobrenatural"] .sb-entradas { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    [data-segmento="sobrenatural"] .sb-entrada { padding: 34px 26px 28px; }
    [data-segmento="sobrenatural"] .sb-num b { font-size: clamp(40px, 11vw, 56px); }
    [data-segmento="sobrenatural"] .sb-numeros { --vao: 34px; }
    [data-segmento="sobrenatural"] .sb-num + .sb-num::before { height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-segmento="sobrenatural"] .sb-quadro { transition-duration: 200ms; }
    [data-segmento="sobrenatural"] .sb-lombada-corpo,
    [data-segmento="sobrenatural"] .sb-lombada-corpo .rule,
    [data-segmento="sobrenatural"] .sb-lombada-num,
    [data-segmento="sobrenatural"] .sb-entrada,
    [data-segmento="sobrenatural"] .sb-capa,
    [data-segmento="sobrenatural"] .sb-lua,
    [data-segmento="sobrenatural"] .sb-feixe,
    [data-segmento="sobrenatural"] .sb-ver,
    [data-segmento="sobrenatural"] .sb-ver .ico { transition: none; }
}