/* 🌶️ [VSK • OHT] CINEMA — a camada de luxo (o Rei, 14/10/2026: «tá parecendo Google Drive… coloca numa telinha mais
   bonita… uma barra de carregamento melhor… curadoria… selo azul igual do Instagram… uma intro bonita, botões melhores»).
   Peças do 💠 Sytrus: o brilho que varre o botão (vskBtnShine, assinatura do DNA Royal Vinho), o ouro em degradê de joia
   (--gold-grad do pacote de botões), o anel de carga e a barra sob o brasão (pacote de animações de logo).
   Vem DEPOIS do acabamento.css. Cantos retos da casa (2px), nada de pílula nem vidro. */

:root {
  --c-ouro-joia: linear-gradient(135deg, #6E3D14 0%, #C79A3C 30%, #F4E4B0 50%, #E6BE63 68%, #8A5524 100%);
  --c-vinho-joia: linear-gradient(135deg, #2E0507 0%, #6E0C14 30%, #A8131F 66%, #C71C2B 100%);
  --c-azul: #0095F6;
  --c-palco: #070405;
}

/* ── 1. o tique azul ao lado do nome ── */
.tique-azul { display: inline-block; width: .62em; height: .62em; min-width: 14px; min-height: 14px; margin-left: .22em; vertical-align: .02em; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 149, 246, .35)); }
.perfil-cab h1 .tique-azul { width: .5em; height: .5em; vertical-align: .08em; }
.mcard .legenda h3 { display: flex; align-items: center; gap: 2px; }
.mcard .legenda h3 .tique-azul { width: 20px; height: 20px; }
@media (max-width: 620px) { .mcard .legenda h3 .tique-azul { width: 15px; height: 15px; } }

/* ── 2. botões de joia: ouro em degradê, aro claro por dentro, brilho que varre no hover ── */
html body .btn { position: relative; overflow: hidden; isolation: isolate; letter-spacing: .2em; }
html body .btn:not(.ghost):not(.hot) {
  background: var(--c-ouro-joia); background-size: 160% 100%; background-position: 0% 50%;
  color: #1A0D04 !important; border: 1px solid rgba(244, 228, 176, .7); /* a pele gpt pinta o texto de claro por cima: no ouro o texto é escuro */
  box-shadow: inset 0 1px 0 rgba(255, 248, 226, .6), inset 0 -1px 0 rgba(90, 50, 15, .35), 0 16px 34px -18px rgba(199, 154, 60, .75);
  transition: background-position .6s var(--s-ease), transform .25s var(--s-ease), box-shadow .35s var(--s-ease);
}
html body .btn:not(.ghost):not(.hot):hover { background-position: 100% 50%; color: #1A0D04; box-shadow: inset 0 1px 0 rgba(255, 248, 226, .7), 0 22px 44px -18px rgba(199, 154, 60, .9); }
html body .btn.hot {
  background: var(--c-vinho-joia); color: #FFF1E2; border: 1px solid rgba(214, 178, 110, .6);
  box-shadow: inset 0 1px 0 rgba(255, 220, 200, .22), 0 16px 38px -18px rgba(168, 19, 31, .8);
}
html body .btn.hot:hover { background: var(--c-vinho-joia); color: #fff; border-color: var(--s-brand-2); }
html body .btn.ghost { background: transparent; border: 1px solid var(--s-line-2); box-shadow: inset 0 0 0 1px transparent; }
html body .btn.ghost:hover { border-color: var(--s-brand); box-shadow: inset 0 0 0 1px var(--s-brand); background: var(--s-realce); }
html body .btn::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg) translateX(0);
  opacity: 0;
}
html body .btn:hover::before, html body .btn:focus-visible::before { animation: ohBrilho .9s var(--s-ease) 1; opacity: 1; transform: skewX(-18deg); inset: auto; top: -40%; bottom: -40%; }
html body .btn::before { inset: auto; top: -40%; bottom: -40%; transition: none; }
.hero .acoes .btn:not(.ghost)::before { animation: ohBrilho 1.1s var(--s-ease) 2.8s infinite; opacity: 1; animation-duration: 5s; }
@keyframes ohBrilho { 0% { left: -40%; } 30%, 100% { left: 130%; } }

/* ── 3. a barra de carga do topo: ouro corre ao trocar de página ── */
.oh-carga { position: fixed; left: 0; top: 0; z-index: 300; height: 2px; width: 100%; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, #8A5524, #E6BE63 40%, #FFF3CF 60%, #E6BE63); box-shadow: 0 0 12px rgba(230, 190, 99, .8); }
.oh-carga.indo { opacity: 1; animation: ohCarga 6s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes ohCarga { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.92); } }
.oh-carga.chegou { opacity: 1; animation: ohChegou 1s var(--s-ease) forwards; }
@keyframes ohChegou { 0% { transform: scaleX(.3); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ── 4. a ABERTURA: o letreiro nasce em ouro, o brilho passa, a linha corre embaixo, a cortina sobe ── */
.oh-intro { display: none; }
.com-intro .oh-intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 400; cursor: pointer;
  background: radial-gradient(60% 50% at 50% 45%, rgba(142, 22, 34, .38), transparent 70%), radial-gradient(120% 90% at 50% 120%, rgba(59, 12, 18, .9), transparent 60%), var(--c-palco);
  animation: ohCortina .9s cubic-bezier(.7, 0, .2, 1) 2.5s forwards;
}
.oh-intro.espera, .oh-intro.espera * { animation-play-state: paused !important; }
.oh-intro.fim { animation: ohCortina .6s cubic-bezier(.7, 0, .2, 1) forwards !important; }
.oh-intro-marca { display: grid; justify-items: center; gap: 22px; width: min(78vw, 560px); }
.oh-intro-logo {
  display: block; width: 100%; aspect-ratio: 1005 / 253;
  -webkit-mask: url('/public/img/logotipo-only-hot.png') center / contain no-repeat; mask: url('/public/img/logotipo-only-hot.png') center / contain no-repeat;
  background: linear-gradient(100deg, #8A5524 0%, #C79A3C 30%, #FFF6D8 46%, #E6BE63 54%, #8A5524 80%) 0 0 / 300% 100%;
  opacity: 0; transform: scale(.94); filter: blur(8px);
  animation: ohNasce 1.1s cubic-bezier(.2, .8, .2, 1) .15s forwards, ohLustro 1.6s ease-in-out .8s forwards;
}
.oh-intro-linha { display: block; width: 100%; height: 1px; transform: scaleX(0); background: linear-gradient(90deg, transparent, #E6BE63 20%, #FFF3CF 50%, #E6BE63 80%, transparent);
  animation: ohLinha 1.2s cubic-bezier(.6, 0, .2, 1) .7s forwards; }
.oh-intro-kicker { font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .5em; text-transform: uppercase; color: rgba(246, 227, 189, .8); opacity: 0;
  animation: ohSobe .8s var(--s-ease) 1.3s forwards; }
@keyframes ohNasce { to { opacity: 1; transform: none; filter: none; } }
@keyframes ohLustro { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes ohLinha { to { transform: scaleX(1); } }
@keyframes ohSobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ohCortina { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.com-intro .oh-intro { clip-path: inset(0 0 0 0); }

/* ── 5. o DESTAQUE do perfil: 1 vídeo grande, a moldura de ourives e o botão de assistir ── */
.destaque-sec { margin-top: 12px; }
.destaque-video { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; text-decoration: none; color: inherit;
  border: 1px solid var(--s-line); background: linear-gradient(135deg, var(--s-bg-2), var(--s-bg)); box-shadow: 0 40px 80px -50px rgba(11, 7, 6, .8); position: relative; }
.destaque-video::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(214, 178, 110, .16); pointer-events: none; }
.destaque-tela { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-palco); }
.destaque-tela img, .destaque-tela video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--s-ease), filter .6s var(--s-ease); }
.destaque-tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(11, 7, 6, .55)), linear-gradient(0deg, rgba(11, 7, 6, .45), transparent 40%); pointer-events: none; }
.destaque-video:hover .destaque-tela img, .destaque-video:hover .destaque-tela video { transform: scale(1.035); }
.destaque-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(28px, 4vw, 56px); }
.destaque-info .kicker { font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--s-brand); }
.destaque-nome { display: flex; align-items: center; font: italic 500 clamp(34px, 3.6vw, 54px)/1.02 var(--font-display); color: var(--s-heading); }
.destaque-dur { font: 400 13px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.destaque-info .btn { margin-top: 10px; }
@media (max-width: 860px) { .destaque-video { grid-template-columns: 1fr; } .destaque-tela::after { background: linear-gradient(0deg, rgba(11, 7, 6, .5), transparent 45%); } }

/* o botão de play de joia: aro de ouro, triângulo, halo que respira */
.play-joia { position: absolute; left: 50%; top: 50%; z-index: 3; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(11, 7, 6, .55) 58%, transparent 60%); border: 1px solid rgba(244, 228, 176, .85);
  box-shadow: 0 0 0 6px rgba(214, 178, 110, .14), 0 18px 40px -10px rgba(0, 0, 0, .7); transition: transform .45s var(--s-ease), opacity .45s var(--s-ease); }
.play-joia::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #F4E4B0; }
.destaque-video .play-joia { width: 96px; height: 96px; margin: -48px 0 0 -48px; animation: ohRespira 3.2s ease-in-out infinite; }
.destaque-video .play-joia::after { margin: -14px 0 0 -8px; border-width: 14px 0 14px 23px; }
.destaque-video:hover .play-joia { transform: scale(1.08); }
@keyframes ohRespira { 50% { box-shadow: 0 0 0 14px rgba(214, 178, 110, .06), 0 18px 40px -10px rgba(0, 0, 0, .7); } }

