/* Layout: casca de app com trilha lateral (barra inferior no celular), hero de capa, carrosseis
   com encaixe, e reprodutor fixo. Direcao: joalheria e palco — vidro escuro, luz por dentro da
   pedra, serif de revista nos titulos. Tema unico escuro: o espectro so' existe no escuro. */
:root{
  color-scheme: dark;

  --bg:#07080D;
  --bg-2:#0B0D14;
  --fg:#F2F3F7;
  --fg-2:#9AA2B6;
  --fg-3:#636B7F;

  /* vidro */
  --vid:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.016));
  --vid-2:linear-gradient(180deg,rgba(255,255,255,.098),rgba(255,255,255,.03));
  --bor:rgba(255,255,255,.085);
  --bor-2:rgba(255,255,255,.17);
  --luz:inset 0 1px 0 rgba(255,255,255,.075);
  --sombra:0 20px 44px -26px rgba(0,0,0,.92);
  --sombra-2:0 30px 60px -28px rgba(0,0,0,.95);

  --safira:#4279EE;
  --rubi:#E73E57;
  --diamante:#C6D0E4;
  --esmeralda:#1DB686;
  --aurora:#EFB544;
  --frag:var(--aurora);
  --ok:#1DB686;
  --alerta:#EFB544;

  --f-disp:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-num:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --r:16px;
  --r-s:11px;
  --nav-h:66px;
  --pl-h:0px;
  --amb:var(--safira);     /* a cor de ambiente, muda por secao */
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;   /* o iPhone inflava o texto e estourava a largura */
  text-size-adjust:100%;
}
html,body{min-height:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--fg);
  touch-action:manipulation;            /* sem duplo-toque para dar zoom */
  font:400 15px/1.6 var(--f-ui);letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
/* atmosfera: duas auras fixas + grao */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 16% -4%, color-mix(in srgb,var(--amb) 26%,transparent), transparent 72%),
    radial-gradient(48% 40% at 94% 104%, color-mix(in srgb,var(--aurora) 15%,transparent), transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg) 48%);
  transition:background .6s ease;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
}
.app,#reprodutor,#videoCx{position:relative;z-index:1}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--frag);outline-offset:3px;border-radius:5px}
h1,h2,h3,h4{margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* titulos: serif de revista */
.tt{font-family:var(--f-disp);font-weight:400;letter-spacing:-.015em;line-height:1.03;text-wrap:balance}
.tt-xl{font-size:clamp(40px,6.6vw,72px)}
.tt-l{font-size:clamp(30px,4.6vw,44px)}
.tt-m{font-size:clamp(21px,2.6vw,27px)}
.tt-s{font-size:19px}
.ui-b{font-family:var(--f-ui);font-weight:600;letter-spacing:-.01em}

/* ---------- casca ---------- */
.app{display:flex;min-height:100%}
.trilha{
  position:fixed;inset:0 auto 0 0;width:226px;z-index:30;
  background:rgba(7,8,13,.76);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-right:1px solid var(--bor);
  display:flex;flex-direction:column;gap:1px;
  padding:calc(20px + env(safe-area-inset-top,0px)) 13px 20px;
}
.marca{
  display:flex;align-items:center;gap:10px;padding:2px 10px 22px;
  font-family:var(--f-ui);font-weight:700;font-size:17px;letter-spacing:.2em;
}
.tr-item{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--r-s);color:var(--fg-2);
  font-weight:500;font-size:14.5px;transition:background .16s,color .16s;
}
.tr-item:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.tr-item[aria-current="page"]{background:rgba(255,255,255,.075);color:var(--fg);font-weight:600}
.tr-item[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--amb);
  box-shadow:0 0 11px var(--amb);
}
.tr-item svg{width:19px;height:19px;flex:0 0 auto}
.tr-pe{
  margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--bor);
  font-size:12.5px;color:var(--fg-3);line-height:1.5;
}

.palco{flex:1;min-width:0;margin-left:226px;padding-bottom:calc(36px + var(--pl-h))}
.larg{padding-inline:30px;max-width:1140px}
.larg-full{padding-inline:0}

/* ---------- hero ---------- */
.hero{
  position:relative;margin-bottom:34px;overflow:hidden;
  border-radius:0 0 26px 26px;box-shadow:var(--sombra-2);
}
.hero-arte{position:absolute;inset:0}
.hero-arte svg{width:100%;height:100%;display:block}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,11,.12) 0%,rgba(5,6,11,.5) 44%,rgba(5,6,11,.96) 100%);
}
.hero-corpo{
  position:relative;z-index:2;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px) clamp(26px,3.4vw,40px);
  min-height:clamp(300px,42vw,430px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
}
.olho{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-ui);font-weight:600;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.hero-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.86)}
.hero-bts{display:flex;gap:11px;flex-wrap:wrap;margin-top:6px}

/* ---------- rotulos de secao ---------- */
.rot{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:40px 0 15px;
}
.rot h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(23px,2.8vw,30px);letter-spacing:-.015em}
.rot span{font-size:12.5px;color:var(--fg-3);font-weight:500}
.sub{color:var(--fg-2);font-size:15px;margin:10px 0 0;max-width:64ch}

