:root {
    color-scheme: dark;
    --fundo: #0a090b;
    --superficie: #171619;
    --elevado: #222024;
    --borda: #312e33;
    --texto: #f5f0f4;
    --suave: #bab2bc;
    --rosa: #ffa8d1;
    --rosa-forte: #ff91c9;
    --largura: 1250px;
    --margem: max(clamp(16px, 4vw, 44px), env(safe-area-inset-left), env(safe-area-inset-right));
    font: 16px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); color: var(--texto); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
button, a, input { touch-action: manipulation; }
svg { width: 20px; height: 20px; display: block; flex: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; }
.so-leitor, .pular:not(:focus) { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.pular:focus { position: fixed; z-index: 40; top: 10px; left: 10px; padding: 10px 16px; color: var(--fundo); background: var(--rosa); border-radius: 12px; }

.barra { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #ffffff15; background: #0a090bf2; backdrop-filter: blur(18px); padding-top: env(safe-area-inset-top); }
.barra-conteudo { min-height: 76px; width: min(calc(100% - 2 * var(--margem)), var(--largura)); margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.marca { width: max-content; font: italic 700 30px/.93 Georgia, serif; letter-spacing: -1.5px; color: var(--rosa); }
.marca > span { display: inline-block; font: normal 14px/1 system-ui, sans-serif; margin-left: 4px; vertical-align: top; }
.marca small { display: block; margin-top: 5px; color: var(--suave); font: 650 9px/1.1 system-ui, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.navegacao-desktop, .barra-acoes { display: flex; align-items: center; gap: 5px; }
.barra-acoes { justify-self: end; gap: 8px; }
.navegacao-desktop a, .barra-acoes > *, .voltar-mobile {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    padding: 0 14px; border-radius: 999px; font-size: .86rem; font-weight: 640;
    color: var(--suave); background: transparent; white-space: nowrap;
}
.navegacao-desktop a[aria-current], .navegacao-desktop a:hover { color: var(--texto); background: var(--elevado); }
.navegacao-desktop a[aria-current] svg { color: var(--rosa); }
.barra-acoes > * { background: var(--superficie); border: 1px solid var(--borda); }
.barra-acoes > *:hover, .voltar-mobile:hover { background: var(--elevado); color: var(--texto); }
.voltar-mobile, .navegacao-mobile { display: none; }

main { width: min(calc(100% - 2 * var(--margem)), var(--largura)); margin: 30px auto 66px; }
main, #explorar, #buscar, .cartao, #destaques { scroll-margin-top: 90px; }
.entrada { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.entrada h1, .ficha h1 { font-size: clamp(1.8rem, 3.65vw, 3.15rem); line-height: 1.06; letter-spacing: -.055em; font-weight: 750; overflow-wrap: anywhere; }
.entrada p { margin-top: 8px; color: var(--suave); font-size: .94rem; }
.acervo-contagem { color: var(--suave); white-space: nowrap; font-size: .81rem; margin-bottom: 2px; }
.acervo-contagem span { color: var(--rosa); margin-inline: 5px; }

.secao-destaques { margin-bottom: 14px; }
.destaques { position: relative; overflow: hidden; border-radius: 24px; background: #20171e; border: 1px solid #ffffff22; }
.destaque { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: clamp(168px, 25svh, 235px); }
.destaque-midia { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at center, #43283b, #20171e 78%); }
.destaque-midia > video, .destaque-midia > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.previa-animada { pointer-events: none; }
.previa-animada:not([data-pronto]) { opacity: 0; }
.previa-animada[data-pronto] + .capa-previa { visibility: hidden; }
.destaque-midia > .destaque-fundo { object-fit: cover; opacity: .42; filter: blur(18px); transform: scale(1.08); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.destaque-texto { align-self: center; min-width: 0; padding: 14px clamp(14px, 3vw, 38px); }
.destaques:has(.destaques-indicadores) .destaque-texto { padding-bottom: 46px; }
.destaque-texto p, .categoria { margin-bottom: 6px; color: var(--rosa); font-size: .76rem; font-weight: 680; overflow-wrap: anywhere; }
.destaque-texto h3 { margin-bottom: 10px; font-size: clamp(1.35rem, 3.1vw, 2.6rem); line-height: 1.06; font-weight: 760; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.botao-rosa { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 8px 17px; background: var(--rosa); color: #21131b; border-radius: 999px; font-size: .85rem; font-weight: 720; white-space: nowrap; }
.botao-rosa:hover { background: #ffc5e1; }
.botao-rosa svg { width: 17px; height: 17px; }
.destaque-texto .botao-rosa { max-width: 100%; white-space: normal; text-align: center; }
.destaques-indicadores { position: absolute; left: clamp(8px, 2.6vw, 32px); bottom: 0; display: flex; gap: 0; }
.destaques-indicadores button { background: none; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.destaques-indicadores button:focus-visible { outline-offset: -3px; border-radius: 999px; }
.destaques-indicadores button::before { content: ""; width: 7px; height: 7px; background: #ffffffa8; border-radius: 99px; }
.destaques-indicadores button[aria-pressed="true"]::before { width: 23px; background: var(--rosa); }

.catalogo-controles { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 17px; }
.filtro-categoria { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .87rem; }
.busca { display: flex; align-items: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; width: min(100%, 470px); min-width: 0; }
.busca:focus-within { border-color: #ffa8d1a0; }
.busca input { min-width: 0; width: 100%; padding: 11px 0 11px 16px; font-size: .9rem; border: 0; border-radius: 999px; background: transparent; }
.busca input:focus-visible { outline: none; }
.busca input::placeholder { color: var(--suave); }
.busca button { display: grid; place-items: center; background: transparent; flex: 0 0 44px; height: 44px; border-radius: 50%; color: var(--suave); }
.busca button:hover { color: var(--rosa); }
[data-carregando] .busca button svg { opacity: .5; }
[data-carregando] .busca button { cursor: progress; }
.erro-busca { color: var(--rosa); font-size: .86rem; margin: -6px 0 12px; }
.formatos { display: flex; align-items: center; gap: 3px; background: var(--superficie); padding: 3px; border: 1px solid var(--borda); border-radius: 999px; }
.formatos a { display: grid; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px; color: var(--suave); font-size: .86rem; font-weight: 640; white-space: nowrap; }
.formatos a:hover { color: var(--texto); }
.formatos a[aria-current] { color: var(--texto); background: #39343b; }

.caminho { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; color: var(--suave); font-size: .86rem; }
.caminho a, .ver-todos { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 650; }
.caminho svg, .ver-todos svg { width: 16px; height: 16px; }
.caminho a:hover { color: var(--rosa); }
.ver-todos { color: var(--rosa); font-size: .86rem; }
.ver-todos:hover { text-decoration: underline; text-underline-offset: 3px; }

.resultado { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.resultado h2 { font-size: clamp(1.18rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.resultado-contagem { color: var(--suave); font-size: .82rem; }
.cabecalho-inicio { margin-bottom: 4px; }
.atalhos-tema {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
    margin: 0 0 clamp(14px, 2vw, 24px);
}
.atalho-tema {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    min-width: 0; min-height: 54px; padding: 6px 9px; border: 1px solid var(--borda); border-radius: 14px;
    background: var(--superficie); font-size: .84rem; font-weight: 680; line-height: 1.2; overflow-wrap: anywhere;
    transition: border-color .16s, background-color .16s;
}
.atalho-tema:hover { border-color: var(--rosa); background: var(--elevado); }
.atalho-tema > svg { width: 14px; height: 14px; color: var(--rosa); }
.atalho-capa { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: var(--elevado); color: var(--rosa); }
.atalho-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fileira + .fileira { margin-top: clamp(18px, 3vw, 34px); }
.cabecalho-fileira { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; }
.cabecalho-fileira h3 { font-size: clamp(1.06rem, 2vw, 1.35rem); line-height: 1.16; letter-spacing: -.02em; overflow-wrap: anywhere; }
.acoes-fileira, .setas-fileira { display: flex; flex: none; align-items: center; gap: 6px; }
.setas-fileira button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--borda); border-radius: 50%; background: var(--superficie); }
.setas-fileira button:hover:not(:disabled) { color: var(--rosa); border-color: var(--rosa); }
.setas-fileira button:disabled { opacity: .35; cursor: default; }
.setas-fileira svg { width: 16px; height: 16px; }
.trilho {
    --cartoes: 5;
    --espaco: 12px;
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cartoes) - 1) * var(--espaco)) / var(--cartoes)); gap: var(--espaco);
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho .cartao { scroll-snap-align: start; width: 100%; aspect-ratio: 9/16; max-height: clamp(190px, 54svh, 380px); }
.subcategorias { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.subcategorias a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px; color: var(--suave); font-size: .85rem; }
.subcategorias a:hover, .subcategorias a[aria-current] { color: var(--rosa); border-color: var(--rosa); }

.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.cartao { position: relative; isolation: isolate; min-width: 0; aspect-ratio: 16/22; overflow: hidden; border-radius: 18px; background: var(--superficie); border: 1px solid #ffffff20; transition: border-color .16s; }
.cartao a { display: block; position: absolute; inset: 0; }
.cartao a:focus-visible { outline-offset: -4px; border-radius: inherit; }
.cartao a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #09070a42, transparent 23%, transparent 40%, #08060bcf 86%, #08060bf5); }
.cartao img, .cartao video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cartao .previa-animada, .cartao .capa-previa { object-position: center 42%; }
.cartao .capa-previa { position: absolute; inset: 0; }
.formato { z-index: 1; position: absolute; left: 9px; top: 10px; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 7px; border: 1px solid #ffffff30; border-radius: 99px; background: #141016de; color: #fff; font-size: .69rem; font-weight: 650; }
.formato svg { width: 13px; height: 13px; }
.legenda { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; padding: 14px; overflow-wrap: anywhere; }
.legenda > span { color: #ffbfdf; font-size: .71rem; font-weight: 650; }
.titulo-cartao { margin-top: 3px; font-size: clamp(.89rem, 1.35vw, 1.13rem); font-weight: 700; color: #fff; line-height: 1.15; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.salvar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #141016e6; color: #fff; border: 1px solid #ffffff33; }
.cartao .salvar { position: absolute; right: 7px; top: 7px; z-index: 2; }
.salvar:hover, .salvar[aria-pressed="true"] { color: var(--rosa); }
.salvar[aria-pressed="true"] svg { fill: currentColor; }
.salvar:active, .botao-rosa:active, .navegacao-mobile a:active { opacity: .8; }
@media (hover: hover) {
    .cartao:hover { border-color: #ffa8d199; }
}

.paginas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 24px auto 0; color: var(--suave); font-size: .82rem; }
.paginas a, .voltar { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px; border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: .86rem; }
.paginas a:hover, .voltar:hover { background: var(--elevado); color: var(--rosa); }
.paginas svg, .voltar svg { width: 17px; height: 17px; }
.vazio { max-width: 590px; text-align: center; margin: 28px auto; padding: 36px 17px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 20px; }
.vazio > svg { width: 31px; height: 31px; margin: 0 auto 12px; color: var(--rosa); }
.vazio p { margin: 8px auto 16px; color: var(--suave); font-size: .9rem; }

.voltar { padding-inline: 12px; margin-bottom: 16px; }
.detalhe { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(22px, 4vw, 52px); align-items: start; }
.tela { display: grid; place-items: center; border-radius: 22px; overflow: hidden; background: #121015; border: 1px solid var(--borda); }
.tela img, .tela video { width: 100%; max-height: min(72vh, 760px); object-fit: contain; display: block; }
.ficha { min-width: 0; }
.ficha-cabecalho { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.ficha h1 { font-size: clamp(1.65rem, 3.4vw, 3rem); }
.salvar-detalhe { flex: none; }
.ficha-acoes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin: 19px 0 10px; }
.ficha-acoes h2 { font-size: 1.04rem; font-weight: 690; }
.prompt { margin: 0; padding: clamp(14px, 2.3vw, 23px); background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; font: .94rem/1.62 system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 61vh; overflow: auto; }

@media (min-width: 771px) and (max-height: 820px) {
    body:not(.adm) main { margin-top: 20px; }
    .entrada { margin-bottom: 16px; }
    .entrada h1 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
    .catalogo-controles { margin-bottom: 11px; }
}
@media (max-width: 1030px) {
    .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .trilho { --cartoes: 4; }
}
@media (max-width: 880px) {
    .atalhos-tema { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 691px) and (max-width: 880px) {
    .barra-conteudo { gap: 8px; }
    .barra-acoes > * { width: 44px; padding: 0; }
    .painel-link > span, .sair-biblioteca > span { display: none; }
    .trilho { --cartoes: 3; }
}
@media (min-width: 691px) {
    .destaque-midia { display: grid; place-items: center; padding: 10px; }
    .destaque-midia > :is(.previa-animada, .capa-previa) {
        grid-area: 1 / 1;
        position: relative; inset: auto; display: block;
        width: min(100%, clamp(116px, 18.5svh, 170px)); height: auto; aspect-ratio: 9/16;
        border-radius: 13px; background: var(--superficie); box-shadow: 0 6px 22px #0a090b80;
    }
}
@media (max-width: 690px) {
    .barra-conteudo { min-height: 65px; gap: 4px; }
    .barra .marca { grid-column: 2; grid-row: 1; justify-self: center; font-size: 25px; }
    .marca small { font-size: 8px; }
    .barra-acoes { display: contents; }
    .barra-acoes > *, .voltar-mobile { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; grid-row: 1; }
    .voltar-mobile { grid-column: 1; justify-self: start; }
    .painel-link, .sair-biblioteca { grid-column: 3; justify-self: end; }
    .sair-biblioteca span, .painel-link + .sair-biblioteca, .pagina-detalhe .sair-biblioteca { display: none; }
    .voltar-mobile { background: var(--superficie); }
    .navegacao-desktop, .painel-link > span { display: none; }
    .navegacao-mobile {
        position: fixed; z-index: 20; bottom: max(9px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: min(340px, calc(100% - 24px));
        padding: 5px; border: 1px solid #ffffff27; border-radius: 24px; background: #201e22f2; backdrop-filter: blur(16px);
        box-shadow: 0 10px 35px #000a;
    }
    .navegacao-mobile a { display: flex; flex-direction: column; min-height: 48px; align-items: center; justify-content: center; gap: 3px; color: var(--suave); border-radius: 17px; font-size: .72rem; font-weight: 640; }
    .navegacao-mobile a[aria-current] { background: #ffffff13; color: var(--texto); }
    .navegacao-mobile a[aria-current] svg { color: var(--rosa); }
    .navegacao-mobile svg { width: 19px; height: 19px; }
    main { margin: 17px auto calc(89px + max(9px, env(safe-area-inset-bottom))); }
    main, #explorar, #buscar, .cartao, #destaques { scroll-margin-top: 76px; }
    .entrada { display: block; margin-bottom: 14px; }
    .entrada h1 { font-size: clamp(1.6rem, 6vw, 2.05rem); }
    .entrada p { font-size: .84rem; margin-top: 5px; }
    .acervo-contagem { display: none; }
    .secao-destaques { margin-bottom: 10px; }
    .destaques { border-radius: 18px; }
    .destaque { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 168px; }
    .destaque-texto .botao-rosa { padding-inline: 12px; }
    .destaque-texto h3 { font-size: clamp(1.2rem, 5.4vw, 1.7rem); }
    .atalho-tema { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; min-height: 48px; padding-inline: 6px; font-size: .76rem; }
    .atalho-tema > svg { display: none; }
    .catalogo-controles { flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 10px; }
    .busca { width: 100%; }
    .busca input { font-size: 1rem; }
    .filtro-categoria { align-self: start; }
    .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .trilho { --cartoes: 2; --espaco: 8px; }
    .cartao { border-radius: 14px; }
    .legenda { padding: 10px 8px; }
    .formato { left: 6px; top: 7px; }
    .cartao .salvar { right: 5px; top: 5px; }
    .cartao .salvar svg { width: 18px; height: 18px; }
    .detalhe { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .tela { justify-self: center; width: min(100%, 410px); border-radius: 18px; }
    .tela img, .tela video { max-height: 52dvh; }
    .prompt { max-height: none; }
    .pagina-detalhe .voltar, .pagina-detalhe .painel-link { display: none; }
    .ficha-acoes button {
        position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
        width: min(410px, calc(100% - 2 * var(--margem))); min-height: 50px; box-shadow: 0 0 0 6px #0a090bd9, 0 6px 22px #0009;
    }
}
@media (max-width: 350px) {
    .atalhos-tema { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; }
}