/* ── 6. a COLEÇÃO: capa, número de ourives, duração; o selo «exclusivo» só aparece no hover ── */
.posts.colecao { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.peca { display: block; color: inherit; text-decoration: none; cursor: pointer; background: radial-gradient(120% 90% at 50% 120%, rgba(142, 22, 34, .5), transparent 60%), linear-gradient(160deg, #2A0B12, #12060A); }
.peca img, .peca video { transition: transform .9s var(--s-ease), filter .5s var(--s-ease); }
.peca::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid transparent; transition: border-color .4s var(--s-ease), inset .4s var(--s-ease); }
.peca:hover::before, .peca:focus-visible::before { border-color: rgba(244, 228, 176, .7); inset: 8px; }
.peca:hover img, .peca:hover video { transform: scale(1.05); filter: brightness(.82); }
.peca .play-joia { opacity: 0; transform: scale(.85); }
.peca:hover .play-joia, .peca:focus-visible .play-joia { opacity: 1; transform: none; }
.peca-n { position: absolute; left: 12px; bottom: 10px; z-index: 3; font: italic 500 15px/1 var(--font-display); color: #F6E3BD; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.peca-dur { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 4px 7px; font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: #FFF4DF; background: rgba(11, 7, 6, .72); border: 1px solid rgba(214, 178, 110, .35); border-radius: 2px; }
.peca::after { content: ""; position: absolute; inset: 55% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(transparent, rgba(11, 7, 6, .7)); }
.peca .tag.so-no-hover { opacity: 0; transition: opacity .35s var(--s-ease); }
.peca:hover .tag.so-no-hover, .peca:focus-visible .tag.so-no-hover { opacity: 1; }
.post .play-joia { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.post .play-joia::after { margin: -8px 0 0 -4px; border-width: 8px 0 8px 13px; }
@media (max-width: 620px) {
  .posts.colecao { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .peca-n { font-size: 11px; left: 6px; bottom: 6px; }
  .peca-dur { font-size: 9px; padding: 2px 4px; right: 4px; bottom: 4px; }
  .peca .play-joia { display: none; }
}

/* ── 7. o TEATRO e o PLAYER da casa ── */
.teatro-aberto, .teatro-aberto body { overflow: hidden; }
.teatro { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-rows: auto minmax(0, 1fr); color: #F3E9DA;
  background: radial-gradient(70% 60% at 50% 40%, rgba(90, 16, 25, .35), transparent 70%), #050303; opacity: 0; transition: opacity .26s var(--s-ease); }
.teatro.aberto { opacity: 1; }
.teatro[hidden] { display: none; }
.teatro-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(14px, 3vw, 32px); border-bottom: 1px solid rgba(214, 178, 110, .14); }
.teatro-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.teatro-quem .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #D6B26E; }
.teatro-nome { display: flex; align-items: center; font: italic 500 22px/1 var(--font-display); color: #F6E3BD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teatro-nome .tique-azul { width: 17px; height: 17px; }
.teatro-conta { font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 233, 218, .55); }
.teatro-x, .teatro-seta { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; color: #F4E4B0; background: transparent;
  border: 1px solid rgba(214, 178, 110, .35); border-radius: 50%; transition: border-color .3s var(--s-ease), background .3s var(--s-ease), transform .3s var(--s-ease); }
.teatro-x:hover, .teatro-seta:hover { border-color: #F4E4B0; background: rgba(214, 178, 110, .12); }
.teatro-x svg, .teatro-seta svg, .p-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.teatro-palco { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: clamp(8px, 2vw, 24px); padding: clamp(10px, 2.5vw, 28px); min-height: 0; }

.player { position: relative; justify-self: center; width: 100%; max-width: 1200px; height: 100%; max-height: calc(100vh - 130px); display: grid; place-items: center; background: #000;
  border: 1px solid rgba(214, 178, 110, .22); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6); overflow: hidden; }
.player video, .player .player-foto { width: 100%; height: 100%; max-height: calc(100vh - 130px); object-fit: contain; background: #000; display: block; }
.player:fullscreen { max-height: none; border: 0; }
.player:fullscreen video { max-height: 100vh; }

/* a carga: anel de ouro que fecha a volta + a porcentagem que já chegou */
.player-carga { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 16px; pointer-events: none; opacity: 0; transition: opacity .3s var(--s-ease);
  background: radial-gradient(circle at 50% 50%, rgba(11, 7, 6, .55), rgba(11, 7, 6, .25) 60%, transparent); }
.player.carregando .player-carga { opacity: 1; }
.player-carga .anel { width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(230, 190, 99, .15) 40deg, #E6BE63 250deg, #FFF3CF 300deg, transparent 302deg);
  -webkit-mask: radial-gradient(circle, transparent 28px, #000 29px); mask: radial-gradient(circle, transparent 28px, #000 29px); animation: ohGira 1.1s linear infinite; }
.player-carga-txt { font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .34em; text-transform: uppercase; color: #F4E4B0; }
.player-carga-txt b { font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes ohGira { to { transform: rotate(360deg); } }

/* o play grande no meio (só pausado) */
.player-grande { position: absolute; left: 50%; top: 50%; z-index: 3; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; color: #1A0D04; background: var(--c-ouro-joia); border: 1px solid rgba(255, 246, 216, .8);
  box-shadow: 0 0 0 10px rgba(214, 178, 110, .14), 0 24px 50px -12px rgba(0, 0, 0, .8); opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .3s var(--s-ease), transform .3s var(--s-ease); }
.player-grande svg { width: 34px; height: 34px; margin-left: 5px; fill: currentColor; }
.player.pausado:not(.carregando) .player-grande { opacity: 1; transform: none; pointer-events: auto; }
.player.eh-foto .player-grande, .player.eh-foto .player-barra { display: none; }

/* a barra: trilho fino que engrossa, buffer em ouro velho, o feito em ouro vivo, a ponta de joia e a dica de tempo */
.player-barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 40px clamp(12px, 2vw, 22px) 12px; background: linear-gradient(transparent, rgba(5, 3, 3, .88));
  transition: opacity .4s var(--s-ease), transform .4s var(--s-ease); }
.player.quieto .player-barra { opacity: 0; transform: translateY(8px); }
.player.quieto { cursor: none; }
.player-trilho { position: relative; height: 18px; cursor: pointer; touch-action: none; outline: none; }
.player-trilho::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(246, 227, 189, .16); transition: height .2s, margin .2s; }
.player-trilho .p-buf, .player-trilho .p-feito { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; transform-origin: 0 50%; transform: scaleX(0); transition: height .2s, margin .2s; }
.player-trilho .p-buf { background: rgba(214, 178, 110, .38); transition: transform .4s linear, height .2s, margin .2s; }
.player-trilho .p-feito { background: linear-gradient(90deg, #8A5524, #E6BE63 60%, #FFF3CF); box-shadow: 0 0 10px rgba(230, 190, 99, .55); }
.player-trilho:hover::before, .player-trilho:hover .p-buf, .player-trilho:hover .p-feito, .player.arrastando .player-trilho::before, .player.arrastando .p-buf, .player.arrastando .p-feito { height: 5px; margin-top: -2.5px; }
.player-trilho .p-ponta { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #FFF3CF;
  box-shadow: 0 0 0 3px rgba(214, 178, 110, .4), 0 0 14px rgba(230, 190, 99, .9); transform: scale(0); transition: transform .2s var(--s-ease); }
.player-trilho:hover .p-ponta, .player-trilho:focus-visible .p-ponta, .player.arrastando .p-ponta, .player.pausado .p-ponta { transform: scale(1); }
.player-trilho .p-dica { position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); padding: 4px 7px; font: 500 11px/1 var(--font-body, 'Jost', sans-serif); font-variant-numeric: tabular-nums;
  color: #1A0D04; background: #F4E4B0; border-radius: 2px; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.player-trilho:hover .p-dica { opacity: 1; }
.player-trilho:focus-visible { box-shadow: 0 0 0 2px rgba(230, 190, 99, .6); }
.player-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.p-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; color: #F4E4B0; background: transparent; border: 0; border-radius: 50%; transition: background .25s, color .25s; }
.p-btn:hover { background: rgba(214, 178, 110, .14); color: #FFF3CF; }
.p-btn:focus-visible { outline: 2px solid #E6BE63; outline-offset: 1px; }
.p-btn .i-play path { fill: currentColor; }
.p-btn .i-pause path { stroke-width: 2.6; }
.p-btn .i-pause, .player.pausado .p-btn .i-pause, .player.mudo .i-som, .p-btn .i-mudo { display: none; }
.player.pausado .p-btn .i-play, .player:not(.pausado) .p-btn .i-pause, .player.mudo .i-mudo { display: block; }
.player:not(.pausado) .p-btn .i-play { display: none; }
.p-tempo { display: flex; gap: 6px; margin-left: 4px; font: 400 12.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgba(243, 233, 218, .7); }
.p-tempo b { font-weight: 500; color: #FFF4DF; }
.p-tempo i { font-style: normal; color: rgba(214, 178, 110, .6); }
.p-esp { flex: 1; }
.p-vol { width: 88px; accent-color: #E6BE63; cursor: pointer; }

@media (max-width: 760px) {
  .teatro-palco { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .teatro-seta { position: absolute; top: 50%; z-index: 6; width: 38px; height: 38px; background: rgba(5, 3, 3, .6); }
  .teatro-seta[data-teatro-ant] { left: 6px; } .teatro-seta[data-teatro-prox] { right: 6px; }
  .player { max-height: calc(100vh - 72px); border-left: 0; border-right: 0; }
  .player video, .player .player-foto { max-height: calc(100vh - 72px); }
  .p-vol { display: none; }
  .teatro-conta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .com-intro .oh-intro { display: none; }
  html body .btn::before, .play-joia, .destaque-video .play-joia, .oh-carga.indo, .oh-carga.chegou { animation: none !important; }
  .player-carga .anel { animation-duration: 3s; }
}

/* ── 8. a coleção se CLASSIFICA: filtros e ordem em fita de ourives, o modo discreto à direita ── */
.colecao > [hidden] { display: none !important; }
.colecao-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: -10px 0 26px; padding: 14px 0; border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.colecao-barra .filtros, .colecao-barra .ordem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.colecao-barra .ordem { padding-left: 28px; border-left: 1px solid var(--s-line); }
.ordem-rotulo { margin-right: 6px; font: 500 10px/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--s-muted); }
.colecao-barra .filtro { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; background: transparent; color: var(--s-text);
  border: 1px solid transparent; border-radius: 2px; font: 500 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; transition: border-color .3s var(--s-ease), color .3s var(--s-ease), background .3s var(--s-ease); }
.colecao-barra .filtro span { font-size: 10px; letter-spacing: .06em; color: var(--s-brand); font-variant-numeric: tabular-nums; }
.colecao-barra .filtro:hover { border-color: var(--s-line-2); }
.colecao-barra .filtro.on { border-color: var(--s-brand); color: var(--s-heading); background: var(--s-realce); box-shadow: inset 0 -2px 0 var(--s-brand); }
.colecao-barra .filtro:focus-visible, .discreto:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; }
.discreto { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; background: transparent; color: var(--s-muted);
  border: 1px solid var(--s-line); border-radius: 2px; font: 500 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; transition: color .3s, border-color .3s; }
.discreto[aria-pressed="true"] { color: var(--s-heading); border-color: var(--s-brand); }
.discreto-olho { position: relative; width: 18px; height: 11px; border: 1.4px solid currentColor; border-radius: 50% / 60%; }
.discreto-olho::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: currentColor; }
.discreto[aria-pressed="true"] .discreto-olho::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.4px; background: currentColor; transform: rotate(-28deg); }
.colecao-vazia { padding: 30px 0; text-align: center; }
@media (max-width: 760px) {
  .colecao-barra { gap: 10px; }
  .colecao-barra .filtros { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .colecao-barra .ordem { padding-left: 0; border-left: 0; }
  .colecao-barra .filtro { white-space: nowrap; padding: 8px 11px; }
  .discreto { margin-left: 0; }
}

/* o MODO DISCRETO (o Rei gostou do desfoque: «é mais privativo»): a capa fica velada e se revela no hover;
   no teatro o vídeo é nítido. Desliga pelo botão, só na página aberta. */
html:not(.oh-sem-discreto) .peca img, html:not(.oh-sem-discreto) .peca video,
html:not(.oh-sem-discreto) .destaque-tela img, html:not(.oh-sem-discreto) .destaque-tela video,
html:not(.oh-sem-discreto) .feed-grade .post img, html:not(.oh-sem-discreto) .feed-grade .post video {
  filter: blur(22px) saturate(.75) brightness(.8); transform: scale(1.12);
}
html:not(.oh-sem-discreto) .peca:hover img, html:not(.oh-sem-discreto) .peca:focus-visible img,
html:not(.oh-sem-discreto) .peca:hover video, html:not(.oh-sem-discreto) .destaque-video:hover .destaque-tela img,
html:not(.oh-sem-discreto) .destaque-video:focus-visible .destaque-tela img, html:not(.oh-sem-discreto) .feed-grade .post:hover img {
  filter: none; transform: scale(1.04);
}
@media (hover: none) { html:not(.oh-sem-discreto) .peca:hover img, html:not(.oh-sem-discreto) .destaque-video:hover .destaque-tela img { filter: blur(22px) saturate(.75) brightness(.8); } }

/* ── 9. a HOME editorial (repaginação 14/10): capa de revista + o livro da casa + faixa sem caixa ── */
.hero.hero-editorial::after { content: none; } /* o «SCROLL TO DISCOVER» fixo em inglês da pele gpt sai: o texto agora é traduzido */
.hero-rolar { position: absolute; right: max(24px, calc(50vw - 650px)); bottom: 30px; color: rgba(255, 246, 233, .58);
  font: 500 9px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .35em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero-livro { position: absolute; right: max(64px, calc(50vw - 600px)); bottom: clamp(54px, 10vw, 118px); margin: 0;
  display: grid; gap: 22px; min-width: 210px; padding-left: 26px; border-left: 1px solid rgba(214, 178, 110, .42); }
.hero-livro .hl-item { display: flex; flex-direction: column-reverse; gap: 6px; opacity: 0; animation: ohSobe .9s var(--s-ease) forwards; }
.hero-livro .hl-item:nth-child(2) { animation-delay: .15s; }
.hero-livro .hl-item:nth-child(3) { animation-delay: .3s; }
.hero-livro dt { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 246, 233, .62); }
.hero-livro dd { margin: 0; }
.hero-livro .hl-n { font: italic 400 clamp(38px, 3.6vw, 54px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.03em; font-variant-numeric: lining-nums;
  background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }

.faixa-rotulo { margin: clamp(48px, 6vw, 72px) 0 0; font: 500 10px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--s-brand); }
.faixa.faixa-editorial { counter-reset: faixa; margin-top: 18px; gap: 0; border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.faixa.faixa-editorial::before { content: none; } /* a legenda fixa em inglês da pele gpt sai: o rótulo de cima é traduzido */
.faixa.faixa-editorial > div, .faixa.faixa-editorial > div + div {
  border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; min-height: 0;
  padding: 34px 32px 36px 0; display: flex; flex-direction: column; align-items: flex-start; }
.faixa.faixa-editorial > div + div { padding-left: 32px; border-left: 1px solid var(--s-line); }
.faixa.faixa-editorial > div::before { content: none; }
.faixa.faixa-editorial > div:hover { transform: none; box-shadow: none; background: none; }
.faixa.faixa-editorial > div:hover .faixa-n { color: var(--s-brand); }
.faixa-n { font: italic 400 46px/1 'Bodoni Moda', var(--font-display); color: var(--s-line-2, rgba(214, 178, 110, .4)); margin-bottom: 18px; transition: color .3s var(--s-ease); }
.faixa-n::before { counter-increment: faixa; content: counter(faixa, lower-roman); }
.faixa.faixa-editorial .t { font-size: 26px; }

.secao .secao-fita { margin-left: auto; display: flex; align-items: baseline; gap: 22px; }
.secao .secao-fita a { font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .3s var(--s-ease), border-color .3s var(--s-ease); }
.secao .secao-fita a:hover, .secao .secao-fita a:focus-visible { color: var(--s-brand); border-bottom-color: currentColor; }
.secao .secao-fita a.mais { color: var(--s-brand-2, var(--s-brand)); border-bottom-color: currentColor; }

@media (max-width: 900px) {
  .hero-livro { position: static; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; min-width: 0; width: 100%;
    margin-top: 34px; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(214, 178, 110, .42); }
  .hero.hero-editorial { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero-livro .hl-n { font-size: 30px; }
  .hero-livro dt { font-size: 8.5px; letter-spacing: .18em; }
  .hero-rolar { display: none; }
}
@media (max-width: 760px) {
  .faixa.faixa-editorial > div, .faixa.faixa-editorial > div + div { padding: 26px 0; border-left: 0; }
  .faixa.faixa-editorial > div + div { border-top: 1px solid var(--s-line); }
  .faixa-n { font-size: 36px; margin-bottom: 12px; }
  .secao .secao-fita a:not(.mais) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-livro .hl-item { animation: none; opacity: 1; } }

/* ── 10. a HOME que VENDE (o Rei, 14/10: «isso é um catálogo… cadê a assinatura, cadê os valores?») ──
   vitrine → como funciona → o chat → a assinatura → Hot Coins e presentes → Superfan → a casa → perguntas → convite.
   Mesma pele: régua de ouro, Bodoni itálico nos números, nada de cartão de SaaS. */
.casa-home { counter-reset: secao; }
.casa-home .secao .num:empty::before { counter-increment: secao; content: counter(secao, upper-roman); }
.casa-home > section { margin-top: clamp(72px, 9vw, 120px); }
.casa-home .hc-ico { color: var(--s-brand); }
.casa-home h3 { font-family: var(--font-display); font-weight: 400; }

/* como funciona: 3 passos numa régua */
.vp-lista { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--s-brand); }
.vp-lista li { padding: 34px 32px 8px 0; }
.vp-lista li + li { padding-left: 32px; border-left: 1px solid var(--s-line); }
.vp-n::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); }
.vp-n { display: block; font: italic 400 54px/1 'Bodoni Moda', var(--font-display); margin-bottom: 18px;
  background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vp-lista h3 { font-size: 28px; margin: 0 0 10px; color: var(--s-heading); }
.vp-lista p { margin: 0; color: var(--s-muted); max-width: 34ch; }

/* o chat: texto à esquerda, o celular-joia à direita */
.vc-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.vc-lead { font: 400 clamp(19px, 1.6vw, 23px)/1.55 var(--font-display); color: var(--s-heading); margin: 0 0 26px; max-width: 30ch; }
.vc-lista { list-style: none; margin: 0 0 34px; padding: 0; border-top: 1px solid var(--s-line); }
.vc-lista li { display: flex; gap: 14px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--s-line); color: var(--s-text); }
.vc-tela { margin: 0; position: relative; border-radius: 30px; padding: 18px 18px 14px; background: linear-gradient(180deg, rgba(36, 14, 16, .96), rgba(14, 7, 8, .98));
  border: 1px solid rgba(214, 178, 110, .4); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 6px rgba(214, 178, 110, .06);
  transform: rotate(1.2deg); transition: transform .5s var(--s-ease); }
.vc-tela:hover { transform: rotate(0); }
.vc-topo { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid rgba(214, 178, 110, .2); }
.vc-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(214, 178, 110, .6); flex: 0 0 auto; }
.vc-av-vazio { display: block; background: var(--c-ouro-joia); }
.vc-quem { font: 400 19px/1.1 var(--font-display); color: #FFF2D8; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-aviso { margin: 12px 4px; font-size: 11.5px; line-height: 1.45; color: rgba(255, 242, 216, .62); }
.vc-fio { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 16px; }
.vc-msg { margin: 0; max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; opacity: 0; animation: ohSobe .7s var(--s-ease) forwards; }
.vc-msg:nth-child(2) { animation-delay: .35s; } .vc-msg:nth-child(3) { animation-delay: .7s; } .vc-msg:nth-child(4) { animation-delay: 1.05s; }
.vc-fan { align-self: flex-end; background: var(--c-ouro-joia); color: #1A0D04; border-bottom-right-radius: 6px; }
.vc-ela { align-self: flex-start; background: rgba(255, 242, 216, .07); color: #FFF2D8; border: 1px solid rgba(214, 178, 110, .22); border-bottom-left-radius: 6px; }
.vc-de { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 216, 156, .75); margin-bottom: 4px; }
.vc-presente { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; background: rgba(110, 12, 20, .55); color: #FFF2D8;
  border: 1px solid rgba(214, 178, 110, .5); font-size: 13px; }
.vc-presente-emoji { font-size: 22px; line-height: 1; }
.vc-campo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(214, 178, 110, .3); color: rgba(255, 242, 216, .45); font-size: 13.5px; }
.vc-custo { display: inline-flex; align-items: center; gap: 6px; color: #F4E4B0; }
.vc-legenda { margin: 12px 4px 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 242, 216, .4); text-align: center; }

/* a assinatura: o preço de ourives e o que ela abre */
.vpl-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.vpl-preco { padding: 40px 40px 40px 0; display: flex; flex-direction: column; align-items: flex-start; }
.vpl-de, .vpl-mes { font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--s-muted); }
.vpl-valor { font: italic 400 clamp(64px, 7vw, 104px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.03em; margin: 10px 0 8px;
  background: linear-gradient(100deg, #7A4518 0%, #C08A2E 42%, #A9742A 68%, #6E3D14 100%); /* sem a faixa clara: o número grande NÃO some no creme */ -webkit-background-clip: text; background-clip: text; color: transparent; }
.vpl-lead { margin: 22px 0 0; color: var(--s-muted); max-width: 36ch; }
.vpl-inclui { list-style: none; margin: 0; padding: 26px 0 26px 40px; border-left: 1px solid var(--s-line); display: grid; align-content: center; }
.vpl-inclui li { position: relative; padding: 16px 0 16px 34px; font: 400 clamp(18px, 1.5vw, 22px)/1.35 var(--font-display); color: var(--s-heading); }
.vpl-inclui li + li { border-top: 1px solid var(--s-line); }
.vpl-inclui li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: var(--s-brand); }
.vpl-acao { margin-top: 28px; }

/* Hot Coins: a vitrine dos pacotes numa fileira que rola, e os presentes */
.vh-lead { max-width: 60ch; color: var(--s-muted); margin: 0 0 10px; }
.vh-primeira { display: inline-block; margin: 6px 0 0; padding: 7px 14px; border: 1px solid var(--s-brand); border-radius: 999px; color: var(--s-brand);
  font-size: 12px; letter-spacing: .08em; }
.vh-pacotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: 14px; margin: 30px 0 0; padding: 18px 2px 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.vh-pac { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 14px 18px;
  text-decoration: none; text-align: center; border: 1px solid var(--s-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(110, 12, 20, .22), rgba(110, 12, 20, 0)); transition: transform .3s var(--s-ease), border-color .3s var(--s-ease); }
.vh-pac:hover, .vh-pac:focus-visible { transform: translateY(-4px); border-color: var(--s-brand); }
.vh-fitado { border-color: rgba(214, 178, 110, .7); }
.vh-fita { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--c-ouro-joia); color: #1A0D04; font: 600 9.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .14em; }
.vh-emoji { font-size: 30px; line-height: 1; }
.vh-nome { font: 400 20px/1.1 var(--font-display); color: var(--s-heading); }
.vh-total { display: inline-flex; align-items: center; gap: 6px; font: italic 400 26px/1 'Bodoni Moda', var(--font-display); color: var(--s-brand); }
.vh-bonus { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.vh-preco { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--s-line); width: 100%; font-weight: 600; color: var(--s-text); }
.vh-sub { margin: 56px 0 6px; font-size: 30px; color: var(--s-heading); }
.vh-sublead { margin: 0 0 20px; color: var(--s-muted); }
.vh-presentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--s-line); }
.vh-presentes li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 10px; border-bottom: 1px solid var(--s-line); }
.vh-presentes li + li { border-left: 1px solid var(--s-line); }
.vh-p-emoji { font-size: 38px; line-height: 1; transition: transform .3s var(--s-ease); }
.vh-presentes li:hover .vh-p-emoji { transform: scale(1.15) rotate(-6deg); }
.vh-p-nome { font: 400 18px/1.2 var(--font-display); color: var(--s-heading); }
.vh-p-hc { display: inline-flex; align-items: center; gap: 5px; color: var(--s-brand); font-size: 14px; }

/* Superfan: a escada sobe da esquerda pra direita */
.vs-lead { max-width: 62ch; color: var(--s-muted); margin: 0 0 30px; }
.vs-escada { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.vs-degrau { position: relative; padding: 26px 22px 24px; border: 1px solid var(--s-line); border-top: 2px solid var(--s-brand); border-radius: 4px 4px 18px 18px;
  background: linear-gradient(180deg, rgba(214, 178, 110, .07), rgba(214, 178, 110, 0)); }
.vs-degrau:nth-child(2) { padding-top: 46px; } .vs-degrau:nth-child(3) { padding-top: 66px; } .vs-degrau:nth-child(4) { padding-top: 86px; }
.vs-degrau:last-child { border-color: rgba(214, 178, 110, .65); background: linear-gradient(180deg, rgba(214, 178, 110, .16), rgba(110, 12, 20, .12)); }
.vs-emoji { display: block; font-size: 30px; line-height: 1; color: var(--s-brand); margin-bottom: 12px; }
.vs-degrau h3 { margin: 0 0 6px; font-size: 26px; color: var(--s-heading); }
.vs-req { margin: 0 0 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-brand); }
.vs-abre { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--s-line); display: grid; gap: 8px; font-size: 14px; color: var(--s-muted); }

/* perguntas: details de régua fina */
.vf-lista { border-top: 1px solid var(--s-brand); }
.vf-item { border-bottom: 1px solid var(--s-line); }
.vf-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 22px 0;
  font: 400 clamp(19px, 1.6vw, 23px)/1.3 var(--font-display); color: var(--s-heading); transition: color .3s var(--s-ease); }
.vf-item summary::-webkit-details-marker { display: none; }
.vf-item summary::after { content: "+"; font: 300 26px/1 var(--font-body, 'Jost', sans-serif); color: var(--s-brand); transition: transform .3s var(--s-ease); }
.vf-item[open] summary::after { transform: rotate(45deg); }
.vf-item summary:hover, .vf-item summary:focus-visible { color: var(--s-brand); }
.vf-item p { margin: 0 0 24px; max-width: 70ch; color: var(--s-muted); }

/* o convite final */
.vende-fim { text-align: center; padding: clamp(56px, 8vw, 96px) 20px; border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line);
  background: radial-gradient(ellipse at 50% 0%, rgba(110, 12, 20, .35), rgba(110, 12, 20, 0) 70%); }
.vende-fim .kicker { display: block; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--s-brand); }
.vende-fim h2 { margin: 16px auto 12px; font: italic 400 clamp(40px, 5vw, 72px)/1.05 'Bodoni Moda', var(--font-display); color: var(--s-heading); max-width: 16ch; }
.vende-fim p { margin: 0 auto 30px; color: var(--s-muted); max-width: 44ch; }
.vende-fim .acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .vc-grade { grid-template-columns: minmax(0, 1fr); }
  .vc-tela { transform: none; max-width: 440px; }
  .vpl-grade { grid-template-columns: minmax(0, 1fr); }
  .vpl-preco { padding: 32px 0 24px; }
  .vpl-inclui { padding: 8px 0 18px; border-left: 0; border-top: 1px solid var(--s-line); }
  .vs-escada { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .vs-degrau:nth-child(n) { padding-top: 26px; }
}
@media (max-width: 760px) {
  .vp-lista { grid-template-columns: minmax(0, 1fr); }
  .vp-lista li, .vp-lista li + li { padding: 26px 0 22px; border-left: 0; }
  .vp-lista li + li { border-top: 1px solid var(--s-line); }
  .vp-n { font-size: 40px; margin-bottom: 10px; }
  .vh-presentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-presentes li + li { border-left: 0; }
  .vh-presentes li:nth-child(even) { border-left: 1px solid var(--s-line); }
  .vs-escada { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .vc-msg { animation: none; opacity: 1; } .vc-tela { transform: none; } }

/* ── 11. a página de VENDA (o Rei, 14/10: «cadê o call to action, cadê um demonstrativo? tem que encher os olhos») ──
   selos do hero · a fita das criadoras · a demonstração viva · o comparativo · o simulador dos pacotes · para criadoras ·
   a barra de compra que acompanha a rolagem. */
.hero-selos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero .texto .hero-selos { order: 4; } /* a pele gpt ordena o hero por order (kicker 0 · h1 1 · p 2 · ações 3): os selos vêm depois */
.hero-selos li { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 246, 233, .78); }
.hero-selos li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(214, 178, 110, .7);
  color: #F4E4B0; font-size: 10px; letter-spacing: 0; }

/* a fita das criadoras: desfila sozinha, para no hover */
.vende-fita { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); padding: 22px 0; border-bottom: 1px solid var(--s-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vf-trilho { display: flex; width: max-content; animation: ohFita 60s linear infinite; }
.vende-fita:hover .vf-trilho, .vende-fita:focus-within .vf-trilho { animation-play-state: paused; }
.vf-volta { list-style: none; margin: 0; padding: 0 9px; display: flex; gap: 18px; }
.vf-volta a { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border: 1px solid var(--s-line); border-radius: 999px;
  text-decoration: none; color: var(--s-heading); white-space: nowrap; transition: border-color .3s var(--s-ease), background .3s var(--s-ease); }
.vf-volta a:hover, .vf-volta a:focus-visible { border-color: var(--s-brand); background: rgba(214, 178, 110, .08); }
.vf-volta img, .vf-inicial { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(214, 178, 110, .55); }
.vf-inicial { display: grid; place-items: center; background: var(--c-ouro-joia); color: #1A0D04; font: italic 400 20px/1 'Bodoni Moda', var(--font-display); }
.vf-nome { font: italic 400 18px/1 'Bodoni Moda', var(--font-display); }
.vf-selo { color: var(--s-brand); font-size: 12px; }
@keyframes ohFita { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* a demonstração: o painel de saldo e nível, os botões que gastam, o estouro do presente */
.vd-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; margin: 0 0 22px; border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.vd-medidor { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 18px 0; min-width: 0; }
.vd-medidor + .vd-medidor { padding-left: 20px; border-left: 1px solid var(--s-line); }
.vd-rot { font: 500 10px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--s-muted); }
.vd-saldo { display: inline-flex; align-items: center; gap: 8px; font: italic 400 40px/1 'Bodoni Moda', var(--font-display); color: var(--s-brand); font-variant-numeric: tabular-nums; }
.vd-pontos { font: 400 19px/1.2 var(--font-display); color: var(--s-heading); }
.vd-barra { display: block; height: 6px; border-radius: 99px; background: var(--s-line); overflow: hidden; }
.vd-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-ouro-joia); transition: width .6s var(--s-ease); }
.vd-falta { font-size: 12.5px; color: var(--s-muted); min-height: 1.4em; }
.vd-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vd-btn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--s-line); background: rgba(214, 178, 110, .05);
  color: var(--s-heading); font: 500 14.5px/1.2 var(--font-body, 'Jost', sans-serif); cursor: pointer; text-align: left;
  transition: transform .3s var(--s-ease), border-color .3s var(--s-ease), background .3s var(--s-ease); }
.vd-btn > span:first-child { font-size: 22px; line-height: 1; }
.vd-btn:hover:not(:disabled), .vd-btn:focus-visible { transform: translateY(-2px); border-color: var(--s-brand); background: rgba(214, 178, 110, .12); }
.vd-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.vd-btn:disabled { opacity: .4; cursor: not-allowed; }
.vd-custo { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--s-brand); font-variant-numeric: tabular-nums; }
.vd-aviso { min-height: 1.5em; margin: 14px 0 0; font-size: 14px; color: var(--s-muted); }
.vd-aviso.festa { color: var(--s-brand); font: italic 400 20px/1.3 'Bodoni Moda', var(--font-display); }
.vd-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.vende-chat .vc-fio { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.vc-msg.vd-nova { animation-delay: 0s; }
.vd-estouro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden; border-radius: inherit; }
.vd-estouro span { grid-area: 1 / 1; font-size: 96px; line-height: 1; opacity: 0; animation: ohEstouro 1.5s var(--s-ease) forwards; filter: drop-shadow(0 10px 30px rgba(214, 178, 110, .55)); }
@keyframes ohEstouro { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 25% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  70% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(-60px) scale(.9); } }
.vende-chat.vd-subiu .vd-barra span { animation: ohBrilho 1.2s var(--s-ease); }
@keyframes ohBrilho { 0%, 100% { filter: none; } 40% { filter: brightness(1.6) drop-shadow(0 0 8px rgba(244, 228, 176, .9)); } }

/* o comparativo: a coluna do assinante em destaque */
.vcm-rola { overflow-x: auto; }
.vcm-tabela { width: 100%; min-width: 640px; border-collapse: collapse; }
.vcm-tabela .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vcm-tabela th, .vcm-tabela td { padding: 16px 14px; border-bottom: 1px solid var(--s-line); text-align: center; vertical-align: middle; }
.vcm-tabela thead th { position: relative; padding-top: 30px; vertical-align: bottom; border-bottom: 1px solid var(--s-brand); }
.vcm-tabela tbody th { text-align: left; font: 400 17px/1.35 var(--font-display); color: var(--s-heading); padding-left: 0; text-transform: none; letter-spacing: 0; }
.vcm-tabela thead .vcm-col { text-transform: none; letter-spacing: 0; }
.vcm-tabela tbody tr:hover th, .vcm-tabela tbody tr:hover td { background-color: rgba(214, 178, 110, .06); }
.vcm-col { display: block; font: 400 22px/1.15 var(--font-display); color: var(--s-heading); }
.vcm-preco { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); }
.vcm-destaque { background: linear-gradient(180deg, rgba(214, 178, 110, .12), rgba(214, 178, 110, .04)); }
.vcm-tabela thead .vcm-destaque { border-radius: 18px 18px 0 0; }
.vcm-tabela tfoot .vcm-destaque { border-radius: 0 0 18px 18px; }
.vcm-tabela tfoot td { border-bottom: 0; padding: 20px 10px; }
.vcm-tabela tfoot .btn { white-space: nowrap; }
.vcm-fita { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--c-ouro-joia); color: #1A0D04; font: 600 9px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.vcm-sim, .vcm-nao { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.vcm-sim { background: var(--c-ouro-joia); }
.vcm-sim::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid #1A0D04; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.vcm-nao::before { content: ""; width: 10px; height: 1px; background: var(--s-muted); opacity: .6; }