/* ---------- vidro ---------- */
.vid{
  background:var(--vid);border:1px solid var(--bor);border-radius:var(--r);
  box-shadow:var(--luz),var(--sombra);
}
.vid-cl{transition:border-color .18s,transform .18s,box-shadow .18s;text-align:left;display:block;width:100%}
.vid-cl:hover{border-color:var(--bor-2);transform:translateY(-3px);box-shadow:var(--luz),var(--sombra-2)}
.pad{padding:19px}

/* ---------- capas ---------- */
.capa{
  position:relative;overflow:hidden;border-radius:var(--r-s);flex:0 0 auto;
  background:var(--bg-2);box-shadow:var(--luz);
}
.capa svg{width:100%;height:100%;display:block}
.capa-q{aspect-ratio:1}
.capa-w{aspect-ratio:16/9}
.capa-nome{
  position:absolute;inset:auto 0 0 0;padding:18px 15px 14px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(5,6,11,.52) 34%,rgba(5,6,11,.95));
  text-shadow:0 1px 16px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
}

/* ---------- carrossel ---------- */
.carr-cx{position:relative;margin-inline:-30px;padding-inline:30px}
.carr{
  display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:3px 30px 14px 0;margin-right:-30px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.17) transparent;
}
.carr::-webkit-scrollbar{height:6px}
.carr::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.carr::-webkit-scrollbar-track{background:transparent}
.cel{flex:0 0 auto;scroll-snap-align:start;width:172px;text-align:left}
.cel-w{width:286px}
.cel .capa{width:100%;margin-bottom:11px;transition:transform .3s,box-shadow .3s}
.cel:hover .capa{transform:translateY(-4px) scale(1.012);box-shadow:var(--luz),var(--sombra-2)}
.cel-nome{font-weight:600;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.cel-sub{font-size:12.5px;color:var(--fg-2);margin-top:3px;display:flex;align-items:center;gap:7px}

/* ---------- gema ---------- */
.gema{width:14px;height:14px;flex:0 0 auto;color:var(--frag);display:block;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--frag) 52%,transparent))}
.gema .g-corpo{fill:currentColor}
.gema .g-mesa{fill:rgba(255,255,255,.2)}
.gema .g-pav{fill:rgba(0,0,0,.2)}
.gema .g-fac{fill:none;stroke:rgba(10,7,2,.4);stroke-width:1.05;stroke-linejoin:round}
.gema.g-vazia{filter:none}
.gema.g-vazia .g-corpo{fill:none;stroke:var(--fg-3);stroke-width:1.7}
.gema.g-vazia .g-mesa,.gema.g-vazia .g-pav,.gema.g-vazia .g-fac{display:none}
.gemas{display:flex;gap:9px;align-items:center}
.marca .gema{width:21px;height:21px;filter:drop-shadow(0 0 10px rgba(239,181,68,.3))}

/* ---------- botoes ---------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 19px;border-radius:99px;font-family:var(--f-ui);font-weight:600;font-size:14.5px;
  background:var(--vid-2);border:1px solid var(--bor-2);box-shadow:var(--luz);
  transition:background .16s,border-color .16s,transform .12s;
}
.bt:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.bt:active:not(:disabled){transform:scale(.975)}
.bt:disabled{opacity:.38;cursor:not-allowed}
.bt-pri{
  background:linear-gradient(180deg,#FFF,#DDE2EC);border-color:transparent;color:#0A0C12;
  box-shadow:0 10px 26px -14px rgba(255,255,255,.4);
}
.bt-pri:hover:not(:disabled){background:#fff}
.bt-frag{
  background:linear-gradient(180deg,color-mix(in srgb,var(--frag) 94%,white),var(--frag));
  border-color:transparent;color:#1A1203;
  box-shadow:0 10px 26px -14px color-mix(in srgb,var(--frag) 62%,transparent);
}
.bt-frag:hover:not(:disabled){background:color-mix(in srgb,var(--frag) 86%,white)}
.bt-s{padding:8px 14px;font-size:13.5px}
.bt-icone{padding:9px;width:38px;height:38px;border-radius:50%}

/* ---------- linhas de faixa ---------- */
.lista{list-style:none;margin:0;padding:0}
.li{
  display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;
  padding:10px;border-radius:var(--r-s);transition:background .16s;text-align:left;width:100%;
  border:1px solid transparent;
}
.li:hover{background:rgba(255,255,255,.045);border-color:var(--bor)}
.li.ativa{background:rgba(255,255,255,.055);border-color:var(--bor)}
.li .capa{width:54px}
.li.ep .capa{width:104px}
.li-nome{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.li.ativa .li-nome{color:var(--frag)}
.li-sub{font-size:12.5px;color:var(--fg-2);margin-top:3px;display:flex;align-items:center;gap:7px}
.li-dir{display:flex;align-items:center;gap:13px;color:var(--fg-2);font-size:13px;flex:0 0 auto}
.ponto{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

/* ---------- chips ---------- */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 22px}
.chip{
  padding:8px 15px;border-radius:99px;border:1px solid var(--bor);background:var(--vid);
  font-size:13.5px;font-weight:500;color:var(--fg-2);display:flex;align-items:center;gap:8px;
  transition:border-color .16s,color .16s,background .16s;
}
.chip:hover{color:var(--fg);border-color:var(--bor-2)}
.chip[aria-pressed="true"]{background:var(--vid-2);color:var(--fg);border-color:var(--bor-2);font-weight:600}

/* ---------- selos ---------- */
.selo{
  font-family:var(--f-num);font-weight:600;font-size:10.5px;padding:2px 6px;border-radius:5px;
  border:1px solid currentColor;flex:0 0 auto;line-height:1.4;
}
.selo-14{color:var(--alerta)}
.tag{
  font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.1);color:var(--fg-2);flex:0 0 auto;
}
.tag-novo{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.tag-frag{background:color-mix(in srgb,var(--frag) 2%,transparent);color:var(--frag);border:1px solid color-mix(in srgb,var(--frag) 42%,transparent)}
.tag-livre{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.cadeado{color:var(--fg-3);display:inline-flex;align-items:center;gap:6px;font-size:12.5px}

/* ---------- painel de fragmentos ---------- */
.frag-px{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--frag) 26%,transparent);
  background:
    radial-gradient(70% 150% at 8% 0%, color-mix(in srgb,var(--frag) 20%,transparent), transparent 68%),
    var(--vid);
  box-shadow:var(--luz),var(--sombra);
  padding:22px;display:flex;gap:26px;flex-wrap:wrap;align-items:center;
}
.frag-n{display:flex;align-items:baseline;gap:11px}
.frag-n strong{
  font-family:var(--f-num);font-weight:600;font-size:52px;line-height:.9;color:var(--frag);
  text-shadow:0 0 34px color-mix(in srgb,var(--frag) 45%,transparent);
}
.frag-n span{font-size:13.5px;color:var(--fg-2);max-width:13ch;line-height:1.35}
.frag-txt{flex:1;min-width:210px;font-size:13.5px;color:var(--fg-2)}
.frag-txt b{color:var(--fg)}

