/* /como-o-mar-elege-as-suas-listas: animação narrada. O palco tem sempre 1280x720 e é redimensionado por JavaScript (transform: scale),
   por isso tudo lá dentro está em px. Sempre escuro, independentemente do tema do site. */

.listas-topo { margin: 8px 0 18px; }
.listas-topo h1 { margin: 0 0 6px; font: 700 clamp(26px, 4vw, 40px)/1.12 var(--font-num); letter-spacing: -.02em; }
.listas-topo p { margin: 0; color: var(--tinta-2); font-size: 18px; }

.lp { --lp-bg: #07122E; --lp-p: #5AA9E6; --lp-p2: #7FA8FF; --lp-o: #FF8928; --lp-t: #F4FAFF; --lp-t2: #A9B9D6; --lp-ok: #6BD06B; --lp-no: #FF7A7A;
      --lp-card: rgba(255,255,255,.07); --lp-borda: rgba(255,255,255,.16); }
.lp-caixa { position: relative; background: #000; border-radius: var(--r-2); overflow: hidden; }
.lp-vista { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lp-bg); }
.lp-palco { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; color: var(--lp-t); font: 500 28px/1.3 var(--font-ui);
            background: radial-gradient(1100px 700px at 15% 0%, #123a7a 0%, transparent 60%), linear-gradient(160deg, #0b1d45, #07122E 70%); overflow: hidden; user-select: none; }
.lp-palco b { font-weight: 700; color: #fff; }
.lp-palco small { display: block; font-size: 20px; font-weight: 500; color: var(--lp-t2); line-height: 1.25; }
.lp svg.ic, .lp svg.pe { display: inline-block; flex: none; fill: currentColor; }
:where(.lp) svg.ic { width: 40px; height: 40px; }

/* cenas e elementos que aparecem no segundo certo */
.cena { position: absolute; inset: 0; padding: 56px 72px 128px; display: flex; flex-direction: column; justify-content: center; gap: 22px;
        opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.cena.ativa { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.lp [data-t] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.lp [data-t].on { opacity: 1; transform: none; }
.lp [data-t].off { opacity: 0 !important; transform: translateY(-10px); }
.lp .slot[data-t], .lp .dot[data-t], .lp .tok[data-t], .lp .seat[data-t], .lp .cons[data-t] { transform: scale(.4); }
.lp .slot[data-t].on, .lp .dot[data-t].on, .lp .tok[data-t].on, .lp .seat[data-t].on { transform: none; }
.lp .pe[data-t] { transform: scale(.5); }
.lp .pe[data-t].on { transform: none; }
.lp .cena .pe, .lp .cena .slot { transition-property: opacity, transform, background-color, border-color; }

.k { display: flex; align-items: center; gap: 12px; font: 700 22px var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-o); }
.k .ic { width: 30px; height: 30px; }
.t1 { margin: 0; font: 700 54px/1.1 var(--font-num); letter-spacing: -.02em; }
.t1 b { color: var(--lp-o); }
.sub { font-size: 30px; color: var(--lp-t2); }
.sub.peq { font-size: 24px; }
.dest { color: var(--lp-o); }
.centro-t { text-align: center; }

.c-titulo { align-items: flex-start; gap: 26px; padding-bottom: 90px; }
.c-titulo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,18,46,.92), rgba(7,18,46,.35)), url(../images/onda.png) center / cover; }
.titulo { margin: 0; font: 700 92px/1.04 var(--font-num); letter-spacing: -.03em; }
.titulo b { color: var(--lp-o); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.duas.centro { align-items: center; }
.esq, .dir { position: relative; }
.esq.alto { height: 415px; }
.pilha { display: flex; flex-direction: column; gap: 18px; }

/* pessoas */
.pe { width: 64px; height: 64px; color: var(--lp-t2); }
.pe.p { width: 40px; height: 40px; }
.pe.g { width: 96px; height: 96px; }
.pe.h { color: var(--lp-p2); }
.pe.m { color: var(--lp-o); }
.pe.tu { color: #fff; filter: drop-shadow(0 0 14px var(--lp-o)); }
.pe.n { width: 56px; height: 56px; color: #6f86b4; }
.pe.n.tu { color: var(--lp-o); width: 72px; height: 72px; filter: drop-shadow(0 0 16px var(--lp-o)); }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cartao { background: var(--lp-card); border: 1.5px solid var(--lp-borda); border-radius: 18px; padding: 20px 24px; }
.cab { font: 700 20px var(--font-num); color: var(--lp-t2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; display: flex; justify-content: space-between; }
.b { display: block; height: 12px; border-radius: 6px; background: rgba(255,255,255,.28); }
.chip { display: inline-block; padding: 8px 20px; border-radius: 99px; background: rgba(90,169,230,.18); border: 1.5px solid var(--lp-p); font-size: 24px; font-weight: 600; }
.chip.nao { border-color: var(--lp-no); background: rgba(255,122,122,.14); text-decoration: line-through; text-decoration-color: var(--lp-no); display: inline-flex; align-items: center; gap: 8px; }
.chip.nao .ic { width: 28px; height: 28px; color: var(--lp-no); }
.chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chips.grandes .chip { font-size: 30px; }
.tag { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 10px 22px; border-radius: 14px; background: var(--lp-card); border: 1.5px solid var(--lp-borda); font-size: 26px; font-weight: 600; }
.tag .ic { width: 34px; height: 34px; }
.tag.mau { border-color: var(--lp-no); color: #ffd0d0; margin-top: 16px; }
.tag.mau .ic { color: var(--lp-no); }
.tag.ok { border-color: var(--lp-ok); color: #d6f5d6; }
.tag.ok .ic { color: var(--lp-ok); }
.tag.grande { font-size: 30px; margin-bottom: 14px; }

/* 1: partidos convencionais */
.grp { position: absolute; display: flex; gap: 2px; }
.grp.g0 { left: 0; top: 40px; } .grp.g1 { left: 190px; top: 150px; } .grp.g2 { left: 20px; top: 270px; }
.rot { position: absolute; left: 0; bottom: 0; font-size: 26px; color: var(--lp-t2); }
.pir { position: absolute; inset: 0; }
.pir-n { position: absolute; left: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 22px; line-height: 1.15;
         transform: translateX(-50%); background: linear-gradient(#2a5fb0, #1d478a); }
.pir-n.n1 { top: 0; width: 270px; height: 130px; clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 52px; font-size: 20px; background: linear-gradient(#FF8928, #d96a12); }
.pir-n.n2 { top: 140px; width: 340px; height: 130px; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.pir-n.n3 { top: 280px; width: 480px; height: 130px; clip-path: polygon(21% 0, 79% 0, 100% 100%, 0 100%); background: linear-gradient(#1d478a, #163a73); }
.lp [data-t].pir-n { transform: translateX(-50%) translateY(18px); }
.lp [data-t].pir-n.on { transform: translateX(-50%); }
.x-grande { z-index: 2; pointer-events: none; position: absolute; left: 50%; top: 150px; margin-left: -130px; color: var(--lp-no); }
.x-grande .ic { width: 260px; height: 260px; opacity: .4; }
.lista .lr { display: flex; align-items: center; gap: 14px; padding: 5px 0; position: relative; }
.lista .lr .b { flex: 1; max-width: 60%; }
.lista .marca { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.lista .marca .ic { width: 28px; height: 28px; }
.marca.ok { background: var(--lp-ok); color: #07122E; } .marca.nao { background: var(--lp-no); color: #07122E; }

/* 2: és tu */
.multidao { display: grid; grid-template-columns: repeat(5, 72px); gap: 10px 14px; position: relative; justify-content: start; align-items: center; justify-items: center; }
.eu { position: absolute; font: 700 26px var(--font-num); color: var(--lp-o); }
.seta { width: 70px; height: 36px; color: var(--lp-t2); }
.lista.peq { min-width: 360px; }
.lista.peq .lr { padding: 10px 0; }
.lista .sl { width: 34px; height: 34px; border-radius: 8px; border: 2px dashed var(--lp-t2); transition: all .4s; flex: none; }
.lista .sl.go { border: 2px solid var(--lp-p); background: var(--lp-p); }

/* slots (lugares da lista) */
.slot { width: 52px; height: 52px; border-radius: 12px; background: var(--lp-p); box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset; }
.slot.s { background: var(--lp-o); }
.slot.n { background: var(--lp-p2); }
.slot.vazio { background: transparent; border: 2.5px dashed rgba(255,255,255,.4); }
.slot.vazio.on.fim { }
.slot.vazio.fim.on[data-tr].on, .slot.fim.on { }
.grade { display: grid; grid-template-columns: repeat(7, 52px); gap: 12px; }
.grade.peq .slot { width: 44px; height: 44px; }
.grade.peq { grid-template-columns: repeat(7, 44px); gap: 10px; }
.grade.g21 { align-self: flex-start; }
.slot.vazio.fim { transition: all .5s; }

/* 3 */
.linha3 { display: flex; gap: 24px; }
.circ { display: flex; align-items: center; gap: 16px; padding: 22px 28px; font-size: 28px; }
.circ .ic { width: 56px; height: 56px; color: var(--lp-p); }
.linha-lista { display: flex; flex-direction: column; gap: 10px; }
.slots { gap: 12px; }
.etiq { gap: 24px; font-size: 28px; }
.et.c b { color: var(--lp-p); } .et.s b { color: var(--lp-o); }
.et { font-size: 28px; }

/* 4 */
.pes { gap: 8px; }
.mid { color: var(--lp-t2); }
.boletim { background: #F4FAFF; color: #07122E; border-color: transparent; min-width: 330px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.boletim .cab { color: #4A5878; }
.boletim .bl { display: flex; align-items: center; gap: 14px; padding: 3px 0; }
.boletim .bl i { width: 28px; height: 28px; border-radius: 7px; border: 2.5px solid #94B3D3; flex: none; position: relative; transition: all .3s; }
.boletim .bl .b { flex: 1; background: #C5D9EE; }
.boletim .bl.marc i, .boletim .bl.go i { }
.boletim .bl.go i { background: var(--lp-p); border-color: var(--lp-p); }
.boletim .bl.go i::after { content: ""; position: absolute; left: 6px; top: 1px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(40deg); }
.boletim.peq { min-width: 260px; }
.boletim.peq .bl.marc i { background: var(--lp-p); border-color: var(--lp-p); }
.frac .n1 { font: 700 120px/1 var(--font-num); color: var(--lp-o); }
.frac .leg { font-size: 26px; color: var(--lp-t2); }
.frac .leg.dest { font: 700 44px var(--font-num); color: #fff; margin-top: 8px; }

/* equações */
.eq { display: flex; align-items: flex-end; gap: 22px; }
.eqi { text-align: center; padding: 6px 22px 10px; border-radius: 16px; background: var(--lp-card); border: 2px solid var(--lp-borda); }
.eqi b { display: block; font: 700 76px/1.1 var(--font-num); }
.eqi.c b { color: var(--lp-p); } .eqi.s b { color: var(--lp-o); } .eqi.n b { color: var(--lp-p2); }
.eqi small { font-size: 22px; }
.eqs { font: 700 60px var(--font-num); color: var(--lp-t2); align-self: center; }
.eq.peq .eqi b { font-size: 54px; }
.eq.grande-eq { justify-content: center; margin-top: 4px; }
.eq.grande-eq .eqi b { font-size: 64px; }

/* 6: João */
.cartao.conta { display: flex; flex-direction: column; gap: 6px; font: 700 64px/1.15 var(--font-num); }
.conta-l span { display: inline-block; margin-right: 12px; color: var(--lp-t2); }
.conta-l b { color: #fff; }
.conta-r { color: var(--lp-t2); } .conta-r b { color: var(--lp-o); font-size: 120px; }
.dir.joao { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.joao-pes { display: flex; align-items: center; gap: 14px; }
.joao-n { font: 700 40px var(--font-num); margin-right: 8px; }
.boletim .nm { font-size: 27px; font-weight: 700; flex: 1; }
.boletim .bl { min-height: 38px; }

/* 7 */
.baralha { position: relative; height: 150px; display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 10px; }
.nome-chip { width: 140px; text-align: center; padding: 10px 0; font-size: 24px; border-radius: 99px; background: #F4FAFF; color: #07122E; font-weight: 700; transition: transform .9s cubic-bezier(.5,0,.2,1), opacity .5s; }
.baralha.go .nome-chip { transform: translate(var(--dx), var(--dy)); }
.baralha .troca { position: absolute; left: 50%; top: -30px; margin-left: -28px; width: 56px; height: 56px; color: var(--lp-o); opacity: 0; transition: opacity .5s; }
.baralha.go .troca { opacity: 1; }
.lp [data-t].nome-chip { transform: translateY(18px); }
.lp [data-t].nome-chip.on { transform: none; }
.baralha.go [data-t].nome-chip.on { transform: translate(var(--dx), var(--dy)); }

/* 8 */
.minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mini { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px 16px; position: relative; }
.mini .b { width: 100%; height: 9px; }
.mini .ic { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; color: var(--lp-ok); }
.mini.joaomini { border-color: var(--lp-o); }
.mini.joaomini b { font-size: 22px; }

/* 9 */
.par { display: flex; align-items: center; gap: 28px; }
.par-l { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pes7 .pe { width: 56px; height: 56px; }
.par-ou { font: 700 34px var(--font-num); color: var(--lp-t2); }
.legp { font-size: 26px; } .legp .m { color: var(--lp-o); font-weight: 700; } .legp .h { color: var(--lp-p2); font-weight: 700; }
.par-final { display: flex; align-items: center; gap: 28px; align-self: flex-start; }
.par-final .pe { width: 48px; height: 48px; }
.par-txt { display: flex; align-items: center; gap: 12px; font-size: 28px; } .par-txt .ic { color: var(--lp-ok); }

/* 10 */
.cartao.lista10 { position: relative; width: 520px; height: 350px; padding: 24px; box-sizing: content-box; }
.lista10 .num, .lista10 .bb, .lista10 .ico { position: absolute; }
.lista10 .num { left: 26px; width: 38px; font: 700 24px/50px var(--font-num); color: var(--lp-t2); margin-top: 24px; }
.lista10 .bb { left: 190px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.2); max-width: 300px; margin-top: 24px; }
.lista10 .ico { left: 90px; margin-top: 24px; transition: top .9s cubic-bezier(.5,0,.2,1); }
.lista10 .ico .pe { width: 42px; height: 42px; display: block; margin-top: 4px; }
.lista10.go .troca-desce { top: 200px !important; }
.lista10.go .troca-sobe { top: 100px !important; }
.badge { position: absolute; right: 24px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 99px; font-size: 24px; font-weight: 700; }
.badge .ic { width: 28px; height: 28px; }
.badge.nao { background: var(--lp-no); color: #07122E; } .badge.sim { background: var(--lp-ok); color: #07122E; }
.cartao.nota { display: flex; align-items: center; gap: 18px; padding: 12px 22px; }
.nota .ic { width: 48px; height: 48px; color: var(--lp-o); }
.nota b { font-size: 26px; display: block; line-height: 1.2; }
.nota small { font-size: 18px; }

/* 11 */
.urna { position: relative; width: 240px; height: 240px; margin: 0 auto; color: var(--lp-p); }
.urna .grande { width: 240px; height: 240px; position: absolute; left: 0; bottom: 0; }
.voto { position: absolute; left: 90px; top: -10px; width: 60px; height: 76px; border-radius: 6px; background: #F4FAFF; }
.lp .urna [data-t].voto { transform: translateY(-80px); }
.lp .urna [data-t].voto.on { transform: translateY(90px) scale(.8); opacity: .0; transition: transform .8s ease-in, opacity .9s ease-in; }
.lp .urna [data-t].voto.on { opacity: 1; }
.voto.v1 { left: 70px; } .voto.v3 { left: 110px; }

/* 13 */
.mar-pontos { position: absolute; inset: 40px 72px 140px; display: grid; grid-template-columns: repeat(40, 1fr); gap: 14px; align-content: center; opacity: .28; }
.dot { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--lp-p); }
.gigante { font: 700 190px/1 var(--font-num); color: #fff; text-shadow: 0 6px 30px rgba(7,18,46,.9); position: relative; }
.cena .k, .cena .t1 { position: relative; text-shadow: 0 2px 20px rgba(7,18,46,.9); }

/* 14 */
.tokens { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.tok { width: 28px; height: 28px; border-radius: 50%; background: var(--lp-o); }
.tabela .cab span:last-child { color: var(--lp-o); }
.tabela .tr { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.tabela .tr .b { background: var(--lp-p); height: 20px; }

/* 15 */
.cartao.ranking { position: relative; height: 430px; width: 560px; }
.rk { position: absolute; left: 24px; right: 24px; top: calc(24px + var(--a) * 50px); display: flex; align-items: center; gap: 12px; transition: top .9s cubic-bezier(.5,0,.2,1); }
.ranking.go .rk { top: calc(24px + var(--b) * 50px); }
.rk .pos { width: 52px; font: 700 22px var(--font-num); color: var(--lp-t2); }
.rk .b { background: var(--lp-p); height: 26px; transition: width .9s; }
.rk .pe { width: 36px; height: 36px; }

/* 16 */
.cartao.col16 { position: relative; display: flex; flex-direction: column; gap: 4px; width: 480px; padding: 20px 24px; }
.r16 { height: 14px; border-radius: 7px; background: var(--lp-p); transition: opacity .6s, background .6s; }
.r16.fora { background: var(--lp-p); }
.col16.go .r16.fora { opacity: .18; background: var(--lp-no); }
.corte { position: absolute; left: 0; right: 0; top: 21 * 18px; top: 402px; border-top: 3px dashed var(--lp-no); }
.corte span { position: absolute; right: 16px; top: 6px; font-size: 22px; font-weight: 700; color: var(--lp-no); background: var(--lp-bg); padding: 0 8px; }

/* 17-19 */
.legg { display: flex; gap: 22px; margin-top: 18px; font-size: 28px; }
.lg.c b { color: var(--lp-p); } .lg.v b { color: var(--lp-o); }
.grade.go .slot.vazio { border-color: var(--lp-o); background: rgba(255,137,40,.14); animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { background: rgba(255,137,40,.34); } }
.lp .slot.vazio.on.fim.on { }
.slot.vazio[data-tr].go { background: var(--lp-o); border: 2.5px solid var(--lp-o); animation: none; }
.cons-box { display: flex; flex-direction: column; align-items: center; }
.cons-anel { position: relative; width: 300px; height: 300px; }
.cons { position: absolute; left: 130px; top: 130px; transform: rotate(calc(var(--r) * 1deg)) translateY(-120px) rotate(calc(var(--r) * -1deg)); }
.lp [data-t].cons { opacity: 0; }
.lp [data-t].cons.on { opacity: 1; transform: rotate(calc(var(--r) * 1deg)) translateY(-120px) rotate(calc(var(--r) * -1deg)); }
.cons .pe { width: 44px; height: 44px; color: var(--lp-o); }
.cons-leg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 176px; }
.lp [data-t].cons-leg { transform: translate(-50%, -40%); }
.lp [data-t].cons-leg.on { transform: translate(-50%, -50%); }
.cons-leg b { font-size: 24px; display: block; white-space: nowrap; }
.cons-leg small { font-size: 15px; }
.linha-votos { display: flex; gap: 14px; flex-wrap: wrap; }
.vt { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; border-radius: 99px; font-size: 24px; font-weight: 600; background: var(--lp-card); border: 1.5px solid var(--lp-borda); }
.vt .ic { width: 28px; height: 28px; }
.vt.nao { border-color: var(--lp-no); color: #ffd0d0; } .vt.nao .ic { color: var(--lp-no); }
.vt.ok { border-color: var(--lp-ok); } .vt.ok .ic { color: var(--lp-ok); }

/* 20 */
.hemi { position: relative; }
.hemi-box { position: relative; width: 480px; height: 250px; }
.seat { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--lp-o); }
.seat.b { background: transparent; border: 3px solid var(--lp-o); }
.hemi-n { position: absolute; left: 0; width: 480px; bottom: -6px; text-align: center; }
.hemi-n b { font: 700 74px/1 var(--font-num); color: #fff; }
.fecho { margin: 0; font: 700 40px/1.2 var(--font-num); text-align: center; }
.fecho b { color: var(--lp-o); }

/* legendas, barra de progresso, início e controlos */
.lp-leg { position: absolute; left: 80px; right: 80px; bottom: 26px; text-align: center; font: 600 31px/1.3 var(--font-ui); color: #fff; text-shadow: 0 2px 8px #000, 0 0 3px #000;
          min-height: 82px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.lp-leg span { background: rgba(3,8,22,.72); padding: 6px 18px; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lp-leg:empty { display: none; }
.lp:not(.com-leg) .lp-leg { display: none; }
.lp-barra-topo { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(255,255,255,.1); }
.lp-barra-topo i { display: block; height: 100%; width: 0; background: var(--lp-o); }

.lp-inicio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; border: 0; cursor: pointer; color: #fff; font: 700 clamp(18px, 3.2vw, 34px) var(--font-num);
             background: rgba(7,18,46,.55); transition: opacity .3s; text-align: left; }
.lp-inicio svg { width: clamp(56px, 9vw, 100px); height: clamp(56px, 9vw, 100px); padding: 18px; border-radius: 50%; background: var(--lp-o); color: #07122E; box-sizing: border-box; flex: none; }
.lp-inicio small { display: block; margin-top: 4px; font: 500 clamp(13px, 1.7vw, 19px) var(--font-ui); color: var(--lp-t2); }
.lp-inicio:hover svg, .lp-inicio:focus-visible svg { transform: scale(1.06); }
.lp-inicio.fora { opacity: 0; pointer-events: none; }

.lp-controles { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #0a1631; color: #fff; }
.lp-controles button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.lp-controles button:hover { background: rgba(255,255,255,.12); }
.lp-controles button:focus-visible, .lp-linha:focus-visible, .lp-inicio:focus-visible { outline: 3px solid var(--lp-o); outline-offset: 2px; }
.lp-controles svg { width: 24px; height: 24px; }
.lp-controles button[aria-pressed="false"]#lp-cc { opacity: .5; }
.lp-n, .lp-tempo { font: 600 14px var(--font-num); color: #cfdcf5; white-space: nowrap; padding: 0 6px; }
.lp-linha { position: relative; flex: 1; height: 28px; cursor: pointer; display: flex; align-items: center; min-width: 80px; }
.lp-linha::before { content: ""; position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); }
.lp-linha > i { position: absolute; left: 0; height: 6px; border-radius: 3px; background: var(--lp-o); width: 0; }
.lp-marcas { }
#lp-marcas { position: absolute; inset: 0; }
#lp-marcas b { position: absolute; top: 9px; width: 2px; height: 10px; background: rgba(255,255,255,.45); margin-left: -1px; }
.i-pausa { display: none; } .lp.a-tocar .i-pausa { display: block; } .lp.a-tocar .i-play { display: none; }
.i-mudo { display: none; } #lp-mudo[aria-pressed="true"] .i-mudo { display: block; } #lp-mudo[aria-pressed="true"] .i-som { display: none; }

.lp-atalhos { margin: 10px 2px 0; font-size: 14px; color: var(--tinta-2); }
.lp-atalhos kbd { font: 600 12px var(--font-num); padding: 2px 7px; border: 1px solid var(--campo-borda); border-bottom-width: 2px; border-radius: 6px; background: var(--superficie); color: var(--tinta); }

/* ecrã inteiro */
.lp-caixa:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0; }
.lp-caixa:fullscreen .lp-vista { width: min(100vw, 100vh * 16 / 9); }
.lp-caixa:fullscreen .lp-controles { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(3,8,22,.9)); padding-top: 28px; transition: opacity .3s; }
.lp-caixa:fullscreen.parado { cursor: none; }
.lp-caixa:fullscreen.parado .lp-controles { opacity: 0; pointer-events: none; }
.lp-caixa:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0; }
.lp-caixa:-webkit-full-screen .lp-vista { width: min(100vw, 100vh * 16 / 9); }
.lp-caixa:-webkit-full-screen .lp-controles { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(3,8,22,.9)); }

@media (max-width: 640px) { .lp-n, .lp-tempo { display: none; } .lp-controles button { width: 36px; } }
@media (prefers-reduced-motion: reduce) { .lp [data-t], .cena { transition-duration: .01s !important; } .slot.vazio { animation: none !important; } }

/* texto completo */
.listas-texto { margin-top: 36px; }
.listas-texto h2 { font: 700 26px var(--font-num); margin: 0 0 12px; }
.listas-texto .corpo { font-size: 18px; line-height: 1.65; max-width: 70ch; }
.listas-texto .corpo p { margin: 0 0 1.1em; }