/* o simulador dos pacotes: quanto rende + o botão */
.vh-rende { font-size: 12px; color: var(--s-heading); opacity: .8; }
.vh-comprar { margin-top: 10px; padding: 8px 0; width: 100%; border-radius: 999px; border: 1px solid var(--s-brand); color: var(--s-brand);
  font: 600 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; transition: background .3s var(--s-ease), color .3s var(--s-ease); }
.vh-pac:hover .vh-comprar, .vh-pac:focus-visible .vh-comprar, .vh-fitado .vh-comprar { background: var(--c-ouro-joia); color: #1A0D04; border-color: transparent; }

/* para criadoras: a tese à esquerda, o número grande do repasse, a lista à direita */
.vcr-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); padding: 40px clamp(20px, 4vw, 48px);
  border: 1px solid rgba(214, 178, 110, .45); border-radius: 26px;
  background: radial-gradient(ellipse at 0% 0%, rgba(110, 12, 20, .32), rgba(110, 12, 20, 0) 60%), linear-gradient(180deg, rgba(214, 178, 110, .06), rgba(214, 178, 110, 0)); }
.vcr-t { margin: 0 0 22px; font: italic 400 clamp(30px, 3vw, 44px)/1.1 'Bodoni Moda', var(--font-display); color: var(--s-heading); }
.vcr-repasse { display: flex; align-items: baseline; gap: 14px; margin: 0 0 26px; color: var(--s-muted); }
.vcr-n { font: italic 400 clamp(64px, 7vw, 96px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.03em;
  background: linear-gradient(100deg, #7A4518 0%, #C08A2E 42%, #A9742A 68%, #6E3D14 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vcr-nota { margin: 14px 0 0; font-size: 13px; color: var(--s-muted); max-width: 40ch; }
.vcr-lista { list-style: none; margin: 0; padding: 0; align-self: center; }
.vcr-lista li { position: relative; padding: 16px 0 16px 34px; font: 400 clamp(17px, 1.4vw, 20px)/1.35 var(--font-display); color: var(--s-heading); }
.vcr-lista li + li { border-top: 1px solid var(--s-line); }
.vcr-lista li::before { content: "✦"; position: absolute; left: 0; color: var(--s-brand); }

/* a barra de compra: desce do rodapé quando o hero sai da tela */
.vende-barra { position: fixed; left: 50%; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 22px; width: min(760px, calc(100% - 24px));
  padding: 12px 12px 12px 26px; border-radius: 999px; border: 1px solid rgba(214, 178, 110, .55);
  background: rgba(17, 8, 9, .92); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); color: #FFF2D8;
  transform: translate(-50%, 140%); opacity: 0; transition: transform .5s var(--s-ease), opacity .5s var(--s-ease); }
.vende-barra.on { transform: translate(-50%, 0); opacity: 1; }
.vende-barra[hidden] { display: none; }
.vb-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.vb-t { font: 400 18px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-t em { font-family: 'Bodoni Moda', var(--font-display); color: #F4E4B0; }
.vb-p { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 242, 216, .6); }
.vende-barra .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .vcr-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero-selos { gap: 8px 14px; }
  .hero-selos li { font-size: 9.5px; letter-spacing: .1em; }
  .vf-volta img, .vf-inicial { width: 36px; height: 36px; }
  .vf-nome { font-size: 15px; }
  .vd-painel { grid-template-columns: minmax(0, 1fr); }
  .vd-medidor + .vd-medidor { padding-left: 0; border-left: 0; border-top: 1px solid var(--s-line); }
  /* no celular: texto → chat → saldo → botões, colados (quem clica vê a resposta sem rolar) */
  .vende-chat .vc-grade { gap: 14px; }
  .vende-chat .vc-texto { display: contents; }
  .vende-chat .vc-lead { order: 0; margin: 0; }
  .vende-chat .vc-tela { order: 1; }
  .vende-chat .vd-painel { order: 2; margin: 0; }
  .vende-chat .vd-botoes { order: 3; }
  .vende-chat .vd-aviso { order: 4; margin: 0; }
  .vende-chat .vd-acoes { order: 5; margin: 0; }
  .vende-chat .vc-fio { max-height: 220px; }
  .vd-btn { padding: 12px; gap: 8px; font-size: 13.5px; }
  .vende-barra { bottom: 10px; gap: 12px; padding: 10px 10px 10px 18px; }
  .vb-t { font-size: 15px; }
  .vb-p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-trilho { animation: none; } .vende-fita { overflow-x: auto; }
  .vd-estouro span { animation: none; } .vende-barra { transition: none; }
}

/* ── 12. o EXPLORAR (repaginação 14/10): cabeçalho de revista com o preço, a fita de filtros com a contagem e a ordem,
   a grade que abre com uma CAPA dupla e as páginas de 24 em número de ourives ── */
.exp-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 56px; margin-bottom: 34px; }
.exp-titulo h1 { font-size: clamp(52px, 7vw, 104px); line-height: .86; max-width: 11ch; margin: 14px 0 22px; text-wrap: balance; }
.exp-titulo h1::after { content: ""; display: block; width: clamp(62px, 8vw, 126px); height: 2px; margin-top: 22px; background: linear-gradient(90deg, var(--s-brand-2, var(--s-brand)), transparent); }
.exp-lead { max-width: 58ch; margin: 0; color: var(--s-muted); font-size: 16px; line-height: 1.6; }
.exp-preco { display: grid; justify-items: start; gap: 6px; min-width: 230px; padding: 4px 0 4px 28px; border-left: 1px solid var(--s-line-2, var(--s-line)); }
.exp-preco-rot, .exp-preco-p { font: 500 10px/1.4 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--s-muted); }
.exp-preco-v { font: italic 400 clamp(44px, 4.4vw, 62px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.03em; font-variant-numeric: lining-nums;
  background: linear-gradient(100deg, #7A4518 0%, #C08A2E 42%, #A9742A 68%, #6E3D14 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .exp-preco-v { background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; }
.exp-preco-a { margin-top: 10px; font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-brand);
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: color .3s var(--s-ease); }
.exp-preco-a:hover, .exp-preco-a:focus-visible { color: var(--s-heading); }

/* tudo na largura da GRADE da casa (--ds-layout-grid), alinhado pela mesma margem */
main.wrap > .exp-topo, main.wrap > .exp-barra, main.wrap > .exp-conta, main.wrap > .exp-vazio, main.wrap > .exp-paginas, main.wrap > .exp-fim {
  width: 100%; max-width: var(--ds-layout-grid, 1180px); margin-left: auto; margin-right: auto; }
main.wrap > .colecao-barra.exp-barra { margin-top: 0; margin-bottom: 18px; }
main.wrap > .exp-conta { text-align: left; }
.exp-barra a.filtro { text-decoration: none; }
.exp-barra a.filtro:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; }
.exp-conta { margin: 0 0 22px; font: 500 10px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--s-muted); font-variant-numeric: tabular-nums; }

/* a CAPA: a 1ª criadora da 1ª página ocupa 2 colunas × 2 fileiras (só com 4 colunas; no celular a grade segue igual) */
@media (min-width: 1180px) {
  .exp-grade.exp-com-capa { grid-auto-flow: dense; }
  .exp-grade.exp-com-capa > .mcard:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .exp-grade.exp-com-capa > .mcard:first-child .cover { flex: 1; height: 100%; aspect-ratio: auto; clip-path: none; border-radius: 2px; }
  .exp-grade.exp-com-capa > .mcard:first-child .legenda h3 { font-size: clamp(30px, 2.6vw, 42px); }
  .exp-grade.exp-com-capa > .mcard:first-child::before { font-size: 22px; }
}

.exp-vazio { display: grid; justify-items: center; gap: 16px; padding: 64px 20px 72px; text-align: center; border-bottom: 1px solid var(--s-line); }
.exp-vazio-n { font: italic 400 120px/1 'Bodoni Moda', var(--font-display); color: var(--s-line-2, rgba(214, 178, 110, .4)); }
.exp-vazio-t { max-width: 44ch; margin: 0 0 6px; font: 400 clamp(22px, 2.2vw, 28px)/1.3 var(--font-display); color: var(--s-heading); text-wrap: balance; }

.exp-paginas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin: 46px 0 0; padding-top: 22px; border-top: 1px solid var(--s-line); }
.exp-paginas ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.exp-paginas li a, .exp-paginas li span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border: 1px solid transparent; border-radius: 2px;
  font: italic 400 20px/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-muted); text-decoration: none; transition: color .3s var(--s-ease), border-color .3s var(--s-ease); }
.exp-paginas li a:hover, .exp-paginas li a:focus-visible { color: var(--s-heading); border-color: var(--s-line-2, var(--s-line)); }
.exp-paginas li .on { color: var(--s-heading); border-color: var(--s-brand); background: var(--s-realce); box-shadow: inset 0 -2px 0 var(--s-brand); }
.exp-pag-seta { font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-brand); text-decoration: none; padding: 14px 4px; }
.exp-pag-seta:hover, .exp-pag-seta:focus-visible { color: var(--s-heading); }

.exp-fim { margin: clamp(56px, 7vw, 92px) 0 0; padding: clamp(34px, 4vw, 52px) 0; display: grid; justify-items: center; gap: 12px; text-align: center;
  border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.exp-fim-t { margin: 0; font: italic 400 clamp(30px, 3.6vw, 48px)/1.08 'Bodoni Moda', var(--font-display); color: var(--s-heading); text-wrap: balance; }
.exp-fim-p { max-width: 56ch; margin: 0 0 10px; color: var(--s-muted); line-height: 1.6; }
.exp-fim-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 900px) {
  .exp-topo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .exp-preco { grid-auto-flow: row; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--s-line-2, var(--s-line)); min-width: 0; }
}
@media (max-width: 1179px) {
  .exp-grade.exp-com-capa > .mcard:first-child { grid-column: 1 / -1; }
  .exp-grade.exp-com-capa > .mcard:first-child .cover { clip-path: none; border-radius: 2px; aspect-ratio: 4 / 5; }
  .exp-grade.exp-com-capa > .mcard:first-child .legenda h3 { font-size: clamp(26px, 6vw, 34px); }
}
@media (max-width: 760px) {
  .exp-titulo h1 { font-size: clamp(44px, 13vw, 60px); margin-bottom: 16px; }
  .exp-lead { font-size: 15px; }
  .exp-barra .ordem { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .exp-barra .ordem .filtro { white-space: nowrap; padding: 8px 11px; }
  .exp-paginas { gap: 8px 14px; }
  .exp-paginas li a, .exp-paginas li span { min-width: 40px; height: 40px; font-size: 18px; }
  .exp-vazio-n { font-size: 88px; }
}

/* ── 13. a HOME que MONETIZA (o Rei, 14/10: «coloca alguma promoção… mais blocos… mais bonito… quanto mais monetizar,
   melhor»): a faixa da 1ª recarga, a oferta de antes/depois, os 4 usos das moedas, o presente exclusivo, o Top fãs e
   os pacotes de joalheria (canto 2px, fita reta: nada de pílula) ── */
.vende-promo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; padding: 16px clamp(16px, 4vw, 48px);
  text-decoration: none; color: var(--s-text); border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line);
  background: linear-gradient(90deg, rgba(110, 12, 20, 0), rgba(110, 12, 20, .38) 30%, rgba(110, 12, 20, .38) 70%, rgba(110, 12, 20, 0));
  transition: background .4s var(--s-ease); }
.vende-promo:hover, .vende-promo:focus-visible { background: linear-gradient(90deg, rgba(110, 12, 20, 0), rgba(140, 18, 28, .55) 30%, rgba(140, 18, 28, .55) 70%, rgba(110, 12, 20, 0)); }
.vp-selo { font-size: 20px; line-height: 1; }
.vp-t { font: 500 11px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--s-brand-2, var(--s-brand)); }
.vp-conta { font: italic 400 18px/1.3 'Bodoni Moda', var(--font-display); color: var(--s-heading); font-variant-numeric: lining-nums; }
.vp-cta { font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-brand); padding-bottom: 3px; border-bottom: 1px solid currentColor; }