/* ---------- fila ---------- */
.filas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(348px,1fr));align-items:start}
.fcx{overflow:hidden;background:var(--vid);border:1px solid var(--bor);border-radius:var(--r);box-shadow:var(--luz),var(--sombra)}
.fcab{padding:19px 20px 17px;border-bottom:1px solid var(--bor)}
.fcab p{margin:6px 0 0;font-size:13px;color:var(--fg-2)}
.flista{list-style:none;margin:0;padding:8px}
.obra{
  display:grid;grid-template-columns:20px 44px 1fr auto;gap:12px;align-items:center;
  padding:10px;border-radius:var(--r-s);transition:background .16s;border:1px solid transparent;
}
.obra:hover{background:rgba(255,255,255,.04)}
.obra.lid{
  background:radial-gradient(130% 240% at 0% 50%, color-mix(in srgb,var(--frag) 15%,transparent), transparent 62%);
  border-color:color-mix(in srgb,var(--frag) 24%,transparent);
}
.obra .capa{width:44px}
.obra-pos{font-family:var(--f-num);font-size:13px;color:var(--fg-3);text-align:right}
.obra.lid .obra-pos{color:var(--frag);font-weight:600}
.obra-corpo{min-width:0}
.obra-nome{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.obra-sub{font-size:12px;color:var(--fg-2);margin-top:2px;display:flex;align-items:center;gap:6px}
.barra{height:5px;background:rgba(255,255,255,.07);border-radius:3px;margin-top:10px;overflow:hidden}
.barra i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--frag) 55%,transparent),var(--frag));
  box-shadow:0 0 10px color-mix(in srgb,var(--frag) 55%,transparent);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.obra-dir{display:flex;align-items:center;gap:12px}
.obra-n{font-family:var(--f-num);font-weight:600;font-size:17px;min-width:2.5ch;text-align:right}
.obra.lid .obra-n{color:var(--frag)}
.mais{
  width:34px;height:34px;border-radius:50%;background:var(--vid-2);border:1px solid var(--bor-2);
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--luz);transition:background .16s,transform .12s,border-color .16s;
}
.mais:hover:not(:disabled){background:var(--frag);border-color:var(--frag);color:#1A1203}
.mais:active:not(:disabled){transform:scale(.88)}
.mais:disabled{opacity:.28;cursor:not-allowed}
.fpe{padding:14px 20px;border-top:1px solid var(--bor);font-size:12.5px;color:var(--fg-3)}
@keyframes pulso{0%{background-color:color-mix(in srgb,var(--frag) 30%,transparent)}100%{background-color:transparent}}
.obra.pulsou{animation:pulso 1s ease-out}

/* ---------- planos ---------- */
.planos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.plano{
  position:relative;background:var(--vid);border:1px solid var(--bor);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--luz),var(--sombra);
}
.plano.atual{
  border-color:color-mix(in srgb,var(--frag) 46%,transparent);
  background:radial-gradient(90% 60% at 50% 0%, color-mix(in srgb,var(--frag) 14%,transparent), transparent 70%),var(--vid);
}
.plano.pop::before{
  content:"mais escolhido";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:var(--frag);color:#1A1203;padding:4px 11px;border-radius:99px;white-space:nowrap;
}
.preco{font-family:var(--f-num);font-weight:600;font-size:31px;line-height:1}
.preco small{font-size:12.5px;color:var(--fg-2);font-weight:500;font-family:var(--f-ui)}
.plano ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--fg-2);flex:1}
.plano li{display:flex;gap:9px;align-items:flex-start}
.plano li b{color:var(--fg)}
.tick{color:var(--ok);flex:0 0 auto;margin-top:2px}