.vo-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.vo-t { margin: 0 0 14px; font: italic 400 clamp(34px, 3.8vw, 56px)/1.04 var(--font-display); color: var(--s-heading); text-wrap: balance; }
.vo-p { max-width: 54ch; margin: 0 0 22px; color: var(--s-muted); line-height: 1.65; }
.vo-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-line); max-width: 520px; }
.vo-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--s-line); }
.vo-l-nome { font: 400 18px/1.2 var(--font-display); color: var(--s-heading); }
.vo-l-de { color: var(--s-muted); text-decoration: line-through; text-decoration-color: rgba(214, 178, 110, .55); font-variant-numeric: tabular-nums; }
.vo-l-para { display: inline-flex; align-items: center; gap: 6px; min-width: 92px; justify-content: flex-end; font: italic 400 20px/1 'Bodoni Moda', var(--font-display); color: var(--s-brand); font-variant-numeric: lining-nums; }
.vo-cartao { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 28px 30px; text-align: center; border-radius: 2px;
  border: 1px solid rgba(214, 178, 110, .75); box-shadow: inset 0 0 0 6px rgba(11, 7, 6, .55), inset 0 0 0 7px rgba(214, 178, 110, .28), 0 30px 70px -40px rgba(214, 178, 110, .45);
  background: radial-gradient(120% 80% at 50% 0%, rgba(140, 18, 28, .55), rgba(20, 8, 8, .9) 70%); }
.vo-cartao .vh-fita { top: -11px; }
.vo-nome { font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--s-muted); }
.vo-de { margin-top: 6px; font: italic 400 26px/1 'Bodoni Moda', var(--font-display); color: var(--s-muted); text-decoration: line-through; text-decoration-color: rgba(214, 178, 110, .6); }
.vo-para { display: inline-flex; align-items: center; gap: 10px; font: italic 400 clamp(56px, 6vw, 84px)/.95 'Bodoni Moda', var(--font-display); letter-spacing: -.03em; font-variant-numeric: lining-nums;
  background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vo-presente { font: 600 11px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--s-brand-2, var(--s-brand)); }
.vo-rende { font-size: 13px; color: var(--s-muted); }
.vo-preco { margin: 6px 0 10px; padding-top: 12px; border-top: 1px solid var(--s-line); width: 100%; font: 600 22px/1 var(--font-body, 'Jost', sans-serif); color: var(--s-heading); }
.vo-cartao .btn { width: 100%; justify-content: center; }
.vo-nota { font-size: 11.5px; color: var(--s-muted); letter-spacing: .04em; }

.vh-usos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.vh-usos li { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; }
.vh-usos li + li { border-left: 1px solid var(--s-line); }
.vu-emoji { font-size: 24px; line-height: 1; }
.vu-t { font: 400 20px/1.15 var(--font-display); color: var(--s-heading); }
.vu-v { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .04em; color: var(--s-brand); font-variant-numeric: tabular-nums; }

/* os pacotes viram JOALHERIA: canto 2px, fita reta, o mais popular sobe e brilha, o VIP de preto e ouro */
.vh-pac { border-radius: 2px; background: linear-gradient(180deg, rgba(110, 12, 20, .26), rgba(20, 8, 8, .2)); }
.vh-fita { border-radius: 2px; padding: 5px 11px; box-shadow: 0 6px 18px -8px rgba(214, 178, 110, .7); }
.vh-fitado { box-shadow: inset 0 0 0 1px rgba(214, 178, 110, .25), 0 22px 50px -34px rgba(214, 178, 110, .6); }
.vh-pac.vh-popular { transform: translateY(-6px); background: radial-gradient(130% 90% at 50% 0%, rgba(150, 22, 32, .5), rgba(20, 8, 8, .25) 75%); }
.vh-pac.vh-popular:hover, .vh-pac.vh-popular:focus-visible { transform: translateY(-10px); }
.vh-pac.vh-vip { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(30, 20, 10, .35)); border-color: rgba(214, 178, 110, .85); }
.vh-extra { font: 600 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #1A0D04; background: var(--c-ouro-joia); padding: 4px 8px; border-radius: 2px; }

.vh-presentes li.vh-exclusivo { position: relative; background: radial-gradient(120% 90% at 50% 0%, rgba(214, 178, 110, .16), rgba(214, 178, 110, 0) 70%);
  box-shadow: inset 0 0 0 1px rgba(214, 178, 110, .55); }
.vh-p-so { font: 600 9.5px/1.2 var(--font-body, 'Jost', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--s-brand-2, var(--s-brand)); }

.vt-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.vt-lead { margin: 0 0 24px; font: 400 clamp(20px, 2vw, 26px)/1.45 var(--font-display); color: var(--s-heading); text-wrap: pretty; }
.vt-placar { margin: 0; border-top: 1px solid var(--s-brand); }
.vt-placar ol { list-style: none; margin: 0; padding: 0; }
.vt-placar li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 14px 6px; border-bottom: 1px solid var(--s-line); }
.vt-placar li:first-child { background: linear-gradient(90deg, rgba(214, 178, 110, .16), rgba(214, 178, 110, 0)); }
.vt-pos { font: italic 400 30px/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-line-2, rgba(214, 178, 110, .45)); }
.vt-placar li:first-child .vt-pos { background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vt-quem { font: 400 18px/1.2 var(--font-display); color: var(--s-heading); }
.vt-nivel { font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--s-brand); }
.vt-pts { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; color: var(--s-muted); font-size: 13px; }
.vt-placar figcaption { margin-top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-muted); }

@media (max-width: 900px) {
  .vo-grade, .vt-grade { grid-template-columns: minmax(0, 1fr); }
  .vh-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-usos li:nth-child(3) { border-left: 0; }
  .vh-usos li:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
}
@media (max-width: 760px) {
  .vende-promo { gap: 6px 14px; padding: 14px 16px; text-align: center; }
  .vp-conta { font-size: 16px; }
  .vo-cartao { padding: 34px 18px 24px; }
  .vt-placar li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; }
  .vt-placar .vt-nivel { grid-column: 2; grid-row: 2; }
  .vt-pts { grid-row: 1 / span 2; grid-column: 3; min-width: 0; }
  .vt-pos { font-size: 24px; grid-row: 1 / span 2; }
  .vh-pac.vh-popular { transform: none; }
}

/* ── 14. o CARD da criadora (repaginação 14/10): o selo vira placa de joalheria (canto 2px, nada de pílula) e se alinha
   com o nome; a linha de baixo diz posts · preço por mês; no hover a moldura de ouro fecha e o «Ver perfil →» sobe;
   sem foto, o monograma ganha o fio de ouro ── */
.seal { border-radius: 2px; padding: 5px 9px 4px; letter-spacing: .2em; line-height: 1.2; }
.mcard .seals { left: 23px; top: 22px; gap: 6px; }
.mcard .seal { box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .9); }

.mcard .legenda .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.mcard-preco { color: var(--s-brand); font-variant-numeric: lining-nums; }
.mcard .legenda .meta::after { display: none; } /* o fio solto depois do texto sai: agora a linha termina no preço */
.mcard-preco::before { content: "·"; margin: 0 .7em; color: rgba(243, 233, 218, .45); }

.mcard-ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 3px; border-bottom: 1px solid currentColor;
  font: 500 10px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--s-brand);
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--s-ease), transform .35s var(--s-ease); }
.mcard:hover .mcard-ver, .mcard:focus-visible .mcard-ver { opacity: 1; transform: none; }
.mcard .legenda h3 { transition: color .35s var(--s-ease); }
.mcard:hover .legenda h3, .mcard:focus-visible .legenda h3 { color: #F6DFA6; }

/* a moldura de joia: no hover o fio interno vira ouro duplo e o canto de cima acende */
.mcard:hover .cover::before, .mcard:focus-visible .cover::before {
  border-color: rgba(245, 216, 156, .78); box-shadow: inset 0 0 0 3px rgba(11, 7, 6, .35), inset 0 0 0 4px rgba(214, 178, 110, .30); }
.mcard:focus-visible { outline: none; }
.mcard:focus-visible .cover { outline: 1px solid var(--s-brand); outline-offset: 4px; }

/* sem foto: o monograma ganha o fio de ouro embaixo da letra */
.mcard .cover .inicial::before { content: ""; position: absolute; left: 50%; top: 66%; width: 64px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(233, 199, 123, .7), transparent); pointer-events: none; }

/* no toque não existe hover: o convite fica fora, o card fala pelo nome e pelo preço */
@media (hover: none) { .mcard-ver { display: none; } }
@media (max-width: 760px) {
  .mcard .seals { left: 12px; top: 12px; }
  .mcard .legenda .meta { font-size: 8.5px; }
  .mcard-preco::before { margin: 0 .5em; }
}
@media (prefers-reduced-motion: reduce) { .mcard-ver { transition: none; transform: none; } }

/* ── 15. o TOPO do perfil (repaginação 14/10): retrato + nome + os números da coleção; o cartão de assinatura de
   joalheria sobe sobre a capa (preço em Bodoni, o que libera, o botão); os mimos numa fileira só ── */
.perfil-cab.pf-cab { grid-template-columns: auto minmax(0, 1fr) minmax(300px, 360px); align-items: start; gap: 18px 36px; }
.pf-cab > .avatar { margin-top: -88px; }
.pf-quem { padding-top: 18px; min-width: 0; }
.pf-numeros { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 18px 0 0; padding: 0; }
.pf-numeros li { font: 500 10.5px/1.2 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); }
.pf-numeros li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 16px; vertical-align: -1px; background: rgba(214, 178, 110, .45); }
.pf-numeros b { font: italic 500 22px/1 'Bodoni Moda', var(--font-display); letter-spacing: 0; color: var(--s-heading); font-variant-numeric: lining-nums; margin-right: 4px; }

.pf-assina { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: -132px; padding: 30px 28px 24px;
  border-radius: 2px; border: 1px solid rgba(214, 178, 110, .7);
  box-shadow: inset 0 0 0 6px rgba(11, 7, 6, .5), inset 0 0 0 7px rgba(214, 178, 110, .24), 0 34px 70px -40px rgba(0, 0, 0, .95);
  background: radial-gradient(120% 80% at 50% 0%, rgba(140, 18, 28, .6), rgba(20, 8, 8, .96) 72%); }
.perfil-cab .pf-assina { justify-content: flex-start; flex-wrap: nowrap; }
.pf-assina .kicker { margin: 0; justify-content: center; text-align: center; }
.pf-assina .kicker::before { display: none; }
.perfil-cab.pf-cab { padding-right: 0; }
.pf-preco { display: flex; align-items: baseline; justify-content: center; gap: 4px; font: italic 400 clamp(40px, 3.6vw, 52px)/1 'Bodoni Moda', var(--font-display);
  letter-spacing: -.02em; font-variant-numeric: lining-nums; background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-preco small { font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); -webkit-text-fill-color: var(--s-muted); }
.pf-vantagens { list-style: none; margin: 4px 0 6px; padding: 12px 0 0; border-top: 1px solid var(--s-line); display: grid; gap: 9px; }
.pf-vantagens li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.4; color: var(--s-text); }
.pf-vantagens li::before { content: "✦"; position: absolute; left: 0; top: 0; font-size: 11px; color: var(--s-brand); }
.pf-assina form, .pf-assina .btn { width: 100%; }
.pf-assina .btn { justify-content: center; min-width: 0; }
.pf-mimo { align-self: center; padding-bottom: 3px; border-bottom: 1px solid currentColor; text-decoration: none;
  font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-brand); transition: color .3s var(--s-ease); }
.pf-mimo:hover, .pf-mimo:focus-visible { color: #F6DFA6; }
.pf-assinante { margin-top: -88px; }

/* os mimos: a gorjeta estreita, os presentes numa fileira só (o exclusivo do Superfan entra junto, sem cair sozinho) */
#mimos { scroll-margin-top: 110px; }
.hc-mimo .hc-mimo-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; }
.hc-mimo .hc-presentes { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.hc-mimo .hc-presente { border-radius: 2px; }

@media (max-width: 1080px) {
  .perfil-cab.pf-cab { grid-template-columns: auto minmax(0, 1fr); }
  .pf-assina, .pf-assinante { grid-column: 1 / -1; margin-top: 8px; max-width: 520px; }
  .hc-mimo .hc-mimo-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .perfil-cab.pf-cab { grid-template-columns: minmax(0, 1fr); }
  .pf-cab > .avatar { margin-top: 0; }
  .pf-quem { padding-top: 0; }
  .pf-numeros li + li::before { margin: 0 10px; }
  .pf-numeros b { font-size: 19px; }
  .pf-assina, .pf-assinante { max-width: none; padding: 24px 18px 20px; }
  .hc-mimo .hc-presentes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 16. o PORTÃO 18+ (repaginação 14/10): cartão de joalheria (canto 2px, fio de ouro duplo), o «18+» de marca-d'água,
   os 2 botões e as 3 garantias da casa numa régua de 3 colunas; a saída com classe ── */
section.narrow.portao { max-width: 760px; width: 100%; margin: clamp(28px, 7vh, 72px) auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px) clamp(28px, 4vw, 40px) !important;
  text-align: center; border-radius: 2px; clip-path: none; border: 1px solid rgba(214, 178, 110, .7);
  box-shadow: inset 0 0 0 7px rgba(11, 7, 6, .55), inset 0 0 0 8px rgba(214, 178, 110, .26), 0 40px 90px -50px rgba(0, 0, 0, .95);
  background: radial-gradient(110% 70% at 50% 0%, rgba(140, 18, 28, .5), rgba(20, 8, 8, .96) 70%); }
section.narrow.portao .kicker { justify-content: center; }
.portao-lead { max-width: 46ch; margin: 18px auto 0; line-height: 1.65; }
.portao-botoes { justify-content: center; gap: 12px; margin-top: 30px; }
.portao-garantias { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0 0; padding: 0;
  border-top: 1px solid rgba(214, 178, 110, .45); text-align: left; }
.portao-garantias li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 8px; padding: 18px 16px 6px; }
.portao-garantias li + li { border-left: 1px solid var(--s-line); }
.pg-ico { grid-row: 1 / span 2; font-size: 14px; line-height: 1.3; color: var(--s-brand); }
.portao-garantias b { font: 500 10.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-heading); }
.portao-garantias span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--s-muted); }
.portao p { margin-inline: auto; }
.portao-nota { margin: 22px auto 0; max-width: none; font-size: 11.5px; letter-spacing: .06em; color: var(--s-muted); }
.portao-fora .btn { margin-top: 14px; }
.portao-fora h1 { font-size: clamp(40px, 5vw, 64px); }

@media (max-width: 760px) {
  section.narrow.portao { margin: 18px auto; }
  .portao-botoes .btn { width: 100%; min-width: 0; }
  .portao-garantias { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .portao-garantias li { padding: 14px 4px 10px; }
  .portao-garantias li + li { border-left: 0; border-top: 1px solid var(--s-line); }
}

/* ── 17. ENTRAR e CRIAR CONTA (repaginação 14/10): o formulário num cartão de joalheria e, ao lado, a página de revista
   (o número de criadoras do banco em Bodoni, o que espera quem volta ou o que a conta abre); senha com «Mostrar» ── */
.auth { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 420px); justify-content: center; align-items: center; gap: clamp(32px, 6vw, 96px);
  width: 100%; max-width: var(--ds-layout-grid, 1180px); margin: clamp(28px, 6vh, 64px) auto; }
.auth-cartao { position: relative; padding: clamp(32px, 4vw, 48px) clamp(22px, 4vw, 44px); border-radius: 2px; border: 1px solid rgba(214, 178, 110, .7);
  box-shadow: inset 0 0 0 7px rgba(11, 7, 6, .55), inset 0 0 0 8px rgba(214, 178, 110, .24), 0 40px 90px -50px rgba(0, 0, 0, .95);
  background: radial-gradient(110% 60% at 50% 0%, rgba(140, 18, 28, .45), rgba(20, 8, 8, .96) 70%); }
.auth-cartao h1 { margin: 12px 0 6px; font: italic 500 clamp(44px, 4.6vw, 64px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; color: var(--s-heading); }
.auth-cartao > .muted { margin: 0 0 8px; }
.auth-cartao form { margin-top: 10px; }
.auth-cartao label { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.auth-cartao label.check { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.5; color: var(--s-text); margin: 22px 0 22px; }
.auth-cartao input[type=text], .auth-cartao input[type=email], .auth-cartao input[type=password], .auth-cartao input[type=date] {
  border-radius: 2px; background: rgba(11, 7, 6, .55); border-color: rgba(214, 178, 110, .32); transition: border-color .3s var(--s-ease), box-shadow .3s var(--s-ease); }
.auth-cartao input:focus { border-color: var(--s-brand); box-shadow: 0 0 0 3px rgba(214, 178, 110, .16); outline: none; }
.auth-cartao .btn.block { margin-top: 24px; }
.auth-opcional { margin-left: 6px; letter-spacing: .12em; color: rgba(214, 178, 110, .6); }
.auth-senha { position: relative; }
.auth-senha input { padding-right: 96px; }
.auth-ver { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 0; background: none; cursor: pointer;
  font: 500 10px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-brand); }
.auth-ver:hover, .auth-ver:focus-visible { color: #F6DFA6; }
.auth-cartao .auth-troca { margin: 26px auto 0; max-width: none; text-align: center; }

.auth-lado { display: flex; flex-direction: column; gap: 6px; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid rgba(214, 178, 110, .35); }
.auth-num { font: italic 400 clamp(72px, 8vw, 116px)/.9 'Bodoni Moda', var(--font-display); letter-spacing: -.04em; font-variant-numeric: lining-nums;
  background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-num-t { font: 500 10.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--s-muted); }
.auth-lado h2 { margin: 28px 0 10px; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--font-display); color: var(--s-heading); }
.auth-lado p { margin: 0; max-width: 38ch; color: var(--s-muted); line-height: 1.65; }
.auth-vantagens { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--s-line); }
.auth-vantagens li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--s-line); color: var(--s-text); line-height: 1.45; }
.auth-vantagens li::before { content: "✦"; position: absolute; left: 0; top: 13px; font-size: 11px; color: var(--s-brand); }
.auth-vantagens li.auth-v-ouro { color: #F6DFA6; }

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 36px; }
  .auth-lado { padding-left: 0; padding-top: 26px; border-left: 0; border-top: 1px solid rgba(214, 178, 110, .35); }
}
@media (max-width: 760px) { .auth { margin: 18px auto; } }