/* ---------- livro ---------- */
.verb{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.vb{
  position:relative;background:var(--vid);border:1px solid var(--bor);border-radius:var(--r);
  padding:22px;min-width:0;box-shadow:var(--luz),var(--sombra);overflow:hidden;
}
.vb::before{
  content:"";position:absolute;inset:-40% 55% 40% -10%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--frag) 15%,transparent), transparent);
  pointer-events:none;
}
.vb-cap{
  font-family:var(--f-disp);font-size:46px;line-height:.8;color:color-mix(in srgb,var(--frag) 78%,var(--fg));
  float:left;margin:4px 11px 0 0;
}
.vb p{margin:0;font-size:14px;color:var(--fg-2);font-family:var(--f-disp);font-size:16.5px;line-height:1.5}
.vb-de{font-size:11.5px;color:var(--fg-3);margin-top:14px;display:flex;align-items:center;gap:7px;clear:both;font-family:var(--f-ui)}
.vb.fech{border-style:dashed;background:rgba(255,255,255,.012);box-shadow:none}
.vb.fech::before{display:none}
.vb.fech .vb-cap{color:var(--fg-3);opacity:.5}
.vb.fech p{color:var(--fg-3)}

/* ---------- linhas de dado ---------- */
.dl{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--bor);font-size:14px}
.dl:last-child{border-bottom:0}
.dl span{color:var(--fg-2)}
.dl b{font-weight:600}

/* ---------- reprodutor ---------- */
.rp{
  position:fixed;left:226px;right:0;bottom:0;z-index:28;
  background:rgba(11,13,20,.86);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  border-top:1px solid var(--bor);
  padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:17px;
}
.rp .capa{width:50px}
.rp-corpo{flex:1;min-width:0}
.rp-nome{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-sub{font-size:12px;color:var(--fg-2);margin-top:1px}
.rp-ln{height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:9px;overflow:hidden}
.rp-ln i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--frag) 50%,transparent),var(--frag));
  box-shadow:0 0 9px color-mix(in srgb,var(--frag) 55%,transparent);
}
.rp-t{font-family:var(--f-num);font-size:12px;color:var(--fg-2);flex:0 0 auto}
.rp-play{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(180deg,#FFF,#DCE1EB);color:#0A0C12;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -12px rgba(255,255,255,.45);transition:transform .12s;
}
.rp-play:active{transform:scale(.93)}

/* ---------- video ---------- */
.vcx{position:fixed;inset:0;z-index:50;background:#04050A;display:flex;flex-direction:column;overflow-y:auto}
.vtopo{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;flex:0 0 auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;border-bottom:1px solid var(--bor);
  background:rgba(4,5,10,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.vquadro{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;min-height:0}
.vtela{
  width:100%;max-width:1010px;aspect-ratio:16/9;border-radius:var(--r);position:relative;overflow:hidden;
  box-shadow:var(--sombra-2);
}
.vtela .vt-arte{position:absolute;inset:0}
.vtela .vt-arte svg{width:100%;height:100%;display:block}
.vtela::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 40%,transparent,rgba(4,5,10,.6))}
.vt-corpo{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;text-align:center;padding:24px;
}
.vetapas{display:flex;gap:0;padding:0 18px 18px;flex-wrap:wrap;flex:0 0 auto}
.et{
  flex:1;min-width:140px;padding:13px 15px;border:1px solid var(--bor);border-right:0;
  font-size:12.5px;color:var(--fg-2);background:var(--vid);
}
.et:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.et:last-child{border-right:1px solid var(--bor);border-radius:0 var(--r-s) var(--r-s) 0}
.et b{display:block;color:var(--fg);font-size:13px;margin-bottom:3px}
.et.viva{background:var(--vid-2);border-color:var(--bor-2)}

/* ---------- avisos / travas ---------- */
.nota{
  display:flex;gap:11px;align-items:flex-start;
  background:color-mix(in srgb,var(--alerta) 9%,rgba(255,255,255,.02));
  border:1px solid color-mix(in srgb,var(--alerta) 26%,transparent);
  color:color-mix(in srgb,var(--alerta) 72%,var(--fg));
  border-radius:var(--r-s);padding:12px 15px;font-size:13px;
}
.nota b{color:var(--alerta)}
.trava{
  border:1px dashed var(--bor-2);border-radius:var(--r);padding:28px;text-align:center;
  background:rgba(255,255,255,.018);
}
.trava p{margin:9px auto 17px;font-size:14px;color:var(--fg-2);max-width:48ch}
.voltar{display:inline-flex;align-items:center;gap:8px;color:var(--fg-2);font-size:13.5px;font-weight:500}
.voltar:hover{color:var(--fg)}

/* ---------- player expandido (referencia: YouTube Music) ---------- */
.px{
  position:fixed;inset:0;z-index:45;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;
}
.px::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% -8%, color-mix(in srgb,var(--amb) 32%,transparent), transparent 70%);
}
.px-topo{
  position:sticky;top:0;z-index:6;flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:calc(13px + env(safe-area-inset-top,0px)) 18px 13px;
  background:linear-gradient(180deg,var(--bg) 62%,transparent);
}
.px-topo .olho{color:var(--fg-2)}
.px-abas{
  position:relative;z-index:2;flex:0 0 auto;display:flex;gap:4px;padding:0 14px 10px;
  overflow-x:auto;scrollbar-width:none;
}
.px-abas::-webkit-scrollbar{display:none}
.px-aba{
  padding:9px 17px;border-radius:99px;font-size:13.5px;font-weight:600;color:var(--fg-2);
  white-space:nowrap;transition:background .16s,color .16s;flex:0 0 auto;
}
.px-aba:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.px-aba[aria-selected="true"]{background:var(--vid-2);color:var(--fg);box-shadow:var(--luz)}
.px-corpo{
  position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;
  padding:4px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.px-mid{margin-block:auto}
.px-mid{width:100%;max-width:540px;display:flex;flex-direction:column;gap:18px}
.px-mid-w{max-width:900px}
.px-capa{width:100%;max-width:min(100%,43vh);margin-inline:auto;border-radius:18px;overflow:hidden;box-shadow:var(--sombra-2)}
.px-capa svg{display:block;width:100%}
.px-video{
  position:relative;width:100%;max-width:min(100%,calc(50vh * 16 / 9));margin-inline:auto;
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  box-shadow:var(--sombra-2);background:#04050A;cursor:pointer;
}
.px-video svg{display:block;width:100%;height:100%}
.px-video-ov{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 70% at 50% 50%,transparent,rgba(4,5,10,.55));
}
.px-video-play{
  width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.93);color:#0A0C12;
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
}
.px-tit{text-align:center}
.px-tit .nome{font-family:var(--f-disp);font-size:clamp(25px,4.4vw,36px);line-height:1.08;letter-spacing:-.015em}
.px-tit .quem{color:var(--fg-2);font-size:14.5px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:9px}