/* ── 18. MINHA CONTA (repaginação 14/10): cabeçalho de revista, a régua dos 4 números em Bodoni, as assinaturas como
   fichas de joalheria (preço, situação, até quando, a ação certa), perfil e senha lado a lado ── */
main.wrap > .conta-topo, main.wrap > .conta-regua, main.wrap > .conta-sec, main.wrap > .sf-meus-painel {
  width: 100%; max-width: var(--ds-layout-grid, 1180px); margin-left: auto; margin-right: auto; }
.conta-topo { margin-top: clamp(20px, 4vw, 44px); }
.conta-topo h1 { margin: 12px 0 8px; font: italic 500 clamp(48px, 6vw, 84px)/.95 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; }
.conta-ola { margin: 0; font: 400 clamp(20px, 2vw, 26px)/1.3 var(--font-display); color: var(--s-muted); }

.conta-regua { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 34px auto 56px; padding: 0;
  border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.conta-regua li { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; min-width: 0; }
.conta-regua li + li { border-left: 1px solid var(--s-line); }
.cr-r { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
.cr-v { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: italic 400 clamp(32px, 3vw, 44px)/1 'Bodoni Moda', var(--font-display);
  font-variant-numeric: lining-nums; color: var(--s-heading); }
.cr-v .hc-ico { width: .7em; height: .7em; }
.cr-nivel, .cr-desde { font-size: clamp(20px, 1.8vw, 26px); }
.cr-nivel .sf-selo { font-style: normal; }
.cr-a { font: 500 10.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--s-brand); text-decoration: none; }
a.cr-a:hover, a.cr-a:focus-visible { color: #F6DFA6; }
.cr-quem { color: var(--s-muted); letter-spacing: .1em; text-transform: none; font-size: 12.5px; }

.conta-sec { margin-bottom: clamp(44px, 6vw, 72px); }
.conta-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: 18px 22px; border-radius: 2px; border: 1px solid var(--s-line);
  background: linear-gradient(90deg, rgba(110, 12, 20, .22), rgba(20, 8, 8, .2)); transition: border-color .3s var(--s-ease), background .3s var(--s-ease); }
.cs:hover { border-color: rgba(214, 178, 110, .55); }
.cs-viva { border-color: rgba(214, 178, 110, .45); box-shadow: inset 2px 0 0 var(--s-brand); }
.cs-fim { opacity: .72; }
.cs-nome { font: italic 500 clamp(22px, 2vw, 28px)/1.1 'Bodoni Moda', var(--font-display); color: var(--s-heading); text-decoration: none; }
.cs-nome:hover { color: #F6DFA6; }
.cs-preco { color: var(--s-brand); font-variant-numeric: lining-nums; font-size: 14px; }
.cs-ate { color: var(--s-muted); font-size: 13px; }
.cs-r { display: block; font: 500 9.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 3px; }
.cs-ir { justify-self: end; padding-bottom: 3px; border-bottom: 1px solid currentColor; text-decoration: none; white-space: nowrap;
  font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-brand); }
.cs-ir:hover, .cs-ir:focus-visible { color: #F6DFA6; }
.conta-vazio { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 24px; border: 1px dashed var(--s-line-2, rgba(214, 178, 110, .4)); border-radius: 2px; }
.conta-vazio p { margin: 0; font: 400 20px/1.3 var(--font-display); color: var(--s-heading); }
main.wrap > .sf-meus-painel { margin-bottom: clamp(44px, 6vw, 72px); }

.conta-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.conta-forms .panel { border-radius: 2px; }
.conta-forms h3 { margin: 0 0 6px; }
.conta-forms label { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.conta-forms input, .conta-forms textarea { border-radius: 2px; }
.conta-forms .btn { margin-top: 20px; }

@media (max-width: 1000px) {
  .conta-regua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conta-regua li:nth-child(3) { border-left: 0; }
  .conta-regua li:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
  .cs { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-preco { justify-self: end; }
  .cs-ir { grid-column: 2; grid-row: 3; }
  .cs-ate { grid-column: 1; grid-row: 3; }
}
@media (max-width: 760px) {
  .conta-regua li { padding: 18px 14px 16px; }
  .conta-forms { grid-template-columns: minmax(0, 1fr); }
  .cs { padding: 16px; gap: 10px 16px; }
}

/* ── 19. MENSAGENS (repaginação 14/10): cabeçalho de revista, a lista como índice de cartas (foto, nome, a última
   linha e a hora) e a conversa num papel de carta: quem fala em Bodoni, o aviso de IA numa faixa de ouro visível,
   as bolhas de joalheria e a caixa de escrever presa embaixo ── */
main.wrap > .chat-topo, main.wrap > .chat { width: 100%; max-width: var(--ds-layout-grid, 1180px); margin-left: auto; margin-right: auto; }
.chat-topo { margin: clamp(20px, 4vw, 44px) auto 26px; }
.chat-topo h1 { margin: 12px 0 0; font: italic 500 clamp(48px, 6vw, 84px)/.95 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; }

main.wrap > .chat { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 24px; align-items: stretch; min-height: 0; }
.chat > .panel.chat-lista, .chat > .panel.chat-conversa { border-radius: 2px; }
.chat .chat-lista { align-self: start; padding: 0 !important; overflow: hidden; border: 1px solid var(--s-line); }
.cl-cab { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid var(--s-brand); }
.cl-t { font: 500 10.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--s-muted); }
.cl-n { font: italic 400 26px/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-brand); }
.cl-vazio { padding: 18px 20px 6px; margin: 0; }
.cl-explorar { display: inline-block; margin: 6px 20px 20px; font: 500 10.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-brand); text-decoration: none; }
.chat .chat-lista a.cl-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0; padding: 16px 20px;
  border-radius: 0; border: 0; border-bottom: 1px solid var(--s-line); border-left: 2px solid transparent; box-shadow: none; background: none;
  transition: background .3s var(--s-ease), border-color .3s var(--s-ease); }
.chat .chat-lista a.cl-item::after { display: none; }
.chat .chat-lista a.cl-item:hover { background: rgba(140, 18, 28, .16); }
.chat .chat-lista a.cl-item.on { border-left-color: var(--s-brand); background: linear-gradient(90deg, rgba(140, 18, 28, .38), rgba(20, 8, 8, 0)); }
.cl-item .avatar.sm { width: 44px; height: 44px; object-fit: cover; font: italic 400 20px/44px 'Bodoni Moda', var(--font-display); text-align: center;
  box-shadow: 0 0 0 1px rgba(214, 178, 110, .45); }
.cl-item.on .avatar.sm { box-shadow: 0 0 0 1px var(--s-brand), 0 0 0 4px rgba(214, 178, 110, .14); }
.cl-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-txt .sf-titulo-linha { font: 400 17px/1.2 var(--font-display); color: var(--s-heading); }
.cl-ultima { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--s-muted); }
.cl-hora { align-self: start; padding-top: 3px; font: 500 10px/1.2 var(--font-body, 'Jost', sans-serif) !important; letter-spacing: .12em !important; color: var(--s-muted); white-space: nowrap; }
.cl-item.on .cl-hora { color: var(--s-brand); }

.chat .chat-conversa { display: flex; flex-direction: column; min-height: 560px; padding: 0 !important; overflow: hidden; border: 1px solid rgba(214, 178, 110, .45);
  background: radial-gradient(120% 50% at 50% 0%, rgba(110, 12, 20, .28), rgba(20, 8, 8, .9) 70%); }
.ch-cab { display: flex; align-items: center; gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid var(--s-line); }
.ch-cab > .avatar { width: 56px; height: 56px; flex: none; object-fit: cover; font: italic 400 26px/56px 'Bodoni Moda', var(--font-display); text-align: center;
  box-shadow: 0 0 0 1px var(--s-brand), 0 0 0 5px rgba(214, 178, 110, .12); }
.ch-quem { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ch-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ch-nome { margin: 0; font: italic 500 clamp(28px, 2.6vw, 38px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.01em; color: var(--s-heading); }
.ch-quem .sf-conversa { align-self: flex-start; margin: 0; }
.ch-perfil { flex: none; padding-bottom: 3px; border-bottom: 1px solid currentColor; text-decoration: none; white-space: nowrap;
  font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-brand); }
.ch-perfil:hover, .ch-perfil:focus-visible { color: #F6DFA6; }
.chat-conversa > .ai-notice { position: relative; max-width: none; width: auto; margin: 0; padding: 12px 26px 12px 50px; border: 0; border-bottom: 1px solid rgba(214, 178, 110, .4); border-radius: 0;
  background: linear-gradient(90deg, rgba(214, 178, 110, .16), rgba(214, 178, 110, .04)); color: #F6DFA6; font-size: 13px; line-height: 1.5; }
.chat-conversa > .ai-notice::before { content: "✦"; position: absolute; left: 26px; top: 12px; color: var(--s-brand); }

.chat-conversa .thread { flex: 1; max-height: 56vh; padding: 26px; gap: 14px; background: none; }
.chat-conversa .bubble { max-width: min(78%, 560px); padding: 13px 18px; border-radius: 2px 14px 14px 14px; border: 1px solid rgba(214, 178, 110, .2);
  background: rgba(11, 7, 6, .62); box-shadow: 0 14px 30px -24px #000; font-size: 15px; line-height: 1.55; }
.chat-conversa .bubble.me { border-radius: 14px 2px 14px 14px; border-color: rgba(214, 178, 110, .42); background: linear-gradient(145deg, rgba(140, 18, 28, .82), rgba(72, 12, 23, .95)); }
.chat-conversa .bubble.bot { border-left: 1px solid rgba(214, 178, 110, .2); }
.chat-conversa .bubble .meta { margin-top: 8px; font: 500 9.5px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 223, 166, .55); }
.chat-conversa .bubble.bot .meta { color: var(--s-brand); }
.ch-nada { margin: auto; padding: 30px 0; text-align: center; }

.ch-escreve { padding: 18px 26px 22px; border-top: 1px solid var(--s-line); background: rgba(11, 7, 6, .55); }
.ch-custo { margin: 0 0 12px; }
.ch-form { display: flex; gap: 10px; }
.ch-form input[type=text] { flex: 1; min-width: 0; border-radius: 2px; background: rgba(11, 7, 6, .6); border-color: rgba(214, 178, 110, .32);
  transition: border-color .3s var(--s-ease), box-shadow .3s var(--s-ease); }
.ch-form input[type=text]:focus { border-color: var(--s-brand); box-shadow: 0 0 0 3px rgba(214, 178, 110, .16); outline: none; }
.ch-form .btn { flex: none; }
.ch-escreve details.hc-chat-mimo { border-radius: 2px; margin-top: 14px; }
.ch-motivo { margin: 0; }

.ch-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 26px; text-align: center; }
.ch-vazio-orn { font-size: 18px; color: var(--s-brand); }
.ch-vazio-t { margin: 0; font: italic 400 clamp(34px, 3.4vw, 50px)/1.05 'Bodoni Moda', var(--font-display); color: var(--s-heading); }
.ch-vazio .muted { margin: 0; }

@media (max-width: 900px) {
  main.wrap > .chat { grid-template-columns: minmax(0, 1fr); }
  .chat .chat-conversa { min-height: 0; }
  .chat-conversa .thread { max-height: none; }
  .chat.com-conversa > .chat-conversa { order: -1; }
}
@media (max-width: 760px) {
  .ch-cab { padding: 18px 16px 14px; gap: 12px; }
  .ch-cab > .avatar { width: 46px; height: 46px; line-height: 46px; font-size: 22px; }
  .ch-perfil { display: none; }
  .chat-conversa > .ai-notice { padding: 11px 16px 11px 38px; }
  .chat-conversa > .ai-notice::before { left: 16px; top: 11px; }
  .chat-conversa .thread { padding: 18px 14px; }
  .chat-conversa .bubble { max-width: 88%; }
  .ch-escreve { padding: 14px 14px 16px; }
  .cl-cab { padding: 16px 16px 12px; }
  .chat .chat-lista a.cl-item { padding: 14px 16px; }
}

/* ── 20. HOT COINS · a loja do fã (repaginação 14/10): o título em Bodoni, o saldo num cartão de joalheria com o caminho
   pro extrato, os pacotes na mesma moldura de 2px, «Onde usar» como índice numerado (presentes em etiquetas) e o
   extrato como livro-caixa: entrada em ouro, saída apagada, saldo em Bodoni ── */
main.wrap > .hc-topo, main.wrap > .hc-faixa, main.wrap > .hc-loja, main.wrap > .hc-usos, main.wrap > .hc-extrato-sec {
  width: 100%; max-width: var(--ds-layout-grid, 1180px); margin-left: auto; margin-right: auto; }
.hc-topo > div:first-child h1 { margin: 12px 0 14px; font: 500 clamp(56px, 7vw, 96px)/.92 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; }
.hc-topo > div:first-child h1 em { font-style: italic; color: var(--s-brand); }
.hc-lede { max-width: 44ch; font-size: 16px; line-height: 1.65; }
.hc-saldo-box { position: relative; border-radius: 2px !important; border: 1px solid rgba(214, 178, 110, .7);
  box-shadow: inset 0 0 0 7px rgba(11, 7, 6, .55), inset 0 0 0 8px rgba(214, 178, 110, .24), 0 40px 90px -50px rgba(0, 0, 0, .95) !important; }
.hc-saldo-box::after { display: none; }
.hc-saldo-box .hc-saldo { font-family: 'Bodoni Moda', var(--font-display); font-style: italic; }
.hc-ver-extrato { align-self: flex-start; margin-top: 12px; padding-bottom: 3px; border-bottom: 1px solid currentColor; text-decoration: none;
  font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-brand); }
.hc-ver-extrato:hover, .hc-ver-extrato:focus-visible { color: #F6DFA6; }
.hc-faixa { border-radius: 2px !important; }
.hc-pack { border-radius: 2px !important; }
.hc-pack .hc-preco { border-radius: 2px; }

.hc-usos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.hc-usos-lista > li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; min-width: 0; }
.hc-usos-lista > li + li { border-left: 1px solid var(--s-line); }
.hu-n { font: italic 400 clamp(36px, 3.4vw, 52px)/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums;
  background: var(--c-ouro-joia, linear-gradient(135deg, #F6DFA6, #D6B26E 55%, #8F6A2A)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hu-ico { position: absolute; top: 30px; right: 24px; font-size: 16px; color: var(--s-brand); opacity: .8; }
.hc-usos-lista h3 { margin: 6px 0 0; font: 400 clamp(22px, 2vw, 28px)/1.15 var(--font-display); color: var(--s-heading); }
.hc-usos-lista p { margin: 0; color: var(--s-muted); font-size: 14px; line-height: 1.6; }
.hu-mimos { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hu-mimos li { padding: 5px 9px; border: 1px solid rgba(214, 178, 110, .3); border-radius: 2px; font-size: 12.5px; color: var(--s-text); white-space: nowrap; }
.hu-mimos b { margin-left: 2px; font-weight: 500; color: var(--s-brand); font-variant-numeric: lining-nums; }

main.wrap > .hc-extrato-sec { margin-bottom: clamp(44px, 6vw, 72px); scroll-margin-top: 90px; }
.hc-extrato { width: 100%; border-collapse: collapse; }
.hc-extrato th { padding: 0 16px 12px; border-bottom: 1px solid var(--s-brand); text-align: left; font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
.hc-extrato td { padding: 15px 16px; border-bottom: 1px solid var(--s-line); color: var(--s-text); }
.hc-extrato tbody tr { transition: background .3s var(--s-ease); }
.hc-extrato tbody tr:hover { background: rgba(140, 18, 28, .14); }
.hc-extrato .hx-n { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.hc-extrato .hx-quando { color: var(--s-muted); font-size: 13px; white-space: nowrap; }
.hc-extrato .hx-delta { font: italic 400 20px/1 'Bodoni Moda', var(--font-display); }
.hc-extrato .hx-entrada .hx-delta { color: var(--s-brand); }
.hc-extrato .hx-saida .hx-delta { color: var(--s-muted); }
.hc-extrato .hx-saldo { color: var(--s-heading); }
.hc-extrato-vazio { padding: 22px 0; }

.hc-modal { border-radius: 2px !important; border: 1px solid rgba(214, 178, 110, .7) !important;
  background: radial-gradient(110% 60% at 50% 0%, rgba(140, 18, 28, .5), rgba(20, 8, 8, .97) 70%) !important; }
.hc-modal h2 { font: italic 500 clamp(32px, 3vw, 44px)/1 'Bodoni Moda', var(--font-display); }
.hc-modal-total { font-family: 'Bodoni Moda', var(--font-display); font-style: italic; }

@media (max-width: 1000px) {
  .hc-usos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-usos-lista > li:nth-child(3) { border-left: 0; }
  .hc-usos-lista > li:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
}
@media (max-width: 760px) {
  .hc-usos-lista { grid-template-columns: minmax(0, 1fr); }
  .hc-usos-lista > li + li { border-left: 0; border-top: 1px solid var(--s-line); }
  .hc-usos-lista > li { padding: 22px 4px 24px; }
  .hu-ico { right: 4px; top: 26px; }
  .hc-extrato thead { display: none; }
  .hc-extrato, .hc-extrato tbody { display: block; min-width: 0 !important; width: 100%; border-spacing: 0; }
  .hc-extrato tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--s-line); }
  .hc-extrato td { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .hc-extrato td:nth-child(1) { grid-row: 2; grid-column: 1; }
  .hc-extrato td:nth-child(2) { grid-row: 1; grid-column: 1; }
  .hc-extrato td:nth-child(3) { grid-row: 1; grid-column: 2; }
  .hc-extrato td:nth-child(4) { grid-row: 2; grid-column: 2; font-size: 12.5px; color: var(--s-muted); }
  .hc-extrato .hx-delta { font-size: 19px; }
}

/* ── 21. ÁREA DA CRIADORA (repaginação 14/10): cabeçalho de revista com a foto, as abas de 1px (as 2 telas dela), a régua
   dos 4 números do banco, as seções numeradas, os 4 tipos de ganho como régua em Bodoni e os livros-caixa de saque e
   de entradas, que no celular viram 2 andares ── */
main.wrap > .cr-topo, main.wrap > .cr-abas, main.wrap > .cr-vazio, main.wrap > .cr-tipos, main.wrap > .hc-saque,
main.wrap > .cr-entradas, main.wrap > .sf-fas { width: 100%; max-width: var(--ds-layout-grid, 1180px); margin-left: auto; margin-right: auto; }
.cr-topo { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); margin-top: clamp(20px, 4vw, 44px); }
.cr-topo > .avatar { width: clamp(76px, 8vw, 112px); height: clamp(76px, 8vw, 112px); flex: none; object-fit: cover; text-align: center;
  font: italic 400 clamp(34px, 3.4vw, 48px)/clamp(76px, 8vw, 112px) 'Bodoni Moda', var(--font-display);
  box-shadow: 0 0 0 1px var(--s-brand), 0 0 0 6px rgba(214, 178, 110, .12); }
.cr-quem { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-quem h1 { margin: 10px 0 8px; font: italic 500 clamp(44px, 5.6vw, 78px)/.95 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; }
.cr-selos { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-vazio { margin-top: 30px; padding: 24px; border: 1px dashed rgba(214, 178, 110, .4); border-radius: 2px; }
.cr-vazio p { margin: 0; font: 400 20px/1.4 var(--font-display); color: var(--s-heading); }

.cr-abas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 28px; margin-top: 30px; border-bottom: 1px solid var(--s-line); }
.cr-abas a { position: relative; padding: 12px 0 13px; text-decoration: none; white-space: nowrap; color: var(--s-muted);
  font: 500 11px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; transition: color .3s var(--s-ease); }
.cr-abas a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--s-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--s-ease); }
.cr-abas a:hover, .cr-abas a:focus-visible, .cr-abas a.on { color: var(--s-heading); }
.cr-abas a:hover::after, .cr-abas a.on::after { transform: scaleX(1); }
.cr-abas .cr-abas-fora { margin-left: auto; color: var(--s-brand); }
main.wrap > .cr-abas + .hc-topo { margin-top: 8px; }

.cr-regua { margin-top: 28px; }
.cr-forms h3 { font: 400 clamp(22px, 2vw, 28px)/1.15 var(--font-display); color: var(--s-heading); }
.cr-verifica { border-radius: 2px; }
.cr-posts table { border-spacing: 0; }
main.wrap > .sf-fas { margin-bottom: clamp(44px, 6vw, 72px); border-radius: 2px; }

.cr-tipos { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; margin: 0 auto clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.cr-tipos .hc-tipo { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; min-width: 0; border: 0; background: none; box-shadow: none; }
.cr-tipos .hc-tipo + .hc-tipo { border-left: 1px solid var(--s-line); }
.cr-tipos .hc-uso-ico { position: absolute; top: 24px; right: 22px; display: block; width: auto; height: auto; margin: 0; font-size: 15px; line-height: 1; color: var(--s-brand); opacity: .8; }
.cr-tipos .hc-uso-ico::before { display: none; }
main.wrap > .cr-abas + .hc-topo::before { display: none; }
.conta-sec .secao h2#cr-sec-posts + .mais { border: 0; padding: 0; text-decoration: none; font: italic 400 22px/1 'Bodoni Moda', var(--font-display); color: var(--s-brand); }
.conta-sec .secao h2#cr-sec-posts + .mais::before { display: none; }
.cr-tipos .hc-tipo-valor { font: italic 400 clamp(32px, 3vw, 44px)/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-heading); }
.hc-tipo-usd { font-size: 13px; color: var(--s-brand); font-variant-numeric: lining-nums; }

.cr-saque { padding: clamp(22px, 3vw, 32px); border-radius: 2px; border: 1px solid rgba(214, 178, 110, .7);
  box-shadow: inset 0 0 0 7px rgba(11, 7, 6, .55), inset 0 0 0 8px rgba(214, 178, 110, .24);
  background: radial-gradient(110% 60% at 50% 0%, rgba(140, 18, 28, .4), rgba(20, 8, 8, .95) 70%); }
.cr-saque-disp { margin: 0 0 16px; font: 400 clamp(20px, 2vw, 26px)/1.35 var(--font-display); color: var(--s-heading); }
.cr-saque-disp strong { color: var(--s-brand); font-weight: 500; }
.cr-saque-nota { margin: 14px 0 0; }
.cr-saque-nao { margin: 0; padding: 20px 22px; border: 1px dashed rgba(214, 178, 110, .4); border-radius: 2px; color: var(--s-muted); line-height: 1.6; }
main.wrap > .hc-saque { margin-bottom: clamp(44px, 6vw, 72px); }
.hc-saque .cr-livro-wrap { margin-top: 22px; }
main.wrap > .cr-entradas { margin-bottom: clamp(44px, 6vw, 72px); }

.cr-livro { width: 100%; border-collapse: collapse; border-spacing: 0; }
.cr-livro th { padding: 0 16px 12px; border-bottom: 1px solid var(--s-brand); text-align: left; font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
.cr-livro td { padding: 15px 16px; border-bottom: 1px solid var(--s-line); color: var(--s-text); }
.cr-livro tbody tr { transition: background .3s var(--s-ease); }
.cr-livro tbody tr:hover { background: rgba(140, 18, 28, .14); }
.cr-livro .hx-n { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.cr-livro .hx-quando { color: var(--s-muted); font-size: 13px; white-space: nowrap; }
.cr-livro .hx-delta { font: italic 400 20px/1 'Bodoni Moda', var(--font-display); color: var(--s-brand); }
.cr-livro .hx-usd { color: var(--s-muted); }

@media (max-width: 1000px) {
  .cr-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-tipos .hc-tipo:nth-child(3) { border-left: 0; }
  .cr-tipos .hc-tipo:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
}
@media (max-width: 760px) {
  .cr-topo { align-items: flex-start; }
  .cr-abas { gap: 0 20px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .cr-abas .cr-abas-fora { margin-left: 0; }
  .cr-tipos .hc-tipo { padding: 18px 14px; }
  .cr-livro thead { display: none; }
  .cr-livro, .cr-livro tbody { display: block; min-width: 0 !important; width: 100%; }
  .cr-livro tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--s-line); }
  .cr-livro td { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .cr-extrato td:nth-child(3) { grid-row: 1; grid-column: 1; }
  .cr-extrato td:nth-child(4) { grid-row: 1; grid-column: 2; }
  .cr-extrato td:nth-child(2) { grid-row: 2; grid-column: 1; font-size: 13px; color: var(--s-muted); }
  .cr-extrato td:nth-child(5) { grid-row: 2; grid-column: 2; font-size: 12.5px; }
  .cr-extrato td:nth-child(1) { grid-row: 3; grid-column: 1 / -1; }
  .cr-saques td:nth-child(3) { grid-row: 1; grid-column: 1; }
  .cr-saques td:nth-child(4) { grid-row: 1; grid-column: 2; }
  .cr-saques td:nth-child(1) { grid-row: 2; grid-column: 1; }
  .cr-saques td:nth-child(2) { grid-row: 2; grid-column: 2; font-size: 12.5px; color: var(--s-muted); }
}

/* ── 22. PAGAMENTO (repaginação 14/10): a tela do gateway simulado vira um recibo de joalheria — moldura dupla de ouro,
   selo de ambiente de teste ao centro, título em Bodoni, o item e a situação em linhas de recibo e o valor em número
   de ourives; no celular o cartão cabe na tela (a tabela de 580px saía pela direita) e os botões empilham. A marcação
   é do 💳 Checkout: aqui só se veste pelo formulário dela. ── */
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) {
  max-width: 560px !important; margin: clamp(32px, 7vw, 88px) auto clamp(48px, 8vw, 104px) !important; padding: clamp(28px, 4vw, 44px);
  text-align: center; border-radius: 2px; border: 1px solid rgba(214, 178, 110, .7);
  box-shadow: inset 0 0 0 7px rgba(11, 7, 6, .55), inset 0 0 0 8px rgba(214, 178, 110, .24), 0 30px 80px rgba(0, 0, 0, .45);
  background: radial-gradient(110% 55% at 50% 0%, rgba(140, 18, 28, .42), rgba(20, 8, 8, .96) 72%); }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) > .seal { margin: 0 auto; }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) h1 {
  margin: 22px 0 10px !important; font: italic 500 clamp(44px, 6vw, 64px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) h1 + .muted {
  max-width: 400px; margin: 0 auto 26px; font-size: 14px; line-height: 1.6; }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) .table-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) table {
  width: 100%; min-width: 0 !important; border-collapse: collapse; border-top: 1px solid var(--s-brand); text-align: left; }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) tr { background: none !important; }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) th {
  width: 34%; padding: 16px 0 !important; border-bottom: 1px solid var(--s-line); vertical-align: baseline; background: none !important;
  font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) td {
  padding: 16px 0 !important; border-bottom: 1px solid var(--s-line); text-align: right; vertical-align: baseline; background: none !important; color: var(--s-heading); }