.px-linha{display:flex;align-items:center;gap:11px;width:100%}
.px-barra{
  flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;cursor:pointer;
}
.px-barra i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--frag) 55%,transparent),var(--frag));
  box-shadow:0 0 11px color-mix(in srgb,var(--frag) 6%,transparent);
}
.px-t{font-family:var(--f-num);font-size:12px;color:var(--fg-2);flex:0 0 auto;min-width:4ch}

.px-ctrl{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,26px);width:100%}
.px-bt{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--fg-2);transition:color .16s,background .16s;flex:0 0 auto;
}
.px-bt:hover:not(:disabled){color:var(--fg);background:rgba(255,255,255,.07)}
.px-bt:disabled{opacity:.3;cursor:not-allowed}
.px-bt[aria-pressed="true"],
.px-bt.px-on{color:var(--frag)}
.px-bt-g{
  width:64px;height:64px;background:linear-gradient(180deg,#FFF,#DCE1EB);color:#0A0C12;
  box-shadow:0 12px 30px -14px rgba(255,255,255,.5);
}
.px-bt-g:hover{background:#fff;color:#0A0C12}
.px-extras{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;width:100%}

/* letra */
.px-letra{
  width:100%;max-width:600px;font-family:var(--f-disp);font-size:clamp(19px,2.6vw,25px);
  line-height:1.62;color:var(--fg-2);white-space:pre-line;text-align:center;
}
.px-letra b{color:var(--fg);font-weight:400}

/* fila dentro do player */
.px-fila{width:100%;max-width:640px}
.px-fila-li{
  display:grid;grid-template-columns:24px auto 1fr auto;gap:13px;align-items:center;
  padding:9px 10px;border-radius:var(--r-s);width:100%;text-align:left;transition:background .16s;
}
.px-fila-li:hover{background:rgba(255,255,255,.045)}
.px-fila-li.agora{background:rgba(255,255,255,.06)}
.px-fila-li.agora .nome{color:var(--frag)}
.px-fila-li .capa{width:42px}
.px-fila-n{font-family:var(--f-num);font-size:12.5px;color:var(--fg-3);text-align:right}

.guardado{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:0 0 18px;
  padding:13px 17px;border-radius:var(--r-s);font-size:13.5px;color:var(--fg-2);
  background:var(--vid);border:1px solid var(--bor);box-shadow:var(--luz);
}
/* ---------- playlists ---------- */
.pl-grade{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
.pl-card{
  background:var(--vid);border:1px solid var(--bor);border-radius:var(--r-s);overflow:hidden;
  box-shadow:var(--luz),var(--sombra);text-align:left;width:100%;
  transition:border-color .18s,transform .18s;
}
.pl-card .pl-corpo{padding:10px 11px 12px}
.pl-card .pl-nome{font-weight:600;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.pl-card .pl-qtd{font-size:11.5px;color:var(--fg-2);margin-top:2px}
.pl-card:hover{border-color:var(--bor-2);transform:translateY(-3px)}
.pl-mosaico{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1;background:var(--bg-2)}
.pl-mosaico .capa{border-radius:0;width:100%;height:100%}
.pl-mosaico .vazio{background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.pl-nova{
  border:1px dashed var(--bor-2);border-radius:var(--r-s);background:rgba(255,255,255,.015);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:150px;color:var(--fg-2);transition:border-color .16s,color .16s;padding:18px;text-align:center;
}
.px-aba.px-aba-off{opacity:.42}
.pl-nova:hover{border-color:var(--frag);color:var(--fg)}
.pl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 4px}
.pl-input{
  flex:1 1 150px;min-width:0;padding:11px 15px;border-radius:99px;font:inherit;color:var(--fg);
  background:rgba(255,255,255,.055);border:1px solid var(--bor);
}
.pl-input::placeholder{color:var(--fg-3)}
.pl-input:focus{outline:2px solid var(--frag);outline-offset:1px;border-color:transparent}
.sel-pl{
  position:fixed;inset:0;z-index:55;background:rgba(4,5,10,.78);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.sel-cx{
  width:100%;max-width:420px;max-height:76vh;overflow-y:auto;background:var(--bg-2);
  border:1px solid var(--bor-2);border-radius:var(--r);padding:22px;box-shadow:var(--sombra-2);
}
.sel-li{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;
  border-radius:var(--r-s);transition:background .16s;
}
.sel-li:hover{background:rgba(255,255,255,.055)}
.tag-local{background:color-mix(in srgb,var(--safira) 26%,transparent);color:#9CBCFF}

@media (max-width:880px){
  .px-corpo{padding:4px 16px 20px}
  .px-bt-g{width:58px;height:58px}
  .px-bt{width:42px;height:42px}
}

/* ---------- modo de homologacao ---------- */
.homo-bt{
  position:fixed;right:18px;z-index:40;
  bottom:calc(20px + var(--pl-h) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:9px;padding:11px 17px;border-radius:99px;
  background:rgba(11,13,20,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--bor-2);box-shadow:var(--sombra-2);
  font-size:13px;font-weight:600;color:var(--fg-2);transition:color .16s,border-color .16s;
}
.homo-bt:hover{color:var(--fg);border-color:var(--frag)}
.homo-bt svg{width:17px;height:17px}

.homo-cx{position:fixed;inset:0;z-index:52;background:rgba(4,5,10,.72);display:flex;justify-content:flex-end}
.homo-pn{
  width:min(440px,100%);height:100%;overflow-y:auto;background:var(--bg-2);
  border-left:1px solid var(--bor-2);box-shadow:var(--sombra-2);padding:0;
}
.homo-cab{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:13px;
  background:var(--bg-2);border-bottom:1px solid var(--bor);
  padding:calc(18px + env(safe-area-inset-top,0px)) 22px 15px;
}
.homo-corpo{padding:20px 22px calc(28px + env(safe-area-inset-bottom,0px))}
.homo-sec{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--bor);
}
.homo-sec:first-of-type{border-top:0;padding-top:0}
.homo-tt{
  font-family:var(--f-ui);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:12px;
}
.homo-n{display:flex;gap:10px;flex-wrap:wrap}
.homo-pill{
  padding:9px 15px;border-radius:99px;border:1px solid var(--bor);background:var(--vid);
  font-size:13px;font-weight:600;color:var(--fg-2);transition:all .16s;
}
.homo-pill[aria-pressed="true"]{background:var(--vid-2);color:var(--fg);border-color:var(--bor-2)}
.homo-dado{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:13.5px;
  border-bottom:1px solid var(--bor);
}
.homo-dado:last-child{border-bottom:0}
.homo-dado span{color:var(--fg-2)}
.homo-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.homo-hl{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:9px;border-radius:var(--r-s);background:rgba(255,255,255,.03);border:1px solid var(--bor);
}
.homo-hl .capa{width:38px}
.homo-hl .nm{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.homo-hl .sb{font-size:11.5px;color:var(--fg-2);margin-top:1px}
.homo-hl .cc{font-family:var(--f-num);font-size:11.5px;color:var(--fg-3);text-align:right}

.rot-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rot-item{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:11px 13px;border-radius:var(--r-s);border:1px solid var(--bor);
  background:rgba(255,255,255,.02);transition:border-color .16s,background .16s;
}
.rot-item:hover{border-color:var(--bor-2);background:rgba(255,255,255,.045)}
.rot-item.rot-ok{border-color:color-mix(in srgb,var(--ok) 42%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.rot-tit{display:block;font-size:13.5px;font-weight:600;line-height:1.42}
.rot-tit b{font-weight:700;color:#fff}
.rot-esp{display:block;font-size:12.5px;color:var(--fg-2);margin-top:3px;line-height:1.45}
.rot-item.rot-ok .rot-tit,.rot-item.rot-ok .rot-tit b{color:var(--fg-2);text-decoration:line-through}
.rot-cx{
  width:19px;height:19px;flex:0 0 auto;margin-top:1px;border-radius:5px;
  border:1.5px solid var(--fg-3);display:flex;align-items:center;justify-content:center;color:var(--ok);
}
.rot-item.rot-ok .rot-cx{border-color:var(--ok)}

/* ---------- a tela do ciclo que fechou ---------- */
.res-cx{
  position:fixed;inset:0;z-index:58;background:#05070C;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(26px + env(safe-area-inset-top,0px)) 18px calc(30px + env(safe-area-inset-bottom,0px));
}
.res-cx::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%, color-mix(in srgb,var(--frag) 24%,transparent), transparent 70%);
}
.res-in{position:relative;z-index:2;width:100%;max-width:620px;display:flex;flex-direction:column;gap:22px}
.res-sair{
  position:sticky;top:0;z-index:6;align-self:stretch;display:flex;justify-content:flex-end;
  padding:4px 0 10px;margin-top:-10px;
  background:linear-gradient(180deg,#05070C 58%,transparent);
}
.res-topo{text-align:center}
.res-topo .ol{
  font-family:var(--f-ui);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--frag);display:flex;align-items:center;justify-content:center;gap:9px;
}
.res-topo h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(30px,5.4vw,46px);margin-top:9px;letter-spacing:-.015em}
.res-card{
  background:var(--vid);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--luz),var(--sombra-2);
}
.res-card.venceu{border-color:color-mix(in srgb,var(--frag) 42%,transparent)}
.res-capa{position:relative}
.res-capa .capa{border-radius:0}
.res-faixa{
  position:absolute;top:13px;left:13px;z-index:2;padding:5px 12px;border-radius:99px;
  background:var(--frag);color:#1A1203;font-family:var(--f-ui);font-weight:700;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.res-corpo{padding:18px 20px 20px}
.res-corpo .q{font-size:12px;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.res-corpo .n{font-family:var(--f-disp);font-size:clamp(22px,3.4vw,29px);line-height:1.1;margin-top:5px}
.res-corpo .v{font-size:14px;color:var(--fg-2);margin-top:9px}
.res-corpo .v b{color:var(--frag)}
.res-nova{
  display:flex;align-items:center;gap:12px;padding:13px 16px;margin-top:2px;
  border-top:1px solid var(--bor);background:rgba(255,255,255,.02);font-size:13.5px;color:var(--fg-2);
}
.res-nova b{color:var(--fg)}
.res-barra{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.res-sub{
  text-align:center;font-size:13.5px;color:var(--fg-2);max-width:46ch;margin-inline:auto;
}
@media (max-width:880px){
  .homo-bt{right:14px;padding:10px 15px;font-size:12.5px}
  .homo-bt{bottom:calc(var(--nav-h) + var(--pl-h) + 16px + env(safe-area-inset-bottom,0px))}
  .homo-pn{border-left:0}
}

/* ---------- entrar na conta ---------- */
.ent-cx{
  position:fixed;inset:0;z-index:60;background:rgba(4,5,10,.82);
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ent-caixa{
  width:100%;max-width:420px;max-height:88vh;overflow-y:auto;background:var(--bg-2);
  border:1px solid var(--bor-2);border-radius:var(--r);box-shadow:var(--sombra-2);
  padding:26px 24px calc(26px + env(safe-area-inset-bottom,0px));
}
/* ⚠️ 04/10: em 320x568 o botao de sair terminava 96px abaixo da janela — a caixa
   rola, mas a regra e' saida VISIVEL SEM ROLAR. Este X e' `sticky`, entao fica
   no alto enquanto o resto rola por baixo. */
.ent-x{
  position:sticky;top:-6px;z-index:3;display:block;margin:-10px -6px -26px auto;
  width:38px;height:38px;border:0;padding:0;border-radius:11px;cursor:pointer;
  background:var(--bg-2);color:var(--fg-2);
}
.ent-x svg{width:19px;height:19px;display:block;margin:auto}
.ent-x:active{color:var(--fg);background:rgba(255,255,255,.07)}
.ent-caixa .gema{margin:0 auto 14px;width:30px;height:30px}
.ent-caixa h2{font-family:var(--f-disp);font-weight:400;font-size:27px;text-align:center;letter-spacing:-.015em}
.ent-caixa p.sub{text-align:center;margin:8px auto 20px;font-size:14px;max-width:34ch}
.ent-campo{display:block;width:100%;margin-bottom:12px}
.ent-campo span{
  display:block;font-size:12px;font-weight:600;color:var(--fg-2);margin-bottom:6px;letter-spacing:.02em;
}
.ent-campo input{
  width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-size:16px;color:var(--fg);
  background:rgba(255,255,255,.055);border:1px solid var(--bor);
}
.ent-campo input:focus{outline:2px solid var(--frag);outline-offset:1px;border-color:transparent}
.ent-senha{position:relative;display:block}
.ent-senha input{padding-right:50px}
.ent-olho{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;border-radius:11px;color:var(--fg-2);cursor:pointer;
}
.ent-olho svg{width:20px;height:20px}
.ent-olho:active{color:var(--frag);background:rgba(255,255,255,.06)}
.ent-erro{
  background:color-mix(in srgb,var(--rubi) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rubi) 40%,transparent);
  color:color-mix(in srgb,var(--rubi) 72%,var(--fg));
  border-radius:var(--r-s);padding:11px 14px;font-size:13.5px;margin-bottom:14px;
}
.ent-ok{
  background:color-mix(in srgb,var(--ok) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  color:color-mix(in srgb,var(--ok) 76%,var(--fg));
  border-radius:var(--r-s);padding:11px 14px;font-size:13.5px;margin-bottom:14px;
}
.ent-troca{text-align:center;margin-top:16px;font-size:13.5px;color:var(--fg-2)}
.ent-troca button{color:var(--frag);font-weight:600;text-decoration:underline}
.conta-topo{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--vid);border:1px solid var(--bor);border-radius:var(--r);
  box-shadow:var(--luz);padding:18px;margin-bottom:4px;
}
.conta-letra{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--vid-2);border:1px solid var(--bor-2);font-family:var(--f-disp);font-size:22px;
}
/* ---------- celular ---------- */
@media (max-width:880px){
  .trilha{
    inset:auto 0 0 0;width:auto;flex-direction:row;border-right:0;border-top:1px solid var(--bor);
    padding:7px 5px calc(7px + env(safe-area-inset-bottom,0px));gap:0;
  }
  .marca,.tr-pe{display:none}
  .tr-item{
    flex-direction:column;gap:4px;padding:7px 2px;font-size:10px;justify-content:center;
    text-align:center;font-weight:600;letter-spacing:0;
  }
  .tr-item svg{width:22px;height:22px}
  .tr-item.extra{display:none}
  .tr-item[aria-current="page"]::before{
    left:50%;top:0;transform:translateX(-50%);width:18px;height:3px;border-radius:0 0 3px 3px;
  }
  .palco{margin-left:0;padding-bottom:calc(var(--nav-h) + var(--pl-h) + 20px)}
  .larg{padding-inline:16px}
  .carr-cx{margin-inline:-16px;padding-inline:16px}
  .carr{padding-right:16px;margin-right:-16px}
  .hero{border-radius:0 0 22px 22px}
  .rp{left:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding:11px 15px}
  .filas{grid-template-columns:1fr}
  .frag-n strong{font-size:42px}
  .li.ep .capa{width:88px}
  .vetapas{flex-direction:column}
  .et{border-right:1px solid var(--bor)}
  .et:first-child{border-radius:var(--r-s) var(--r-s) 0 0}
  .et:not(:last-child){border-bottom:0}
  .et:last-child{border-radius:0 0 var(--r-s) var(--r-s)}
  .cel{width:146px}
  .cel-w{width:250px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------------------ o que esta' no aparelho
   ⚠️ 04/10: no iPhone o numero, o texto e o espaco dividiam a MESMA linha e nao
   cabiam: o "9" ficava solto no canto e "0 MB" quebrava no meio. Agora o numero
   tem a coluna dele e o texto ocupa a largura toda. */
.guardado-n{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.guardado-n .num{color:var(--frag);font-weight:600;font-size:21px;line-height:1}
.guardado-n span:last-child{font-size:12.5px;color:var(--fg-3);white-space:nowrap}
.guardado-txt{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.guardado-txt b{font-weight:600}
.guardado-txt span{color:var(--fg-3);font-size:12px}
@media (min-width:520px){ .guardado-txt{flex:1 1 auto} }

/* ------------------------------------------------------ busca no acervo (05/10)
   ⚠️ font-size 16px no campo e obrigatorio: abaixo disso o Safari do iPhone
   amplia a pagina sozinho ao focar, e a tela sai do lugar. */
.busca{
  position:relative;display:flex;align-items:center;gap:10px;margin:0 0 16px;
  padding:0 14px;border:1px solid var(--bor);border-radius:13px;
  background:rgba(255,255,255,.045);
}
.busca > svg{flex:0 0 auto;color:var(--fg-3)}
.busca input{
  flex:1;min-width:0;border:0;background:none;outline:none;color:var(--fg);
  font:inherit;font-size:16px;padding:13px 0;
}
.busca input::placeholder{color:var(--fg-3)}
.busca input::-webkit-search-cancel-button{display:none}
.busca:focus-within{border-color:color-mix(in srgb,var(--frag) 55%,transparent)}
.busca-x{
  flex:0 0 auto;width:30px;height:30px;border:0;padding:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.07);color:var(--fg-2);display:flex;align-items:center;justify-content:center;
}
.busca-x:active{color:var(--fg)}

/* ------------------------------------------------- continuar de onde parou
   Sai da tela no primeiro toque: aviso que fica para sempre vira enfeite. */
.retomar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 0 20px;padding:15px 18px;border-radius:var(--r);
  background:color-mix(in srgb,var(--frag) 9%,var(--bg-2));
  border:1px solid color-mix(in srgb,var(--frag) 26%,transparent);
}
.retomar-barra{
  margin-top:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;
}
.retomar-barra i{display:block;height:100%;background:var(--frag);border-radius:2px}

/* --------------------------------------------- o que o voto escolheu (05/10) */
.escolhas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.escolha{
  display:flex;align-items:center;gap:14px;padding:12px 15px;border-radius:var(--r-s);
  background:var(--bg-2);border:1px solid var(--bor);
}
.escolha .capa{flex:0 0 auto}