main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) td strong {
  font: italic 400 clamp(30px, 3.4vw, 40px)/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-brand); }
main.wrap > .panel:has(> form[action^="/pay/mock/checkout/"]) > form.row { justify-content: center; gap: 12px; margin-top: 28px !important; }
main.wrap > .panel:has(a[href^="/pay/return/"]) > p:last-child { margin-top: 28px !important; }
@media (max-width: 560px) {
  main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) { margin-left: 0 !important; margin-right: 0 !important; }
  main.wrap > .panel:is(:has(> form[action^="/pay/mock/checkout/"]), :has(a[href^="/pay/return/"])) > .seal { max-width: 100%; white-space: normal; line-height: 1.5; }
  main.wrap > .panel:has(> form[action^="/pay/mock/checkout/"]) > form.row { flex-direction: column; align-items: stretch; }
  main.wrap > .panel:has(> form[action^="/pay/mock/checkout/"]) > form.row .btn { width: 100%; }
}

/* ── 23. ADMIN (repaginação 14/10): o painel da casa no mesmo idioma da área da criadora — cabeçalho de revista em
   todas as salas, as abas de 1px (a fila da verificação com a contagem), a régua dos números do banco, o índice das
   salas 01 em diante, as fichas da verificação e todas as tabelas como livro-caixa; sem estilo em linha. ── */
main.wrap > .adm-topo, main.wrap > .adm-abas, main.wrap > .adm-regua, main.wrap > .adm-regua4, main.wrap > .hc-adm-bloco,
main.wrap > .sf-adm-bloco, main.wrap > form, main.wrap > .adm-topo ~ p.muted.small {
  width: 100%; max-width: var(--ds-layout-grid, 1180px); margin-left: auto; margin-right: auto; }
.adm-topo { margin-top: clamp(20px, 4vw, 44px); }
.adm-topo h1 { margin: 10px 0 8px; font: italic 500 clamp(44px, 5.6vw, 78px)/.95 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; }
.adm-topo h1 em { color: var(--s-brand); }
.adm-lede { max-width: 680px; margin: 8px 0 0; line-height: 1.65; }
.adm-abas .adm-conta { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border: 1px solid var(--s-brand);
  border-radius: 2px; color: var(--s-brand); font-size: 10px; letter-spacing: 0; }
main.wrap > .adm-abas + .adm-regua, main.wrap > .adm-abas + .adm-regua4 { margin-top: 28px; }
.adm-regua { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.adm-regua li:nth-child(3) { border-left: 1px solid var(--s-line) !important; border-top: 0 !important; }
.cr-v.adm-alerta { color: var(--s-brand); }
main.wrap > .adm-abas + :is(.conta-sec, form, .hc-adm-bloco, .sf-adm-bloco) { margin-top: 40px; }
main.wrap > .adm-topo ~ p.muted.small { margin-top: 18px; }

.adm-salas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.adm-salas > li { min-width: 0; }
.adm-salas > li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--s-line); }
.adm-salas > li:nth-child(n + 4) { border-top: 1px solid var(--s-line); }
.adm-salas a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 28px; color: inherit; text-decoration: none;
  transition: background .3s var(--s-ease); }
.adm-salas a:hover, .adm-salas a:focus-visible { background: rgba(140, 18, 28, .16); }
.adm-sala-t { font: 400 clamp(22px, 2vw, 28px)/1.15 var(--font-display); color: var(--s-heading); }
.adm-sala-d { color: var(--s-muted); font-size: 14px; line-height: 1.6; }
.adm-sala-a { position: absolute; top: 30px; right: 24px; color: var(--s-brand); transition: transform .3s var(--s-ease); }
.adm-salas a:hover .adm-sala-a { transform: translateX(4px); }

.adm-regua4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--s-brand); border-bottom: 1px solid var(--s-line); }
.adm-regua4 > .panel.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; min-width: 0; margin: 0; padding: 22px;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.adm-regua4 > .panel.stat + .panel.stat { border-left: 1px solid var(--s-line) !important; }
.adm-regua4 .l { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
.adm-regua4 .n { font: italic 400 clamp(30px, 3vw, 42px)/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-heading); }

.adm-livro-wrap { overflow-x: auto; border: 0 !important; background: none !important; box-shadow: none !important; }
.adm-livro { width: 100%; min-width: 0 !important; border-collapse: collapse; border-spacing: 0; }
.adm-livro.adm-pessoas, .adm-livro.adm-matriz, .adm-livro.sf-adm-tabela, .adm-livro.hc-adm-saques { min-width: 720px !important; }
.adm-livro th { padding: 0 14px 12px !important; border-bottom: 1px solid var(--s-brand) !important; background: none !important; text-align: left;
  font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
.adm-livro td { padding: 14px !important; border-bottom: 1px solid var(--s-line) !important; background: none !important; vertical-align: middle; color: var(--s-text); }
.adm-livro tbody tr { transition: background .3s var(--s-ease); }
.adm-livro tbody tr:hover { background: rgba(140, 18, 28, .14); }
.adm-livro .adm-n { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.adm-livro .adm-c { text-align: center; }
.adm-livro .adm-ouro, .adm-livro td.adm-n strong { font: italic 400 20px/1 'Bodoni Moda', var(--font-display); color: var(--s-brand); }
.adm-livro tr.adm-zero td { color: var(--s-muted); }
.adm-livro tr.adm-zero .adm-ouro { color: var(--s-muted); opacity: .6; }
.adm-livro a { color: var(--s-heading); text-decoration: none; border-bottom: 1px solid rgba(214, 178, 110, .35); }
.adm-livro a:hover { color: #F6DFA6; border-color: currentColor; }
.adm-mt { margin-top: 22px; }
.adm-linha-form { gap: 6px; flex-wrap: nowrap; }
.adm-linha-form select { min-width: 0; max-width: 220px; }
.adm-matriz input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--s-brand); }
.adm-trava { color: var(--s-brand); opacity: .55; }
.adm-salvar { margin-top: 22px; }
.adm-num-in { width: 96px; }
main.wrap > .hc-adm-bloco .hc-adm-vendas { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hc-adm-vendas .adm-livro th, .hc-adm-vendas .adm-livro td { padding-left: 8px !important; padding-right: 8px !important; }
.hc-adm-vendas .adm-livro td:first-child { white-space: nowrap; }
.adm-vazio { max-width: none; margin: 0; padding: 20px 22px; border: 1px dashed rgba(214, 178, 110, .4); border-radius: 2px; color: var(--s-muted); line-height: 1.6; }

.adm-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.adm-ficha { padding: clamp(20px, 2.4vw, 28px); border-radius: 2px; border: 1px solid rgba(214, 178, 110, .6);
  box-shadow: inset 0 0 0 6px rgba(11, 7, 6, .5), inset 0 0 0 7px rgba(214, 178, 110, .18);
  background: radial-gradient(110% 70% at 50% 0%, rgba(140, 18, 28, .34), rgba(20, 8, 8, .95) 72%); }
.adm-ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-ficha h3 { margin: 0; font: italic 400 clamp(24px, 2.2vw, 30px)/1.1 'Bodoni Moda', var(--font-display); color: var(--s-heading); }
.adm-doc { display: inline-block; margin: 2px 0 18px; padding-bottom: 3px; border-bottom: 1px solid currentColor; text-decoration: none;
  font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-brand); }
.adm-doc:hover { color: #F6DFA6; }

@media (max-width: 1000px) {
  .adm-salas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-salas > li:not(:nth-child(3n + 1)) { border-left: 0; }
  .adm-salas > li:nth-child(even) { border-left: 1px solid var(--s-line); }
  .adm-salas > li:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
  .adm-regua4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-regua4 > .panel.stat:nth-child(3) { border-left: 0 !important; }
  .adm-regua4 > .panel.stat:nth-child(n + 3) { border-top: 1px solid var(--s-line) !important; }
  main.wrap > .hc-adm-bloco .hc-adm-vendas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .adm-salas { grid-template-columns: minmax(0, 1fr); }
  .adm-salas > li:nth-child(even) { border-left: 0; }
  .adm-salas > li + li { border-top: 1px solid var(--s-line); }
  .adm-salas a { padding: 20px 40px 22px 2px; }
  .adm-sala-a { top: 22px; right: 4px; }
  .adm-fila { grid-template-columns: minmax(0, 1fr); }
  .adm-livro.adm-matriz { min-width: 0 !important; }
  .adm-matriz td .muted.small { display: none; }
  .adm-matriz th, .adm-matriz td { padding-left: 6px !important; padding-right: 6px !important; font-size: 13px; }
  .adm-matriz th.adm-c { letter-spacing: .08em; }
  .adm-regua4 > .panel.stat { padding: 18px 14px 16px; }
}
@media (max-width: 560px) {
  .adm-regua { grid-template-columns: minmax(0, 1fr) !important; }
  .adm-regua li { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .adm-regua li + li, .adm-regua li:nth-child(3) { border-left: 0 !important; border-top: 1px solid var(--s-line) !important; }
  .hc-adm-vendas .adm-livro th, .hc-adm-vendas .adm-livro td { padding-left: 5px !important; padding-right: 5px !important; font-size: 12.5px; }
  .adm-regua .cr-a { flex-basis: 100%; }
}

/* ── 24. EQUIPE (o Rei, 14/10: «uma área completa de staff… fazer tudo de forma autônoma»): as 5 telas da equipe no idioma
   do admin — cabeçalho de revista, abas de 1px, régua do banco, índice do que dá pra fazer, criadoras em livro-caixa e a
   ficha da criadora em seções (Perfil · Técnico · Conteúdo · Verificação · Documentos · Perigo); sem estilo em linha. ── */
main.wrap > .st-cartao { width: 100%; max-width: 720px; margin-left: 0; }
main.wrap > .st-cartao .panel { border-radius: 2px; }
.st-lista .st-nome { font: 400 19px/1.2 var(--font-display); }
.st-lista .st-slug { display: block; margin-top: 4px; letter-spacing: .02em; }
.st-lista td .seal + .seal { margin-left: 6px; }
.st-lista .adm-doc { margin: 0; }
.st-busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0 0 26px; }
.st-busca-q { display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; min-width: 0; margin: 0; }
.st-busca-q span { text-align: left; font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); }
.st-busca label::before, .st-busca label::after { content: none !important; display: none !important; }
.st-busca label { padding: 0 !important; text-align: left; }
.st-busca .st-busca-q > span { align-self: flex-start; text-align: left !important; margin: 0 !important; }
.st-busca-q input { width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--s-line) !important; border-radius: 2px;
  background: rgba(11, 7, 6, .6) !important; color: var(--s-heading); -webkit-appearance: none; appearance: none; }
.st-busca-q input:focus { outline: none; border-color: var(--s-brand) !important; }
.st-busca-tipo { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { position: relative; margin: 0; cursor: pointer; }
.st-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-chip span { display: inline-block; padding: 10px 14px; border: 1px solid var(--s-line); border-radius: 2px; color: var(--s-muted);
  font: 500 10.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .16em; text-transform: uppercase; transition: color .3s var(--s-ease), border-color .3s var(--s-ease); }
.st-chip:hover span { color: var(--s-heading); }
.st-chip input:checked + span { color: var(--s-heading); border-color: var(--s-brand); box-shadow: inset 0 -1px 0 var(--s-brand); }
.st-chip input:focus-visible + span { outline: 1px solid var(--s-brand); outline-offset: 2px; }
.st-busca .btn { margin: 0; }
.st-limpa { margin: 0 0 12px; }
.st-conta { margin-left: auto; padding-bottom: 12px; }
main.wrap > .st-ficha-abas + .st-regua { margin-top: 28px; }
.st-ficha-abas a:first-child { color: var(--s-brand); }
.conta-sec[id] { scroll-margin-top: 90px; }

.st-fatos { display: grid; gap: 0; margin: 0; }
.st-fatos > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--s-line); }
.st-fatos > div:first-child { padding-top: 0; }
.st-fatos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.st-fatos dt { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-muted); }
.st-fatos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--s-heading); }
.st-fatos dd a { color: var(--s-heading); text-decoration: none; border-bottom: 1px solid rgba(214, 178, 110, .35); }
.st-fatos .st-num { font: italic 400 22px/1 'Bodoni Moda', var(--font-display); font-variant-numeric: lining-nums; color: var(--s-brand); }
main.wrap .st-tec-form p.muted.small { margin: 8px 0 24px !important; line-height: 1.55; }
/* a moldura do cartão vale pros cartões SEM formulário também (a pele geral apaga o painel sem form) */
.st-tec > .panel, .conta-forms > .panel.st-selo, .st-docs > .panel {
  padding: clamp(22px, 2.6vw, 30px) !important; border: 1px solid rgba(214, 178, 110, .32) !important; border-radius: 2px !important;
  background: linear-gradient(124deg, rgba(255, 244, 222, .05), transparent 24%), linear-gradient(145deg, rgba(63, 19, 27, .76), rgba(14, 7, 8, .94) 62%) !important;
  box-shadow: inset 0 0 0 6px rgba(11, 7, 6, .35), inset 0 0 0 7px rgba(214, 178, 110, .1) !important; }
.st-tec-form button { margin-top: 6px; }
.st-bot { margin-top: 24px; border-radius: 2px; }
.st-bot h3 { margin-top: 0; }
.st-selo .adm-doc { margin-bottom: 10px; }
.st-selo .adm-decide { margin-top: 18px; gap: 10px; flex-wrap: wrap; }

.st-docs { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.st-docs-lista .adm-vazio { border-style: dashed; }
.st-docs-tab td:first-child > span { display: block; }
.st-docs-tab td:first-child > span + span { margin-top: 4px; }
.st-doc-tipo { font: 500 10px/1.3 var(--font-body, 'Jost', sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--s-brand); }
.st-doc-nome { color: var(--s-heading); overflow-wrap: anywhere; }
.st-docs-tab td.adm-n { white-space: nowrap; }
.st-docs-tab .adm-doc { margin: 0 12px 0 0; vertical-align: middle; }
.st-arquivar { display: inline-block; margin: 0; vertical-align: middle; }

.st-perigo { padding-top: 26px; border-top: 1px solid rgba(224, 52, 74, .45); }
.st-perigo .secao .num, .st-perigo .secao h2 { color: #E0344A; }

.st-prev-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-prev { display: flex; flex-direction: column; gap: 8px; }
.st-prev-midia { aspect-ratio: 1; margin: 0 0 8px; overflow: hidden; border: 1px solid var(--s-line); border-radius: 2px; background: #0b0706; }
.st-prev-midia img, .st-prev-midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-prev h3 { font-size: 22px !important; }
.st-prev .adm-decide { margin-top: auto; padding-top: 10px; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .st-prev-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-docs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .st-prev-grade { grid-template-columns: minmax(0, 1fr); }
  .st-fatos > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .st-lista thead { display: none; }
  .st-lista, .st-lista tbody { display: block; width: 100%; }
  .st-lista tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--s-line); }
  .st-lista td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .st-lista td:nth-child(1) { flex-basis: 100%; }
  .st-lista td:nth-child(3), .st-lista td:nth-child(4) { color: var(--s-muted); font-size: 13px; }
  .st-lista td[data-l]::before { content: attr(data-l) " "; font: 500 9.5px/1 var(--font-body, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; }
  .st-lista td:nth-child(5) { margin-left: auto; }
  .st-docs-tab thead { display: none; }
  .st-docs-tab, .st-docs-tab tbody { display: block; width: 100%; }
  .st-docs-tab tr { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--s-line); }
  .st-docs-tab td { padding: 0 !important; border: 0 !important; text-align: left !important; }
}
/* ── 25. ERROS 403/404/500 (repaginação 14/10): o cartão de joalheria do portão, o código em Bodoni de marca-d'água
   atrás do título, o kicker com o número, as saídas certas (início, explorar, entrar) e o detalhe só fora da produção ── */
section.narrow.portao.erro { position: relative; overflow: hidden; isolation: isolate; }
section.narrow.portao.erro::before { content: none; display: none; } /* o «18+» do portão não entra no erro: o número é o código */
.erro-num { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -54%); pointer-events: none;
  font: 400 clamp(150px, 26vw, 300px)/1 var(--font-display, 'Bodoni Moda', serif); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(214, 178, 110, .2); user-select: none; }
.erro h1 { font-size: clamp(34px, 4.4vw, 56px); margin: 14px auto 0; max-width: 18ch; }
.erro .portao-lead { max-width: 44ch; }
.erro-botoes { justify-content: center; flex-wrap: wrap; }
.erro-detalhe { max-width: 56ch; margin: 22px auto 0; padding: 12px 14px; white-space: pre-wrap; text-align: left;
  border: 1px solid var(--s-line); border-radius: 2px; background: rgba(0, 0, 0, .25); }
.erro-nota { letter-spacing: .2em; text-transform: uppercase; font-size: 10.5px; }
@media (max-width: 640px) {
  .erro-num { font-size: 150px; transform: translate(-50%, -62%); }
  .erro-botoes .btn { width: 100%; min-width: 0; }
}
/* ── 26. TOPO e RODAPÉ finais (repaginação 14/10): a pele geral (gpt.css) punha display em TODO link do topo e furava
   2 regras da casa — «Criadoras» do celular aparecia duplicado no computador e os 2 ícones de tema vinham juntos.
   Aqui a regra certa volta com o peso certo; no celular a vitrine inteira (as 3 portas) entra no menu, com um fio de
   ouro separando a vitrine da conta. ── */
.topbar .nav a.so-celular:not(.btn, .hc-chip) { display: none; }
.topbar .nav a.tema-troca.tema-para-claro:not(.btn, .hc-chip) { display: var(--s-mostra-claro); }
.topbar .nav a.tema-troca.tema-para-escuro:not(.btn, .hc-chip) { display: var(--s-mostra-escuro); }
/* tela média (821–1240): a fita da esquerda sai pro logo caber (acabamento.css, o 💳 Checkout); «Criadoras» fica como a porta
   da vitrine, e o /explore tem as 3 abas */
@media (min-width: 821px) and (max-width: 1240px) { .topbar .nav a.so-celular[href="/explore"]:not(.btn, .hc-chip) { display: inline-flex; } }
@media (max-width: 820px) {
  .topbar .nav a.so-celular:not(.btn, .hc-chip) { display: flex; justify-content: flex-start; }
  .topbar .nav a.so-celular-fim { margin-bottom: 8px; }
  .topbar .nav a.so-celular-fim::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: -5px; height: 1px;
    background: linear-gradient(90deg, rgba(214, 178, 110, .55), rgba(214, 178, 110, 0)); }
  .topbar .nav.right { border-radius: 2px; }
  .topbar .nav.right a.on::after, .topbar .nav.right a:hover::after { left: 2px !important; } /* a marca do ativo saía em cima da 1ª letra */
}
/* na Home o «Assinar» do topo cede a vez ao do hero, mas continua legível: fio de ouro e letra de ouro (a pele geral
   deixava o texto escuro sobre fundo nenhum, quase invisível) */
html body:has(.hero) .topbar .nav a.btn:not(.ghost):not(.hot) { color: #f2d49a !important; background: transparent; border: 1px solid rgba(214, 178, 110, .62); opacity: 1; }
html body:has(.hero) .topbar .nav a.btn:not(.ghost):not(.hot):hover { color: #1a0d04 !important; background: linear-gradient(135deg, #6e3d14, #c79a3a 55%, #f2d49a); border-color: rgba(242, 212, 154, .9); }

/* 27 · gerência: larguras dos campos da tabela de preços */
.in-w4{width:4em}.in-w5{width:5em}.in-w7{width:7em}.in-w10{width:10em}
.eq-salas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.eq-salas a{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.eq-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.eq-cartao ul{margin:8px 0 0;padding-left:18px}

/* 🛡️ moderação do chat (15/10): o controle deslizante, a curva de impacto e a página da conta suspensa */
.adm-regua.mod-placar { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.adm-regua.mod-placar li + li { border-left: 1px solid var(--s-line) !important; border-top: 0 !important; }
@media (max-width: 760px) { .adm-regua.mod-placar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .adm-regua.mod-placar li:nth-child(3) { border-left: 0 !important; } }
.mod-sens-form { display: grid; gap: 14px; padding: 22px 0; }
.mod-slider-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.mod-slider-linha input[type=range] { width: 100%; accent-color: var(--s-accent); }
.mod-s { font-size: 34px; font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right; color: var(--s-brand); }
/* 📜 A RÉGUA E A LISTA VIVA LADO A LADO (o Rei, 17/10/2026: «dê pra subir e descer e vá mostrando as palavras»):
   a lista inteira do mais grave ao mais leve, com a LINHA DE CORTE deslizando até o ponto exato da tolerância — e,
   embaixo da régua, o PREÇO de apertar: a taxa de fãs que esta régua teria suspendido. */
/* 🪜 a régua e a lista viva, LADO A LADO: o `.panel + .panel` da pele do Cinema desenha um filete EM CIMA do segundo
   painel, que só faz sentido em pilha — aqui ele vira o filete VERTICAL entre as duas colunas, e os dois lados ficam
   com o mesmo respiro em cima e embaixo (o Rei, 17/10/2026: «isso é alinhamento?») */
.mod-sens-duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.mod-sens-duo > .panel:nth-child(even) { background-image: none; }
.mod-sens-duo > .panel + .panel { border-top: 0; border-left: 1px solid var(--s-line); padding-left: 28px; }
.mod-viva { display: grid; gap: 10px; align-content: start; padding: 22px 0; }
.mod-viva-h { margin: 0; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.mod-viva-rol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scroll-behavior: smooth; }
.mod-viva-rol > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; opacity: .4; transition: opacity .15s var(--s-ease), background .15s var(--s-ease); }
.mod-viva-rol > li > code { font-size: 12.5px; overflow-wrap: anywhere; }
.mod-viva-rol > li > b { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--s-muted); }
.mod-viva-rol > li.on { opacity: 1; background: color-mix(in srgb, var(--s-accent, var(--s-brand)) 10%, transparent); border-color: color-mix(in srgb, var(--s-accent, var(--s-brand)) 30%, transparent); }
.mod-viva-rol > li.on > b { color: var(--s-accent, var(--s-brand)); }
.mod-viva-sep { grid-template-columns: auto minmax(0, 1fr) auto !important; opacity: 1 !important; padding: 5px 8px !important; border: 0 !important; border-top: 2px solid var(--s-brand) !important; border-radius: 0 !important; background: var(--s-bg-2) !important; }
.mod-viva-sep > b { min-width: 0 !important; text-align: center !important; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--s-brand) !important; }
.mod-viva-lado { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-faint); }
.mod-risco { display: grid; gap: 9px; padding: 14px 16px; border: 1px solid var(--s-line); border-radius: 10px; }
.mod-risco-topo { display: flex; align-items: center; gap: 12px; }
.mod-risco-n { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--s-brand); }
.mod-risco-barra { height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--s-muted) 16%, transparent); }
.mod-risco-barra > span { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--s-brand); transition: width .15s var(--s-ease), background .15s var(--s-ease); }
.mod-risco-aviso { margin: 0; color: var(--s-muted); }
.mod-risco.morde { border-color: color-mix(in srgb, #ff6fae 50%, transparent); }
.mod-risco.morde .mod-risco-n, .mod-risco.morde .mod-risco-aviso { color: #ff6fae; }
.mod-risco.morde .mod-risco-barra > span { background: #ff6fae; }
@media (max-width: 900px) { .mod-sens-duo { grid-template-columns: minmax(0, 1fr); } .mod-viva-rol { max-height: 260px; } }
.mod-sim-form input[name=frase] { flex: 1 1 260px; min-width: 0; }
.mod-sim-res { margin-top: 14px; padding: 16px 18px; }
.mod-sim-res[data-mod-sim=bane] { border-color: var(--s-accent); }
.mod-barra { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--s-ink, currentColor) 8%, transparent); accent-color: var(--s-accent); }
.mod-barra::-webkit-progress-bar { background: transparent; }
.mod-barra::-webkit-progress-value { background: var(--s-accent); border-radius: 4px; }
.mod-barra::-moz-progress-bar { background: var(--s-accent); border-radius: 4px; }
.mod-curva td:last-child { width: 45%; }
.mod-curva tr.mod-agora td { background: color-mix(in srgb, var(--s-accent) 12%, transparent); }
.mod-trecho { max-width: 280px; overflow-wrap: anywhere; }
.adm-livro.mod-bans, .adm-livro.mod-termos { min-width: 720px !important; }
.mod-termo-form { margin-bottom: 14px; }
.mod-termo-form input[name=termo] { flex: 1 1 200px; min-width: 0; }
.mod-termo-form input[name=gravidade] { width: 90px; }
.mod-ban { max-width: 760px; margin: 40px auto 10px; text-align: center; }
.mod-ban h1 { margin: 6px 0 14px; }
.mod-ban-lede { font-size: 18px; }
.mod-termo { letter-spacing: .08em; }
.mod-loja { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.mod-loja .hc-pack { grid-column: auto !important; }
.mod-reclama-form { display: grid; gap: 12px; max-width: 620px; }
.mod-reclama-form textarea { width: 100%; }
.mod-sair { margin-top: 18px; }
.mod-cat { white-space: nowrap; }
.mod-cat-ameaca, .mod-cat-exposicao { color: #ff5c5c; border-color: color-mix(in srgb, #ff5c5c 55%, transparent); }
.mod-cat-racismo, .mod-cat-lgbtfobia, .mod-cat-misoginia, .mod-cat-capacitismo { color: #ff9a4d; border-color: color-mix(in srgb, #ff9a4d 55%, transparent); }
.mod-cat-xingamento, .mod-cat-corpo { color: #e8c547; border-color: color-mix(in srgb, #e8c547 55%, transparent); }
.mod-cat-nicho { color: #ff6fae; border-color: color-mix(in srgb, #ff6fae 55%, transparent); }
.mod-grupo { margin: 0 0 12px; border: 1px solid var(--s-line); border-radius: 10px; padding: 10px 14px; }
.mod-grupo > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mod-grupo[open] > summary { margin-bottom: 10px; }
.mod-grupo-nicho { border-color: color-mix(in srgb, #ff6fae 40%, transparent); }
.mod-degrau-cat { display: inline-block; margin: 0 6px 6px 0; vertical-align: top; }
.mod-degrau-cat > summary { cursor: pointer; list-style: none; }
.mod-degrau-cat[open] { display: block; }
.adm-livro.mod-escada, .adm-livro.mod-catalogo { min-width: 640px !important; }
@media (max-width: 560px) { .mod-loja { grid-template-columns: minmax(0, 1fr); } .mod-slider-linha { grid-template-columns: minmax(0, 1fr) auto; } .mod-slider-linha > span { display: none; } }

/* 👑 OS NÍVEIS DE ASSINATURA (15/10/2026): a escada de 5 cartões no perfil; o Owner é a joia (vinho e ouro, maior) */
.pf-niveis { margin: 44px 0 8px; }
.pf-niveis-grade { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pf-nivel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 18px; border: 1px solid var(--s-line); border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25)); text-align: center; }
.pf-nivel h3 { margin: 0; font: italic 500 26px/1 'Bodoni Moda', var(--font-display); color: var(--s-heading); }
.pf-nivel-emoji { font-size: 26px; line-height: 1; }
/* 🖼️ a badge do nível é um QUADRO (a arte vem com moldura e fundo próprio, 17/10/2026): recorte quadrado com canto
   arredondado e um fio de ouro em volta, em vez da sombra de peça solta que a versão recortada pedia. */
.pf-nivel-ico { display: block; width: 96px; height: 96px; margin: -6px auto 2px; object-fit: cover; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(214, 178, 110, .45), 0 10px 22px -8px rgba(0, 0, 0, .8); }
.pf-nivel-exclusivo .pf-nivel-ico { width: 112px; height: 112px;
  box-shadow: 0 0 0 1px rgba(214, 178, 110, .85), 0 12px 26px -8px rgba(140, 18, 28, .9); }
.co-nivel-ico { width: 20px; height: 20px; vertical-align: -4px; object-fit: contain; }
.pf-nivel .pf-preco { font-size: clamp(26px, 2.2vw, 34px); }
.pf-nivel .pf-vantagens { text-align: left; flex: 1; align-content: start; }
.pf-nivel form, .pf-nivel .btn { width: 100%; justify-content: center; min-width: 0; }
.pf-nivel-estado { display: block; margin-top: auto; }
.pf-nivel-atual { border-color: rgba(214, 178, 110, .8); box-shadow: inset 0 0 0 1px rgba(214, 178, 110, .35); }
.pf-nivel-exclusivo { border: 1px solid rgba(214, 178, 110, .9); transform: translateY(-10px);
  background: radial-gradient(120% 80% at 50% 0%, rgba(140, 18, 28, .75), rgba(20, 8, 8, .97) 74%);
  box-shadow: inset 0 0 0 5px rgba(11, 7, 6, .5), inset 0 0 0 6px rgba(214, 178, 110, .3), 0 34px 70px -36px rgba(140, 18, 28, .9); }
.pf-nivel-exclusivo h3 { background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 32px; }
.pf-nivel-kicker { justify-content: center; margin: 0; }
.pf-nivel-kicker::before { display: none; }
.tier-selo { margin-left: 8px; white-space: nowrap; }
.tier-selo.tier-owner { border-color: rgba(214, 178, 110, .9); color: var(--s-heading); }
@media (max-width: 1100px) { .pf-niveis-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-niveis-grade { grid-template-columns: minmax(0, 1fr); } .pf-nivel-exclusivo { transform: none; } }

/* 🎙️ o áudio no chat (16/10): o player na bolha e o gravador da criadora */
.ch-audio { width: min(280px, 100%); height: 38px; display: block; }
.ch-audio-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--s-line); }
.ch-audio-form input[type=file] { max-width: 220px; }

/* 💳 O CHECKOUT TRANSPARENTE (16/10/2026, o Rei: «bem profissional… a cara do nosso site»): régua de ouro, cantos retos,
   serifada grande; à esquerda o pagamento (PIX/cartão), à direita o resumo. Só tokens da pele: segue o claro e o escuro */
.co { max-width: 1120px; margin: 0 auto; padding: 36px 0 64px; }
.co-cab { text-align: center; margin-bottom: 34px; }
.co-cab .kicker { justify-content: center; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--s-brand); }
.co-cab h1 { margin: 10px 0 22px; font: 400 clamp(38px, 5vw, 62px)/1 var(--font-display); color: var(--s-heading); letter-spacing: -.01em; }
.co-cab h1 em { font-style: italic; background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-trilha { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; max-width: 560px; }
.co-trilha li { flex: 1; position: relative; padding-top: 18px; font: 500 10.5px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--s-faint); }
.co-trilha li::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--s-line); }
.co-trilha li.feito::before, .co-trilha li.agora::before { background: var(--s-brand); }
.co-trilha li span { display: block; margin-bottom: 4px; font: italic 400 18px/1 var(--font-display); letter-spacing: 0; color: var(--s-muted); }
.co-trilha li.agora { color: var(--s-heading); }
.co-trilha li.agora span { color: var(--s-brand); }
.co-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.co .panel { border: 1px solid var(--s-line); border-radius: 2px; background: linear-gradient(180deg, var(--s-realce), transparent 40%), var(--s-bg-2); padding: 28px; box-shadow: var(--s-shadow); }
.co-abas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 26px; }
.co-abas button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--s-line); border-radius: 2px; background: var(--s-campo);
  color: var(--s-muted); cursor: pointer; text-align: left; transition: border-color .2s, color .2s, background .2s; }
.co-abas button svg { width: 24px; height: 24px; flex: none; color: var(--s-brand); }
.co-abas button b { display: block; font: 500 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--s-heading); }
.co-abas button small { display: block; margin-top: 3px; font: 300 12px/1.3 var(--font-body); color: var(--s-faint); }
.co-abas button:hover { border-color: var(--s-line-2); }
.co-abas button[aria-selected="true"] { border-color: var(--s-brand); background: var(--s-realce); box-shadow: inset 0 -2px 0 var(--s-brand); }
.co-abas button:focus-visible { outline: 1px solid var(--s-brand); outline-offset: 2px; }
.co-pix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.co-qr-moldura { position: relative; padding: 14px; }
.co-canto { position: absolute; width: 22px; height: 22px; border: 0 solid var(--s-brand); }
.co-canto.c1 { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.co-canto.c2 { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.co-canto.c3 { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.co-canto.c4 { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.co-qr { position: relative; width: 232px; height: 232px; background: #fff; border-radius: 2px; }
.co-qr svg, .co-qr img { display: block; width: 100%; height: 100%; }
.co-qr-velado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px;
  background: var(--s-veu); text-align: center; color: var(--s-heading); }
.co-qr-velado[hidden] { display: none; }
.co-pix-valor { margin: 0 0 14px; color: var(--s-muted); }
.co-pix-valor b { color: var(--s-heading); font-weight: 500; }
.co-passos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.co-passos li { display: flex; gap: 12px; align-items: baseline; color: var(--s-text); font-size: 15px; line-height: 1.45; }
.co-passos li span { flex: none; width: 24px; font: italic 400 20px/1 var(--font-display); color: var(--s-brand); }
.co-pix-info label, .co-campo label { display: block; margin-bottom: 7px; font: 500 10.5px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); }
.co-copia { display: flex; gap: 8px; }
.co-copia input { flex: 1; min-width: 0; font: 400 12.5px/1.2 ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--s-text); background: var(--s-campo);
  border: 1px solid var(--s-line); border-radius: 2px; padding: 11px 12px; text-overflow: ellipsis; }
.co-copia .btn { flex: none; }
.co-copia .btn.copiado { border-color: var(--s-ok); color: var(--s-ok); }
.co-espera { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 2px;
  background: var(--s-campo); font-size: 14px; color: var(--s-text); }
.co-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--s-brand); animation: co-pulso 1.6s ease-out infinite; }
@keyframes co-pulso { 0% { box-shadow: 0 0 0 0 var(--s-line-2); } 100% { box-shadow: 0 0 0 12px transparent; } }
.co-relogio { margin-left: auto; color: var(--s-muted); font-size: 13px; }
.co-relogio b { font: 500 14px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--s-heading); }
.co-teste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
/* o cartão se arruma pela LARGURA da coluna (não da tela): estreita = o plástico em cima e o formulário embaixo */
.co-pagar { container-type: inline-size; }
.co-cartao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.co-cartao .co-plastico { width: min(100%, 340px); }
@container (min-width: 720px) { .co-cartao { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; } }
@container (max-width: 470px) { .co-pix { grid-template-columns: minmax(0, 1fr); justify-items: center; } .co-pix-info { width: 100%; } }
.co-cartao[hidden], .co-pix[hidden] { display: none; }
.co-plastico { position: relative; aspect-ratio: 1.586; border-radius: 2px; padding: 20px 22px; overflow: hidden; color: #F6E3BD;
  background: radial-gradient(120% 90% at 85% 0%, rgba(214, 178, 110, .28), transparent 55%), var(--c-vinho-joia);
  border: 1px solid rgba(214, 178, 110, .55); box-shadow: inset 0 0 0 4px rgba(11, 7, 6, .35), 0 26px 50px -28px rgba(0, 0, 0, .9);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; transition: transform .5s ease; }
.co-plastico.virado { transform: perspective(900px) rotateY(10deg) translateY(-2px); }
.co-chip { width: 40px; height: 30px; border-radius: 2px; background: var(--c-ouro-joia); grid-column: 1; grid-row: 1; }
.co-bandeira { grid-column: 2; grid-row: 1; font: italic 600 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #F4E4B0; }
.co-plastico[data-bandeira="visa"] .co-bandeira::after { content: 'Visa'; }
.co-plastico[data-bandeira="mastercard"] .co-bandeira::after { content: 'Mastercard'; }
.co-plastico[data-bandeira="amex"] .co-bandeira::after { content: 'Amex'; }
.co-plastico[data-bandeira="elo"] .co-bandeira::after { content: 'Elo'; }
.co-plastico[data-bandeira="hipercard"] .co-bandeira::after { content: 'Hipercard'; }
.co-pl-num { grid-column: 1 / -1; grid-row: 2; align-self: center; font: 400 clamp(15px, 1.6vw, 19px)/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; white-space: nowrap; }
.co-pl-rot { grid-row: 3; font: 500 8.5px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: rgba(246, 227, 189, .6); }
.co-pl-rot:not(.dir), .co-pl-nome { grid-column: 1; }
.co-pl-rot.dir, .co-pl-val { grid-column: 2; text-align: right; }
.co-pl-nome, .co-pl-val { grid-row: 4; margin-top: 5px; font: 500 12.5px/1.1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.co-campo.larga, .co-erro, .co-pagar-btn, .co-cofre, .co-teste-nota { grid-column: 1 / -1; }
.co-campo input { width: 100%; font: 400 15px/1.2 var(--font-body); color: var(--s-text); background: var(--s-campo); border: 1px solid var(--s-line); border-radius: 2px; padding: 12px 13px; transition: border-color .2s; }
.co-campo input:focus { outline: none; border-color: var(--s-brand); box-shadow: 0 0 0 3px var(--s-realce); }
.co-campo input.torto { border-color: var(--s-err); }
.co-erro { margin: 0; padding: 10px 12px; border-left: 2px solid var(--s-err); background: var(--s-campo); color: var(--s-err); font-size: 14px; }
.co-erro[hidden] { display: none; }
.co-pagar-btn { width: 100%; justify-content: center; padding-top: 15px; padding-bottom: 15px; font-size: 13px; letter-spacing: .2em; }
.co-pagar-btn.indo { opacity: .7; cursor: progress; }
.co-cofre { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--s-faint); }
.co-cofre svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--s-brand); }
.co-teste-nota { margin: 0; font-size: 12.5px; color: var(--s-muted); }
.co-resumo { position: sticky; top: 96px; }
.co-resumo > .kicker { font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--s-brand); margin-bottom: 18px; }
.co-item { display: flex; gap: 16px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--s-line); }
.co-item h2 { margin: 0 0 4px; font: italic 400 26px/1.1 var(--font-display); color: var(--s-heading); }
.co-item p { margin: 0; font-size: 13.5px; }
.co-item p.co-bonus { margin-top: 8px; }
.co-avatar { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 2px; border: 1px solid var(--s-line-2); }
.co-avatar.vazio { display: block; background: var(--c-vinho-joia); }
.co-pilha { width: 96px; height: 72px; flex: none; object-fit: contain; }
.co-contas { margin: 18px 0 0; display: grid; gap: 10px; }
.co-contas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-contas dt { font: 500 10.5px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); }
.co-contas dd { margin: 0; color: var(--s-text); font-variant-numeric: lining-nums tabular-nums; }
.co-total { padding-top: 14px; border-top: 1px solid var(--s-line); }
.co-total dt { color: var(--s-heading); }
.co-total dd { font: italic 400 clamp(32px, 3vw, 40px)/1 'Bodoni Moda', var(--font-display); letter-spacing: -.02em; color: var(--s-heading); }
html[data-theme="dark"] .co-total dd { background: var(--c-ouro-joia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-garantias { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--s-line); display: grid; gap: 9px; }
.co-garantias li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--s-muted); }
.co-garantias li span { color: var(--s-brand); font-size: 9px; line-height: 1.9; }
.co-voltar { display: inline-block; margin-top: 20px; font: 500 10.5px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--s-brand); text-decoration: none; }
.co-voltar:hover, .co-voltar:focus-visible { color: var(--s-heading); }
.co-ok { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: var(--s-veu); opacity: 0; transition: opacity .35s ease; }
.co-ok[hidden] { display: none; }
.co-ok.on { opacity: 1; }
.co-ok-in { text-align: center; padding: 24px; transform: translateY(10px); transition: transform .45s ease; }
.co-ok.on .co-ok-in { transform: none; }
.co-ok svg { width: 84px; height: 84px; color: var(--s-brand); }
.co-ok h2 { margin: 18px 0 8px; font: italic 400 clamp(34px, 4vw, 48px)/1 var(--font-display); color: var(--s-heading); }
@media (max-width: 960px) {
  .co-grade { grid-template-columns: minmax(0, 1fr); }
  .co-resumo { position: static; order: -1; }
}
@media (max-width: 640px) {
  .co { padding-top: 20px; }
  .co .panel { padding: 20px 16px; }
  .co-pix { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .co-pix-info { width: 100%; }
  .co-qr { width: min(232px, 70vw); height: min(232px, 70vw); }
  .co-relogio { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .co-pulso { animation: none; } .co-plastico, .co-ok, .co-ok-in { transition: none; } }

/* 🎁 O PEDIDO DO MÊS e a 🎙️ VOZ DE BOAS-VINDAS (16/10/2026, o Rei: «a tela que entrega cada um deles»):
   o cartão do fã dentro da conversa, a fila da equipe e o painel da voz na ficha da criadora. Só tokens da pele. */
.tier-pedido { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--s-line); }
.tier-pedido-h { margin: 0 0 12px; font: italic 400 20px/1 'Bodoni Moda', var(--font-display); color: var(--s-heading); }
.tier-pedido-h::before { content: ''; display: inline-block; width: 18px; height: 1px; margin: 0 10px 6px 0; background: var(--s-brand); vertical-align: middle; }
.tier-pedido-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tier-pedido-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; background: var(--s-bg-3); border: 1px solid var(--s-line);
  transition: border-color .3s var(--s-ease); }
.tier-pedido-card:hover, .tier-pedido-card.tem { border-color: var(--s-line-2); }
.tier-pedido-cab { display: flex; align-items: center; gap: 8px; }
.tier-pedido-ico { font-size: 18px; line-height: 1; }
.tier-pedido-ico.tem-arte .presente-arte { width: 38px; height: 38px; }
.tier-pedido-est-ico { display: inline-flex; margin-right: 6px; vertical-align: -4px; }
.tier-pedido-est-ico.tem-arte .presente-arte { width: 20px; height: 20px; }
.tier-pedido-cab h4 { margin: 0; font: 500 12px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--s-heading); }
.tier-pedido-cota { margin-left: auto; font-size: 12px; color: var(--s-brand-2); white-space: nowrap; }
.tier-pedido-estado { margin: 0; font-size: 13px; color: var(--s-muted); }
.tier-pedido-estado.aberto { color: var(--s-warn); }
.tier-pedido-estado.feito { color: var(--s-ok); }
.tier-pedido-estado.recusado { color: var(--s-err); }
.tier-pedido-texto { margin: 0; padding-left: 12px; border-left: 1px solid var(--s-line-2); font: italic 400 14px/1.5 'Bodoni Moda', var(--font-display); color: var(--s-text); }
.tier-pedido-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tier-pedido-form textarea { width: 100%; padding: 10px 12px; resize: vertical; background: var(--s-campo); border: 1px solid var(--s-line);
  color: var(--s-text); font: 400 14px/1.5 var(--font-body); }
.tier-pedido-form textarea:focus { outline: 0; border-color: var(--s-brand); }
.tier-pedido-form .btn { align-self: flex-start; }

/* a fila da equipe: uma ficha por pedido, o degrau à direita e a recusa escondida atrás do motivo */
.st-req-filtros { margin-bottom: 18px; }
.st-req-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.st-req { display: flex; flex-direction: column; gap: 10px; }
.st-req-cab { display: flex; align-items: center; gap: 10px; }
.st-req-cab h3 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); }
.st-req-cab .hu-n { font: 400 13px/1 var(--font-display); color: var(--s-brand); }
.st-req-ico { font-size: 20px; line-height: 1; }
.st-req-ico.tem-arte .presente-arte { width: 46px; height: 46px; } /* 🎬 a arte do pedido (20/10) */
.st-req-cab .tier-selo { margin-left: auto; }
.st-req-quem { margin: 0; }
.st-req-texto { margin: 0; padding-left: 14px; border-left: 1px solid var(--s-line-2); font: italic 400 16px/1.5 'Bodoni Moda', var(--font-display); color: var(--s-text); }
.st-req-decide { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.st-req-recusa summary { cursor: pointer; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-muted); }
.st-req-recusa[open] { display: grid; gap: 8px; margin-top: 4px; }
.st-req-recusa input { width: 100%; }
.st-req-estado { margin: 0; }
.st-req-estado.entregue { color: var(--s-ok); }
.st-req-estado.recusado { color: var(--s-err); }

/* o painel da voz na ficha: o que está gravado, quem está esperando e o campo pra trocar */
.st-voz .ch-audio { margin: 10px 0; }
.st-voz-tem { color: var(--s-ok); }
.st-voz-falta, .st-voz-fila { color: var(--s-warn); }
.st-voz-form { flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.st-voz-form input[type=file] { max-width: 240px; }
@media (max-width: 640px) { .tier-pedido-grade, .st-req-grade { grid-template-columns: minmax(0, 1fr); } }

/* 🎧 o ÁUDIO DA CASA (16/10): barra de ouro no lugar do player do navegador — na bolha do chat e na ficha da criadora */
.au { display: inline-flex; align-items: center; gap: 10px; width: min(300px, 100%); padding: 7px 12px 7px 8px;
  background: var(--s-campo); border: 1px solid var(--s-line); }
.au:hover, .au.tocando { border-color: var(--s-line-2); }
.au-btn { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--s-realce); border: 1px solid var(--s-line-2); color: var(--s-brand); border-radius: 50%; }
.au-btn:hover { background: var(--s-brand); color: var(--s-on-brand); }
.au-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.au-btn .i-play { fill: currentColor; stroke: none; margin-left: 2px; }
.au-btn .i-pause, .au.tocando .i-play { display: none; }
.au.tocando .i-pause { display: block; }
.au-trilho { position: relative; flex: 1; min-width: 0; height: 3px; cursor: pointer; background: var(--s-line); }
.au-trilho:focus-visible { outline: 1px solid var(--s-brand); outline-offset: 4px; }
.au-feito { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--s-brand); }
.au-tempo { font: 400 12px/1 var(--font-body); color: var(--s-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-tempo i { margin: 0 3px; font-style: normal; opacity: .5; }

/* 📎 O CAMPO DE ARQUIVO DA CASA (16/10/2026) — o input do navegador fica escondido atrás do botão de ouro. */
.arq { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; cursor: pointer; }
.arq input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arq-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--s-line-2);
  border-radius: 999px; background: color-mix(in srgb, var(--s-brand) 12%, transparent);
  color: var(--s-brand); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; transition: border-color .18s, background .18s, color .18s; }
.arq-btn::before { content: "+"; font-size: 14px; line-height: 1; opacity: .75; }
.arq:hover .arq-btn, .arq input[type=file]:focus-visible + .arq-btn { border-color: var(--s-brand);
  background: color-mix(in srgb, var(--s-brand) 22%, transparent); color: var(--s-heading); }
.arq-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-muted); font-size: 12.5px; }
.arq.tem .arq-nome { color: var(--s-heading); }
.ch-audio-form .arq, .st-voz-form .arq { max-width: 320px; }
form > label.arq, label.arq { margin: 0; padding: 0; color: inherit; font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; }
form > label.arq::before { content: none; display: none; }
.arq-nome { text-transform: none; letter-spacing: normal; font-weight: 400; }
.arq:not(.tem) .arq-nome { opacity: .62; }
.ch-audio-form .arq, .st-voz-form .arq { max-width: 420px; }
/* 🎙️ a bolha da voz de boas-vindas se apresenta (17/10/2026): um selo discreto acima da barra de ouro */
.bv-selo { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 3px 10px; border: 1px solid var(--s-line-2);
  border-radius: 999px; background: color-mix(in srgb, var(--s-brand) 10%, transparent); color: var(--s-brand);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }