:root{--bg:#0b0b0d;--ink:#f2efe8;--mute:#9a968e;--line:#26262b;--red:#d62b2b;--tile:#e8e4dc;--tileb:#d6d2c9;--tilesh:#0b0b0d;--tileon:#fbfaf7;--screen:#000;--sheet:#121215;--btn:#141417;--track:#63636e;--logow:42px;--logogap:10px;--font:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;--serif:"Georgia","Times New Roman",serif;--sans:-apple-system,"Helvetica Neue",Arial,sans-serif}
:root[data-theme="light"]{--bg:#f4f1ea;--ink:#14140f;--mute:#6f6a61;--line:#ddd7cb;--red:#c62222;--tile:#fff;--tileb:#d8d2c6;--tilesh:#bdb6a8;--tileon:#fff;--screen:#0b0b0d;--sheet:#fffdf8;--btn:#eae6dd;--track:#8b8576}
/* o atributo hidden tem que ganhar de qualquer regra de display do autor.
   Sem isto, .btn{display:inline-flex} deixava o botao de AirPlay na tela
   mesmo marcado como escondido, e ele nao tinha nem clique ligado. */
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:clip}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:14px 20px}
/* A pagina do evento tem teto proprio: o palco e 16:9 e cresce com a ALTURA da
   janela, entao numa tela alta os 1180px sobravam como margem morta dos dois
   lados. Medido em 1920x1300: a altura permitia 1588px de palco e o teto segurava
   em 1140, com 390px vazios de cada lado. Em evento 4:3 isso soma com a tarja
   preta e a imagem cai pra 45% da tela. A home fica nos 1180. */
.wrap.ev{max-width:min(1600px,94vw)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:8px}
/* a assinatura vira subtexto do logo, alinhada com a palavra, e nao um item solto na direita */
.brandwrap{display:flex;align-items:center;margin-right:auto;min-width:0}

.langsw{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.langsw button{background:transparent;border:0;color:var(--mute);font:700 11px Inter,var(--sans);letter-spacing:.08em;padding:5px 8px;cursor:pointer}
.langsw button.on{background:var(--ink);color:var(--bg)}
.themesw{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--mute);width:30px;height:26px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.themesw:hover{color:var(--ink);border-color:var(--ink)}
.themesw svg{width:15px;height:15px}
.brand{font-family:Inter,var(--sans);font-weight:200;font-size:34px;letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center;gap:var(--logogap);line-height:1}
.brand b{font-weight:700}
.brand .logo{width:var(--logow);height:var(--logow);flex:none}
.hero h1 em{font-style:italic;font-weight:300;color:var(--red)}
.hero{padding:38px 0 6px}
.hero h1{font-family:var(--font);font-weight:700;letter-spacing:-.035em;font-size:clamp(28px,3.8vw,44px);line-height:1.08;margin:0 0 14px;max-width:760px}
.hero p{color:var(--mute);font-size:15px;max-width:560px;line-height:1.5;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:28px}
.card{display:block;text-decoration:none;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,var(--ink) 12%);padding:0;overflow:hidden;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:#3a3a42}
.card .art{aspect-ratio:16/9;background:#1a1a1f;display:flex;align-items:flex-end;padding:16px;position:relative}
.card .art .date{font-family:var(--font);font-weight:200;letter-spacing:-.03em;font-size:44px;line-height:1;color:var(--ink);opacity:.95}
.card .art .date small{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.card .body{padding:14px 16px 18px}
.card h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.22}
.card p{margin:0;color:var(--mute);font-size:14px;line-height:1.45}
.card .meta{margin-top:12px;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.card.soon{opacity:.5;pointer-events:none}
/* player (página do evento cabe na tela) */
.evhead{display:flex;align-items:baseline;gap:16px;padding:16px 0 16px}
.evhead h1{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,28px);margin:0;line-height:1.1;flex:1}
.evhead .tzl{color:var(--mute);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.back{font-size:13px;color:var(--mute);text-decoration:none}
.player{display:block;height:calc(100vh - 150px);min-height:420px}
@media(max-width:900px){.player{grid-template-columns:1fr;height:auto}}
.stage{display:flex;flex-direction:column;min-height:0}
.screen{background:var(--screen);position:relative;border:1px solid var(--line);flex:1;min-height:0}
.screen video,.screen iframe,.screen #yt{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.screen video{object-fit:contain}   /* fonte 4:3 entra com tarja, nao esticada */
@media(max-width:900px){.screen{aspect-ratio:16/9;flex:none}}
/* Escudo sobre o iframe. Com controls:0 a barra de baixo some, mas a tarja de
   titulo e o "assistir no YouTube" ainda aparecem no hover, e nao ha parametro que
   desligue. Sem hover nao ha tarja. Quem comanda a reproducao e a barra do airtime;
   as coberturas de toque ficam acima deste escudo e continuam recebendo o clique. */
.screen .escudo{position:absolute;inset:0;z-index:1;background:transparent}
/* Legenda nossa. O YouTube nao traduz pelo embed e so deixa mexer no tamanho, e a
   barra dele fica atras do escudo de qualquer jeito. Entao o texto e nosso, e tudo
   que da pra ajustar mora nestas variaveis: tamanho, cor, fundo e altura na tela. */
.screen #legenda{position:absolute;left:5%;right:5%;bottom:var(--legpos,7%);z-index:1;pointer-events:none;text-align:center;text-wrap:balance}
.screen #legenda b{font:600 var(--legtam,16px)/1.36 Inter,var(--sans);color:var(--legcor,#fff);background:var(--legfundo,rgba(0,0,0,.74));padding:.14em .44em;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.screen #legenda b:empty{display:none}
@media(max-width:900px){.screen #legenda{left:3%;right:3%}.screen #legenda b{font-size:var(--legtam,16px)}}

.screen .cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--screen);color:#f2efe8;cursor:pointer;z-index:2;padding:24px;text-align:center}
/* A tela de pausa tapa o iframe porque o YouTube desenha a marca dele inteira
   quando o video esta pausado: titulo, autor, compartilhar, "more videos" e o
   logo. Desfoque no fundo em vez de chapa opaca, pra o quadro congelado
   continuar ali como presenca e o texto deles ficar ilegivel. */
#pausa{background:rgba(11,11,13,.6);backdrop-filter:blur(26px) saturate(.6);-webkit-backdrop-filter:blur(26px) saturate(.6)}
/* Mesmo veu do pause, sem texto, pros estados em que o YouTube desenha a grade de
   "mais videos": fita acabada, video ainda nao iniciado e video so enfileirado. */
#veu{background:var(--screen);cursor:default}

/* Painel de ajuste da legenda. Cada opcao MOSTRA o que faz em vez de dizer: os
   quatro tamanhos sao quatro As de tamanhos diferentes, as cores sao bolinhas na
   propria cor, e a altura sao setas. Ninguem precisa ler pra entender. */
.ctl{position:relative}
#ccpainel{position:absolute;right:0;bottom:calc(100% + 8px);z-index:6;min-width:208px;
  background:var(--sheet,#141418);border:1px solid var(--line);border-radius:4px;
  padding:10px 12px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
#ccpainel .cclinha{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0}
#ccpainel .cclinha + .cclinha{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
#ccpainel .cclinha > span{font:600 10px Inter,var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
#ccpainel .cclinha > div{display:flex;gap:4px}
#ccpainel button{min-width:26px;height:26px;padding:0 6px;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--ink);font:600 12px Inter,var(--sans);cursor:pointer;line-height:1}
#ccpainel button:hover{border-color:#3a3a42}
#ccpainel button.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:900px){#ccpainel{right:auto;left:0;min-width:0;width:calc(100vw - 40px)}}
#pausa .play{pointer-events:none}
.screen .cover .big{font-family:var(--serif);font-size:56px;font-variant-numeric:tabular-nums}
.screen .cover .play{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border:0;padding:15px 30px;border-radius:3px;font:700 14px Inter,var(--sans);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 26px rgba(0,0,0,.55);transition:transform .12s,background .12s}
.screen .cover .play:hover{background:#fff;transform:translateY(-1px)}
.screen .cover:hover .play{transform:translateY(-1px)}
.screen .cover small{color:var(--mute);max-width:560px;line-height:1.5;font-size:13px}
.bar{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.clock{grid-area:clock;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-variant-numeric:tabular-nums;font-family:var(--serif);font-weight:400;font-size:clamp(52px,8cqi,68px);line-height:1;letter-spacing:-.03em;min-width:0}
.clock small{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--mute);font-family:var(--sans);letter-spacing:.1em;text-transform:uppercase;line-height:16px;margin-top:0;flex:0 1 auto;min-width:0;overflow:hidden}
.clock small .tzc{overflow:hidden;text-overflow:ellipsis}
/* O nome do canal encolhe com reticencias, nunca quebra em duas linhas. Quebrando,
   ele empurrava a linha do relogio pra cima da regua e batia na marca de dia. */
#chname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
/* nowrap: o selo tem duas palavras e, quando a linha do relogio aperta, ele partia
   em AO / VIVO dentro da tarja vermelha. E um selo, nao uma frase. */
.live{display:inline-flex;align-items:center;gap:4px;background:var(--red);color:#fff;font-size:8px;font-weight:700;letter-spacing:.12em;padding:2px 5px;text-transform:uppercase;white-space:nowrap;flex:none}
.live i{width:5px;height:5px;background:#fff;border-radius:50%;display:inline-block;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
/* wrap, nao nowrap: o .ctl mora numa coluna de grid ancorada a direita, entao quando
   ele fica maior que a coluna ele transborda PRA ESQUERDA, por cima do relogio. Foi o
   que aconteceu ao entrar o botao de legenda. Quebrando linha, no pior caso os botoes
   descem, que e feio mas legivel; invadir o relogio nao e nem uma coisa nem outra. */
.ctl{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn.play{background:var(--ink);color:var(--bg);border-color:var(--ink);width:52px;min-width:52px}
.btn.play:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn{background:var(--btn);color:var(--ink);border:1px solid var(--line);height:44px;min-width:48px;padding:0 12px;font-size:14px;cursor:pointer;font-variant-numeric:tabular-nums;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.btn svg{width:19px;height:19px;display:block;flex:none}
.btn.seek b{font:700 12px Inter,var(--sans);letter-spacing:.02em}
.btn:hover{border-color:#6a6a76;background:color-mix(in srgb,var(--btn) 84%,var(--ink) 16%)}
.next{margin-left:auto;display:flex;align-items:center;gap:12px;background:var(--red);color:#fff;border:0;height:44px;padding:0 14px 0 16px;cursor:pointer;text-align:left;max-width:100%}
.next:hover{background:#b92222}
.next small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.next span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.next b{font-size:16px}
.chan{width:100%;text-align:left;background:#111114;color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--line);padding:9px 12px;margin-bottom:6px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px}
.chan .k{font-family:var(--font);font-size:18px;color:var(--mute);width:16px}
.chan .nm{flex:1;line-height:1.15}.chan .nm small{display:block;font-size:11px;color:var(--mute)}
.chan .st{font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chan.onair .st{color:#4cc46a}
.chan.later{opacity:.55}.chan.later .st{color:#d9a642}
.chan.off{opacity:.4}.chan.off .st{color:var(--mute)}
.chan.on{border-left-color:var(--red);background:#17141a;opacity:1}
.chan:hover{border-color:#3a3a42;border-left-color:var(--red)}
.chap{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);cursor:pointer;font-size:13px;line-height:1.3}
.chap:hover{color:#fff}
.chap .t{font-variant-numeric:tabular-nums;color:var(--red);min-width:42px}
.chap.past{color:var(--mute)}
.chap.now{color:var(--ink);font-weight:600}
.about{margin-top:26px;color:var(--mute);font-size:14px;line-height:1.6;max-width:720px}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;line-height:1.55}
footer p{margin:0 0 9px;max-width:58ch;text-wrap:pretty}
footer p:last-child{margin-bottom:0}
footer .poucobr{border-left:2px solid var(--track);padding-left:11px;color:#8a867e}
.loading{color:var(--mute);font-size:13px}
#toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);background:rgba(0,0,0,.85);color:#f2efe8;border:1px solid var(--line);color:var(--ink);padding:8px 14px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap;z-index:3}
#toast.show{opacity:1;transform:translateX(-50%)}
#tuning{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);line-height:1.4;background:rgba(0,0,0,.7);color:var(--mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;opacity:0;transition:.2s;pointer-events:none;z-index:3}
#tuning.show{opacity:1}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .wrap{padding:10px 14px}
  header.top{padding-bottom:6px}.langsw{margin-left:auto}
  /* a assinatura agora e parte da marca, entao fica no celular tambem */

  :root{--logow:34px}
  .hero{padding:14px 0 6px;display:block}
  .hero p{font-size:14px}.hero h1{margin-bottom:10px}.brand{font-size:28px}
  .grid{grid-template-columns:1fr;gap:12px}
  .card .art{aspect-ratio:21/9}.card .art .date{font-size:34px}
  .evhead{padding:8px 0 6px;gap:10px;flex-wrap:wrap}.evhead .tzl{width:100%;font-size:10px}
  .player{display:block;height:auto;min-height:0}
  .stage{position:sticky;top:0;z-index:5;background:var(--bg);padding-bottom:8px;margin:0 -14px;padding-left:14px;padding-right:14px}
  .screen{aspect-ratio:16/9;flex:none;border-left:0;border-right:0;margin:0 -14px}
  .screen .cover .big{font-size:40px}.screen .cover small{font-size:12px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .bar{margin-top:8px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr)}
  .next{min-width:0}.next span{min-width:0}
  .clock{font-size:26px;min-width:0}
  .ctl{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .btn{height:40px;min-width:0;padding:0}
  .next{margin-left:0;width:100%;height:44px;padding:0 14px}.next span{flex:1;max-width:none;font-size:13px}
  .chans{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin:0 -14px;padding-left:14px;padding-right:14px}
  .chans::-webkit-scrollbar{display:none}
  .chan{width:auto;flex:none;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;min-width:132px;margin:0}
  .chan .k{display:none}.chan .nm small{display:none}
  .chan .st{font-size:10px}
  .about{font-size:13px}
  footer{margin-top:28px;font-size:12px}
}

/* hero, capa, história, cast */
.kicker{font-family:Inter,var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 10px;font-weight:700}
.hero h1{font-size:clamp(25px,3.3vw,34px);letter-spacing:-.03em}
.card .art{position:relative;overflow:hidden}
.card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .5s}
.card:hover .art img{transform:scale(1.04)}
.card .art .date{position:relative;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.card .art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.78) 100%)}
.card .art .date{color:#f2efe8}
.card .art .date{z-index:1}
.screen .cover .coverart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;z-index:-1}
.screen .cover{overflow:hidden;isolation:isolate}
.screen .cover .big,.screen .cover small{text-shadow:0 2px 14px rgba(0,0,0,.9)}
.btn.hist{margin-left:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;height:32px}
.btn.cast{display:inline-flex;align-items:center;justify-content:center}
google-cast-launcher{--connected-color:var(--red);--disconnected-color:var(--ink);width:42px;height:38px;padding:8px}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 70%,transparent);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 16px}
.modal .sheet{position:relative;background:var(--sheet);border:1px solid var(--line);max-width:720px;width:100%;padding:28px 28px 22px;line-height:1.6;font-size:15px}
.modal .x{position:absolute;top:10px;right:10px;background:transparent;border:0;color:var(--mute);font-size:18px;cursor:pointer}
.modal h2{font-family:var(--font);font-weight:400;letter-spacing:-.02em;font-size:30px;margin:0 0 14px;line-height:1.1}
.modal h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:22px 0 8px}
.modal figure{margin:0 0 16px}.modal figure img{width:100%;max-height:360px;object-fit:cover;display:block}
.modal figcaption{font-size:11px;color:var(--mute);margin-top:4px}
.modal .tl{list-style:none;padding:0;margin:0}.modal .tl li{padding:5px 0;border-top:1px solid var(--line)}.modal .tl b{color:var(--red);font-weight:600;margin-right:8px;font-variant-numeric:tabular-nums}
.modal .src{font-size:12px;color:var(--mute);margin-top:18px}
@media(max-width:900px){.modal{padding:0}.modal .sheet{border:0;padding:22px 16px;min-height:100vh}.evhead .btn.hist{margin-left:0}.ctl{grid-template-columns:repeat(7,1fr)}.btn.cast[hidden],google-cast-launcher[hidden]{display:none}}

/* ---------- v2: barra única, linha do tempo, tiles ---------- */
.player{display:block;height:auto;min-height:0}
.stage{display:block}
.evwrap{width:min(100%,max(560px,calc((100vh - 360px) * 16 / 9)));margin:0 auto;container-type:inline-size}
.stage{width:100%}
.screen{aspect-ratio:16/9;flex:none;margin:0}
/* 1fr no RELOGIO e auto nos controles, nao o contrario. Os botoes tem tamanho fixo e
   precisam do que precisam; quem tem por onde ceder e o relogio, cuja linha de baixo
   ja sabe cortar com reticencias. Medido: com auto no relogio a coluna dele travava
   em 309px por causa dessa linha, e sobrava menos do que os botoes exigiam. */
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"clock ctl" "tl tl" "info info";column-gap:20px;row-gap:7px;align-items:center;margin-top:12px}
/* stretch, nao end: com justify-self:end o elemento se dimensiona pelo CONTEUDO em vez
   de ocupar a coluna, e ai o wrap quebra linha mesmo sobrando espaco ao lado. Quem
   alinha a direita agora e o justify-content, dentro de uma caixa que ocupa a coluna
   inteira. */
.ctl{grid-area:ctl;justify-self:stretch;align-self:center}

.tl{grid-area:tl;min-width:0;align-self:center}
/* trilho de emissoras: uma faixa por canal, regua de marcos em cima, cursor
   atravessando tudo. Substitui a barra unica em que seis camadas disputavam 54px. */
.quadro{display:flex;gap:14px;align-items:stretch}
.nomes{width:auto;max-width:132px;flex:none;display:flex;flex-direction:column;gap:3px;justify-content:flex-end;padding-bottom:0;position:relative}
.cnome{appearance:none;background:transparent;border:0;padding:0 2px 0 0;height:14px;line-height:14px;
       font:600 10px Inter,var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
       text-align:right;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
       transition:color .12s}
.cnome:hover,.cnome.lupa{color:var(--ink)}
.cnome.on{color:var(--ink)}
.cnome.on span{border-bottom:2px solid var(--red);padding-bottom:1px}
.cnome:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
.linha.dobrada,.cnome.dobrada{display:none}
.maisch{position:absolute;top:100%;right:0;appearance:none;background:transparent;border:0;padding:3px 2px 0 0;
        font:600 9px Inter,var(--sans);letter-spacing:.09em;text-transform:uppercase;
        color:var(--mute);opacity:.72;text-align:right;cursor:pointer;white-space:nowrap}
.maisch:hover{color:var(--ink);opacity:1}
.maisch:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
.linha{cursor:pointer}
.linha:hover i{opacity:.75}
.linha.on:hover i{opacity:1}
.pista{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;cursor:pointer}
.regua{position:relative;flex:none;min-height:44px}
.linha{position:relative;height:14px;border-radius:3px;
       background:color-mix(in srgb,var(--track) 13%,transparent)}
.linha i{position:absolute;top:0;height:14px;border-radius:3px;background:var(--track);opacity:.5;
         transition:background .12s,opacity .12s}
.linha.on i{background:var(--red);opacity:.92}
.linha.lupa i{opacity:.85}
.quiet{position:absolute;bottom:0;height:4px;border-radius:2px;
       background:color-mix(in srgb,var(--track) 34%,transparent);pointer-events:none}
.quiet b{position:absolute;bottom:100%;margin-bottom:3px;left:50%;transform:translateX(-50%);
         white-space:nowrap;font:400 9.5px Inter,var(--sans);color:var(--mute);opacity:.7}
.quiet.narrow b{display:none}
/* Marca de dia na regua, para evento que atravessa mais de um dia. O relogio mostra
   a hora real de cada pedaco, entao na virada ele anda para tras; a marca diz por que. */
.diaq{position:absolute;top:0;white-space:nowrap;padding-left:5px;pointer-events:none;
      font:600 9px Inter,var(--sans);letter-spacing:.06em;text-transform:uppercase;
      color:var(--mute);opacity:.62}
.diaq::before{content:"";position:absolute;left:0;top:1px;width:1px;height:9px;
      background:currentColor;opacity:.5}
.edge{position:absolute;bottom:8px;font:500 10px var(--font);font-variant-numeric:tabular-nums;
      color:var(--mute);opacity:.6;pointer-events:none}
.edge.e{right:0}
.edge.off{visibility:hidden}
.dot{position:absolute;bottom:7px;transform:translateX(-50%);background:transparent;border:0;
     padding:0;cursor:pointer;z-index:2;display:flex;flex-direction:column;align-items:center}
.dot em{font:600 10.5px var(--font);font-variant-numeric:tabular-nums;color:var(--mute);
        white-space:nowrap;transition:color .12s}
.dot u{display:block;width:1px;background:var(--line);text-decoration:none;margin-top:2px}
.dot.alto u{background:color-mix(in srgb,var(--line) 70%,var(--track))}
.dot:hover em,.dot:focus-visible em{color:var(--ink)}
.dot.past em{color:var(--red)}
.dot.past u{background:color-mix(in srgb,var(--red) 45%,transparent)}
.dot.hit em{animation:fato .9s cubic-bezier(.22,.9,.3,1)}
.dot span{position:absolute;bottom:100%;margin-bottom:5px;left:50%;transform:translateX(-50%);
          white-space:nowrap;background:var(--sheet);border:1px solid var(--line);color:var(--ink);
          font-size:12px;padding:4px 8px;opacity:0;pointer-events:none;transition:.15s;z-index:4}
.dot:hover span,.dot:focus span{opacity:1}
.over{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:1}
.veia{position:absolute;top:44px;bottom:0;width:1px;background:var(--line)}
.semnada{position:absolute;top:44px;bottom:0;opacity:.22;
         background:repeating-linear-gradient(-45deg,var(--red) 0 1px,transparent 1px 5px)}
.fill{position:absolute;top:44px;bottom:0;left:0;
      background:color-mix(in srgb,var(--ink) 4%,transparent);border-right:0}
.head{position:absolute;top:36px;bottom:-3px;width:2px;background:var(--ink);
      transform:translateX(-50%);border-radius:1px;z-index:3}
.head:after{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
            width:11px;height:11px;border-radius:50%;background:var(--ink);
            box-shadow:0 0 0 3px var(--bg)}
.dot span{position:absolute;bottom:100%;margin-bottom:4px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--sheet);border:1px solid var(--line);color:var(--ink);font-size:12px;padding:4px 8px;opacity:0;pointer-events:none;transition:.15s}
.dot:hover span,.dot:focus span{opacity:1}
/* o botao "+N no ar" fica em position:absolute com top:100% da coluna de nomes,
   ou seja, inteiramente fora da caixa do trilho. Sem esta folga ele cai por cima
   da linha de info; medido em 2026-09-15, invadia 8px. Mesmo sem o botao a folga
   anterior era de 6px, que ja colava o texto no trilho. */
.tlinfo{grid-area:info;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;color:var(--mute);line-height:18px;margin-top:15px;min-width:0}
#nowlbl{color:var(--ink);min-width:0}
/* mesmo ponto vermelho do marco, pra amarrar o rotulo ao alfinete na linha */
#nowlbl.hasfact:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.tlinfo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextlink{background:transparent;border:1px solid var(--line);color:var(--red);font-size:12px;cursor:pointer;padding:5px 10px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58%;display:inline-flex;align-items:center;gap:6px;flex:0 1 auto}
.nextlink:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.about .hint{font-size:12px;color:#6f6b64}
.btn.hist{margin-left:0}
@media(max-width:900px){
  .evwrap{width:auto}.stage{position:static;width:auto;margin:0;padding:0}
  .screen{margin:0 -14px}
  .bar{grid-template-columns:1fr;grid-template-areas:"clock" "ctl" "tl" "info";row-gap:10px;height:auto}
  .tlinfo{justify-content:space-between;padding:0}
  .clock{gap:10px}
  .ctl{display:flex;flex-wrap:wrap}
  .btn{padding:0 12px}
  .clock{font-size:clamp(34px,11vw,48px)}
  .ctl{justify-self:start}
  .btn{height:46px;min-width:52px}
  .nextlink{max-width:50%}
  .dot span{display:none}.quiet span{display:none}
  /* no telefone a coluna de nomes comia metade da tela e sobrava pouco trilho */
  .nomes{max-width:74px}
  .cnome{font-size:9px;letter-spacing:.04em}
  .quadro{gap:9px}
}

/* caixa estreita no desktop: aperta o grupo de controles pra nao quebrar em duas linhas.
   No celular nao vale, que la o botao precisa continuar grande pro dedo. */
@media(min-width:901px){@container (max-width:660px){.ctl{gap:4px}.btn{min-width:40px;padding:0 8px}.btn.play{width:42px;min-width:42px}.btn svg{width:17px;height:17px}#chname{display:none}}}

/* abertura: geometria exata do brand pack */
#intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;gap:18px}
#intro.go{animation:introout .55s cubic-bezier(.4,0,.2,1) 1.5s forwards}
#intro svg{width:72px;height:72px;overflow:visible}
#intro .box,#intro .eye{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
#intro .box{animation:draw .8s cubic-bezier(.33,.9,.33,1) .1s forwards}
#intro .eye{animation:draw .62s cubic-bezier(.33,.9,.33,1) .52s forwards}
#intro .pupil{fill:var(--red);transform-origin:64px 64px;transform:scale(0);animation:pop .5s cubic-bezier(.34,1.4,.5,1) .96s forwards}
#intro .wm{font-family:Inter,var(--sans);font-weight:200;font-size:44px;letter-spacing:-.01em;color:var(--ink);opacity:0;transform:translateX(-12px);animation:slidein .6s cubic-bezier(.22,.9,.3,1) 1.04s forwards}
#intro .wm b{font-weight:700}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes slidein{to{opacity:1;transform:none}}
@keyframes introout{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){#intro{display:none}}
@media(max-width:900px){#intro svg{width:56px;height:56px}#intro .wm{font-size:34px}}

/* bandeira e lugar no thumbnail */
.card .place{position:absolute;right:11px;bottom:11px;z-index:1;display:inline-flex;align-items:center;gap:6px;background:rgba(11,11,13,.55);border:1px solid rgba(242,239,232,.18);border-radius:2px;padding:3px 7px 3px 5px;backdrop-filter:blur(3px)}
.card .place svg{width:16px;height:11px;display:block;border-radius:1px;box-shadow:0 0 0 .5px rgba(0,0,0,.35)}
.card .place b{font:600 10px Inter,var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,232,.9)}
@media(max-width:900px){.card .place{right:9px;bottom:9px}}

/* compartilhar */
#toptoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--bg);padding:10px 16px;font-size:13px;font-weight:600;border-radius:3px;opacity:0;transition:.2s;pointer-events:none;z-index:120;box-shadow:0 6px 24px rgba(0,0,0,.4)}
#toptoast.show{opacity:1;transform:translateX(-50%)}
.card{position:relative}
.cardshare{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:3px;border:1px solid rgba(242,239,232,.25);background:rgba(11,11,13,.55);color:#f2efe8;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.15s;backdrop-filter:blur(4px)}
.cardshare svg{width:15px;height:15px}
.card:hover .cardshare,.cardshare:focus{opacity:1}
.cardshare:hover{background:var(--red);border-color:var(--red)}
@media(hover:none){.cardshare{opacity:1}}
header.top{position:relative}

/* CTA de compartilhar */
.sharecta{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);padding:7px 13px;cursor:pointer;line-height:1.15;transition:.15s;flex:none;align-self:center}
.sharecta svg{width:15px;height:15px;flex:none;color:var(--red);transition:.15s}
.sharecta b{font-family:Inter,var(--sans);font-weight:700;font-size:12.5px;letter-spacing:-.005em}
.sharecta em{font-style:normal;font-size:11.5px;color:var(--mute);transition:.15s}
.sharecta:hover{background:var(--red);border-color:var(--red);color:#fff}
.sharecta:hover svg{color:#fff}
.sharecta:hover em{color:rgba(255,255,255,.85)}
.cardshare{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;padding:0;border-radius:3px;border:1px solid rgba(242,239,232,.22);background:rgba(11,11,13,.55);color:#f2efe8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.15s;backdrop-filter:blur(3px)}
.cardshare svg{width:15px;height:15px}
.card:hover .cardshare,.cardshare:focus{opacity:1}
@media(hover:none){.cardshare{opacity:.6}}
@media(max-width:900px){
  .sharecta{width:100%;justify-content:center;align-self:stretch;margin-top:4px;padding:11px 12px}
  .sharecta em{display:none}
  .cardshare{opacity:1}
}

/* menu de compartilhar */
.sharemenu{position:fixed;z-index:130;background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:5px;display:flex;flex-direction:column;min-width:190px;box-shadow:0 12px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);transition:.14s}
.sharemenu.show{opacity:1;transform:none}
.sharemenu button{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:var(--ink);font:600 13.5px Inter,var(--sans);padding:9px 11px;border-radius:3px;cursor:pointer;text-align:left;width:100%}
.sharemenu button svg{width:17px;height:17px;flex:none}
.sharemenu button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.sharemenu button.wa:hover{background:#25d366;color:#06281a}
.sharemenu button.wa:hover svg{color:#06281a}
.sharemenu button.tg:hover{background:#2aabee;color:#04283b}
.sharemenu button.tg:hover svg{color:#04283b}
.sharemenu button.sg:hover{background:#3a76f0;color:#fff}
.sharemenu button.ig:hover{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888);color:#fff}
.sharemenu button.mail:hover{background:var(--red);color:#fff}
@media(max-width:900px){.sharemenu{left:8px!important;right:8px;width:auto;min-width:0}}

/* coluna estreita (eventos 4:3 ou janela baixa): cabeçalho das teclas compacto */
@container (max-width:900px){
  .sharecta em{display:none}
}
@container (max-width:720px){
}

/* janela baixa: aperta o cromo pra sobrar altura de vídeo */
@media (max-height:800px) and (min-width:901px){
  .wrap{padding-top:8px}
  header.top{padding-bottom:6px}
  .brand{font-size:26px}.brand .logo{width:32px;height:32px}
  .evhead{padding:10px 0 10px}
  .evhead h1{font-size:clamp(18px,2vw,24px)}
  .bar{margin-top:11px}
  .clock{font-size:clamp(44px,6cqi,54px)}
  .btn{height:38px;min-width:42px}
  .btn.play{width:44px;min-width:44px}
  .bar{row-gap:8px}
}

/* o que cada canal dizia */
.sayhead{display:flex;align-items:baseline;gap:12px;margin-top:22px}
.sayhead span{font-family:Inter,var(--sans);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sayhead small{font-size:12px;color:var(--mute);flex:1}
.says{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:9px}
.say{display:flex;flex-direction:column;gap:7px;text-align:left;background:transparent;border:1px solid var(--line);border-left:3px solid var(--line);padding:11px 13px;cursor:pointer;color:var(--ink);min-height:96px}
.say:hover{border-color:#3a3a42;border-left-color:var(--red)}
.say.on{border-left-color:var(--red);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.say .who{display:flex;align-items:center;gap:8px;font:700 12px Inter,var(--sans);color:var(--mute)}
.say .who img{height:14px;max-width:62px;object-fit:contain}
.say .who img.mono{filter:brightness(0) invert(1)}
:root[data-theme="light"] .say .who img.mono{filter:none}
.say .who time{margin-left:auto;font:400 10.5px Inter,var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.say q{quotes:none;font-family:Inter,var(--sans);font-weight:600;font-size:13.5px;line-height:1.35;letter-spacing:-.005em}
.say .trx{display:block;font-size:12px;color:var(--mute);line-height:1.35;font-style:italic}
.say .trx i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:3px}
.say .none{font-style:italic;color:var(--mute);font-size:12.5px}
@media(max-width:900px){.says{grid-template-columns:1fr 1fr}.say{min-height:0}.sayhead{flex-direction:column;gap:2px}}
@container (max-width:720px){.says{grid-template-columns:1fr 1fr}}


.say .sub{display:block;font-size:12px;line-height:1.3;color:var(--ink);opacity:.8;font-weight:500}
.say .tick{display:block;font-size:11.5px;line-height:1.3;color:var(--mute);border-top:1px solid var(--line);padding-top:5px;margin-top:2px}
.say .tick i{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:2px}
.say .cnote{display:block;font-size:11.5px;color:var(--mute);font-style:italic}

/* ---------- v3: troca de canal em faixa vertical, feito controle remoto ----------
   Os canais saiam embaixo do video numa grade que quebrava em duas ou tres linhas.
   Isso roubava altura justamente do que importa, e era a origem da oscilacao do
   encaixe: a altura dos canais dependia da largura e vice-versa. Na vertical eles
   roubam largura, que sobra, e nunca mais quebram de linha. */
.viewer{display:block}
.viewer .screen{min-width:0;width:auto;flex:none}

/* no celular a faixa volta pra baixo do video: ao lado, o video sobraria estreito */
@media(max-width:900px){
  .viewer{display:block}
  .viewer .screen{align-self:auto}
  .viewer{grid-template-columns:1fr}
}

/* fuso horario encostado no relogio, que e o que ele qualifica */
.tzc{font-family:Inter,var(--sans);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
@media(min-width:901px){@container (max-width:600px){.tzc{letter-spacing:.04em}}}

/* faixa compacta: numa coluna de 186px a dica e o subtexto do botao nao cabem,
   e sem eles os oito canais do 11 de setembro entram sem rolagem */
@media(min-width:901px){
}

/* celular: a faixa esta dentro do viewer, que vem antes da barra no markup.
   display:contents dissolve o viewer pra barra poder ficar entre o video e os
   canais, que e a ordem que faz sentido com o dedo. */
@media(max-width:900px){
  .stage{display:flex;flex-direction:column}
  .viewer{display:contents}
  .stage .screen{order:1}
  .stage .bar{order:2}
  .stage .clocknote{order:3}

  .stage .sayhead{order:5}
  .stage .says{order:6}
  /* com o fuso ao lado, a linha do relogio nao cabe em 375px: desce pra baixo dele.
     So em tela estreita de verdade: entre 700 e 900 essa quebra pegava o nome do
     canal e jogava a segunda linha por cima da regua. */
  .clock{gap:5px}
}

/* ---------- catalogo: ordem cronologica cortada por decada ----------
   Doze eventos numa grade plana nao diziam nem a ordem nem o tamanho da
   colecao. O corte por decada da espinha, e a linha de escala diz o que tem. */
.decade{display:flex;align-items:center;gap:14px;margin:38px 0 0}
.decade:first-of-type{margin-top:22px}
.decade span{font:700 12px Inter,var(--sans);letter-spacing:.14em;color:var(--ink);flex:none}
.decade i{flex:1 1 auto;height:1px;background:var(--line)}
.decade small{flex:none;font:400 11px var(--sans);color:var(--mute);font-variant-numeric:tabular-nums;opacity:.8}
.decade + .grid{margin-top:14px}
.card .meta{margin-top:12px;display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.card .meta .tvin b{font-family:var(--font);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:5px}
@media(max-width:900px){
  .decade{margin-top:28px}
  .decade:first-of-type{margin-top:18px}
  }

/* procedencia do relogio: aviso quando a hora nao foi verificada em duas fontes */
.tzc.weak{color:var(--mute);opacity:.85}
.clocknote{margin:10px 0 0;padding:9px 12px;border-left:2px solid var(--track);background:color-mix(in srgb,var(--ink) 4%,transparent);font-size:12.5px;line-height:1.45;color:var(--mute);max-width:760px}
@media(max-width:900px){.clocknote{font-size:12px;margin-top:12px}}

/* eventos que nao tem transmissao continua, so as reportagens da epoca */
.modenote{margin:10px 0 0;padding:9px 12px;border-left:2px solid var(--red);background:color-mix(in srgb,var(--red) 7%,transparent);font-size:12.5px;line-height:1.45;color:var(--ink);opacity:.92;max-width:760px}
.card .tipo{position:absolute;left:11px;top:11px;z-index:1;display:inline-flex;align-items:center;gap:6px;background:rgba(11,11,13,.58);border:1px solid rgba(242,239,232,.18);border-radius:2px;padding:4px 8px;backdrop-filter:blur(3px)}
.card .tipo b{font:600 10px Inter,var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(242,239,232,.92)}
.card .tipo .vivodot{position:static;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 30%,transparent)}
.card .tipo svg{width:13px;height:6px;display:block;fill:rgba(242,239,232,.72)}
@media(max-width:900px){.card .tipo{left:9px;top:9px;padding:3px 7px}.card .tipo b{font-size:9px}}
@media(max-width:900px){.modenote{font-size:12px;margin-top:12px}}

/* filtros do catalogo: dois seletores discretos numa linha so */
.filtros{margin:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fsel{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.fsel span{font:700 10px Inter,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);opacity:.75}
.fsel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:400 14px var(--sans);padding:3px 20px 3px 2px;cursor:pointer;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%,calc(100% - 5px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.fsel select:hover,.fsel select:focus{border-bottom-color:var(--ink);outline:0}
.fsel select option{background:var(--sheet);color:var(--ink)}
.semnada{margin:34px 0;color:var(--mute);font-size:15px}
.linkish{background:none;border:0;color:var(--red);font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.filtros{margin:14px 0 0;gap:14px}.fsel select{font-size:13.5px}}

/* travessia: o buraco atravessado com o relogio correndo, em vez de teleporte */
.travdur{font:400 12px Inter,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);opacity:.9}
#nosig .big{font-variant-numeric:tabular-nums}

/* sem lista lateral: o status vive na coluna de nomes do trilho */
.cnome.onair{color:var(--ink)}
.cnome.normal{color:var(--mute)}
.cnome.later,.cnome.off{color:var(--mute);opacity:.45}
.cnome.off span{text-decoration:line-through;text-decoration-thickness:1px}
.linha.off i,.linha.later i{opacity:.28}
/* o unico logo que sobrou: o da emissora no ar, ao lado do relogio */
.chlogo{display:inline-flex;align-items:center}
.chlogo img{height:14px;width:auto;display:block;opacity:.92}
.chlogo img.mono{filter:invert(1) brightness(1.6)}
/* compartilhar sai da lateral e vira acao do cabecalho */
.evhead .sharecta{align-self:center;margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--mute);
  padding:6px 11px;cursor:pointer;font:600 11px Inter,var(--sans);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.evhead .sharecta svg{width:14px;height:14px}
.evhead .sharecta em{display:none}
.evhead .sharecta:hover{color:var(--ink);border-color:#4a4a54}
.evhead .sharecta:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:900px){.evhead .sharecta b{display:none}.evhead .sharecta{padding:6px 9px}}
/* Em tela de celular de verdade o fuso nao cabe ao lado do relogio e desce pra
   baixo dele. Acima disso NAO pode quebrar: entre 700 e 900 a quebra pegava o nome
   do canal e jogava a segunda linha por cima da regua. */
@media(max-width:520px){.clock small{flex-wrap:wrap;row-gap:5px}}

/* container do player: a imagem sangra ate a borda e os controles ganham respiro.
   Sem ele o video, o relogio e o trilho boiavam soltos no fundo e nada dizia onde
   o player comecava ou terminava. */
.painel{background:color-mix(in srgb,var(--ink) 3.5%,var(--bg));border:1px solid var(--line);
        border-radius:4px;overflow:hidden}
.painel .screen{border-left:0;border-right:0;border-top:0}
.painel .bar{padding:0 16px 12px;margin-top:9px}
.painel .modenote,.painel .clocknote,.painel .sayhead{margin-left:16px;margin-right:16px}
/* o voltar sai da linha do titulo: eles competiam por serem vizinhos */
.back{display:inline-block;font:600 11px Inter,var(--sans);letter-spacing:.1em;text-transform:uppercase;
      color:var(--mute);text-decoration:none;padding:4px 0;margin-bottom:2px}
.back:hover{color:var(--ink)}
.evhead{padding-top:2px}
@media(max-width:900px){
  .painel{border-radius:0;border-left:0;border-right:0;margin:0 -14px}
  .painel .bar{padding:0 14px 14px}
  .painel .modenote,.painel .clocknote,.painel .sayhead{margin-left:14px;margin-right:14px}
}

/* Painel estreito (video 4:3 ou tela baixa): o relogio e os controles nao cabem
   lado a lado e os controles montavam em cima da hora. Empilha e encolhe. */
@container (max-width:760px){
  .bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"clock" "ctl" "tl" "info";row-gap:8px}
  .ctl{justify-self:start;align-self:start}
  .clock{font-size:clamp(32px,9cqi,46px)}
  .clock small{font-size:9px;gap:6px}
}
@container (max-width:520px){
  .ctl{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width:100%}
  .btn{min-width:0;padding:0 6px}
  .btn.play{width:auto;min-width:0}
}

/* Trocar de emissora: texto a esquerda, espaco fixo do logo a direita. O espaco
   tem tamanho unico, dimensionado pelo logo mais largo que ainda le, entao o botao
   nao muda de largura a cada troca de canal. */
.btn.trocar{width:132px;min-width:132px;max-width:132px;padding:0 9px 0 10px;gap:8px;
            background:var(--btn);border-color:#3a3a44;flex:0 0 auto;
            flex-direction:row;justify-content:space-between}
.btn.trocar .rot{flex:1 1 auto;font:700 7.5px Inter,var(--sans);letter-spacing:.09em;
                 text-transform:uppercase;color:var(--mute);text-align:left;line-height:1.2}
.btn.trocar .alvo{flex:0 0 58px;width:58px;height:15px;display:flex;align-items:center;
                  justify-content:center;overflow:hidden}
.btn.trocar .alvo img{max-width:100%;max-height:100%;width:auto;height:auto;
                      object-fit:contain;display:block}
.btn.trocar .alvo img.mono{filter:invert(1) brightness(1.7)}
.btn.trocar .alvo b{font:700 10.5px Inter,var(--sans);letter-spacing:-.01em;color:var(--ink);
                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58px}
.btn.trocar:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 14%,var(--btn))}
.btn.trocar:hover .rot{color:var(--ink)}
.btn.trocar.vazio{opacity:.4;pointer-events:none}
.btn.trocar.vazio .alvo{color:var(--mute)}

/* sinal antes do numero: le como o que faz, sem interpretar seta */
.btn.seek b{font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* botao com rotulo ao lado do icone, no mesmo desenho do mudar de canal */
.btn.rotulado{gap:7px;padding:0 11px}
.btn.rotulado .rot{font:700 7.5px Inter,var(--sans);letter-spacing:.09em;text-transform:uppercase;
                   color:var(--mute);white-space:nowrap}
.btn.rotulado:hover .rot{color:var(--ink)}
/* O limiar era 560px e nunca disparava no desktop, porque o container e o .evwrap e
   ele fica bem acima disso. Resultado: com o botao de legenda a mais, o trilho
   precisava de ~548px numa coluna de ~531 e transbordava por cima do relogio.
   Escondendo o rotulo do compartilhar a partir de 1100px de palco, o trilho volta a
   caber numa linha; o icone sozinho continua dizendo o que faz. */
@container (max-width:1100px){
  .btn.rotulado .rot{display:none}.btn.rotulado{padding:0 10px}
  /* Medido num palco de 770px: o relogio sozinho comia 309 e sobravam 409 pra um
     trilho que precisa de 466. Nao adianta so deixar quebrar linha, tem que caber.
     O relogio cede um pouco de corpo e o botao de canal encolhe: a conta passa a
     fechar com folga, e os dois continuam legiveis. */
  .clock{font-size:clamp(42px,7cqi,68px)}
  .btn.trocar{width:108px;min-width:108px;max-width:108px}
  .btn.trocar .alvo{flex-basis:44px;width:44px}
  .bar{column-gap:14px}
}


/* ===================== home: destaques da semana ===================== */
/* Laminas flutuando. Quem esta na frente aparece de frente e em tamanho real; os
   vizinhos andam pro lado, recuam no fundo e giram. Nada do cilindro e desenhado.
   As laminas tambem nao sao tangentes a nenhum circulo: posicao, recuo e rotacao
   sao independentes, e o transform de cada uma vem pronto do JS. --larg e o unico
   valor que o CSS precisa, porque translateZ nao aceita porcentagem.
   A face e uma superficie de foto: como o .card .art, ela e escura nos dois temas
   e o texto em cima e sempre claro. Por isso as cores aqui sao literais e nao
   tokens: token de tema inverteria o texto em cima de uma foto que nao inverte. */
.carr{margin:22px 0 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* o cabecalho volta pro alinhamento do resto da pagina */
.carrhd{display:flex;align-items:center;gap:14px;margin:0 auto 14px;max-width:1180px;padding:0 20px}
.carrhd span{font:700 12px Inter,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);flex:none}
.carrhd i{flex:1 1 auto;height:1px;background:var(--line)}
.carrhd small{font:400 12px var(--sans);color:var(--mute);flex:none}

/* sem overflow:hidden. Ele existia pra conter os vizinhos, mas agora eles cabem
   inteiros por construcao, e o que ele cortava era a sombra projetada da lamina,
   que desce 78px enquanto a folga ate a borda da caixa e de 68. Lamina flutuando
   com a sombra decepada nao flutua. As posicoes escondidas ficam em opacity 0 e
   longe do centro, e o overflow-x:clip do documento segura qualquer sobra. */
/* o teto de altura desconta o que o cabecalho e o hero precisam, entao o hero
   aparece inteiro em vez de ser empurrado pra fora da tela pelo carrossel */
/* width:100% nao e redundante. Com a largura indefinida, o max-height bate no
   aspect-ratio e o navegador encolhe a LARGURA junto pra manter a razao: em
   1024x768 o palco virava 996 (= 2 x 498, a altura limitada), sobrava 28px e,
   num bloco, essa sobra vai toda pra direita. O carrossel encostava na esquerda.
   Com a largura definida, a razao so manda na altura e o max-height so corta. */
.carrpalco{position:relative;width:100%;aspect-ratio:2/1;min-height:340px;max-height:calc(100vh - 270px);
  perspective:var(--persp,800px);perspective-origin:50% 48%;--larg:70%;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.carrpalco.arrastando{cursor:grabbing}
/* durante o arraste o slab tem que colar no ponteiro: a transicao de transform sai,
   e so a de opacidade fica, curta, pra quem entra pela borda nao piscar */
.carrpalco.arrastando .carrslab{transition:opacity .25s ease}
/* o drum so empurra o conjunto pra tras, pra que a posicao da frente caia exatamente
   no plano da perspectiva e apareca em tamanho real; quem gira sao os slabs */
.carrdrum{position:absolute;inset:0;transform-style:preserve-3d}

/* o slab: moldura fina de aparelho, tela dentro, e sombra projetada pra ter peso */
.carrslab{position:absolute;left:50%;top:50%;width:var(--larg);height:calc(var(--larg) * 9 / 16);
  margin-left:calc(var(--larg) / -2);margin-top:calc(var(--larg) * -9 / 32);
  backface-visibility:hidden;display:block;text-decoration:none;color:#f2efe8;
  opacity:0;pointer-events:none;will-change:transform;
  padding:7px;border-radius:11px;
  background:linear-gradient(158deg,#3a3a43 0%,#1c1c21 26%,#0d0d10 64%,#26262d 100%);
  /* A luz da cena vem de cima e da direita, que e de onde sai o brilho quente na
     face. Entao a sombra cai pra baixo E pra esquerda, e o deslocamento lateral
     cresce junto com o borrao: quanto mais longe da superficie, mais ela escorre
     e mais macia fica. Quatro camadas em vez de duas, cada uma com mais ou menos o
     dobro do borrao e metade da forca da anterior, que e como a penumbra de uma
     fonte de area se comporta. */
  box-shadow:0 0 0 1px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07) inset,
             0 2px 5px -2px rgba(0,0,0,.6);
  transition:transform 1.05s cubic-bezier(.24,.85,.26,1),opacity .8s ease}
/* slab escondido nao precisa animar: corta 40% do trabalho de cada virada */
.carrslab:not(.perto){transition:opacity .8s ease}
/* so os tres do meio existem na tela: o que da a volta troca de lado escondido */
.carrslab.perto{opacity:1;pointer-events:auto}
/* Sombra de levitacao: ela NAO encosta na lamina. Fica num chao imaginario abaixo,
   separada por um vao, que e o que diz ao olho que o objeto esta no ar. Por estar
   no chao e ser vista em perspectiva, a forma e uma elipse achatada, nao o
   retangulo do objeto. Pequena e discreta: quanto mais alto o objeto flutua, menor
   e mais fraca a sombra dele. Deslocada um pouco pra esquerda, na direcao oposta a
   luz, que vem de cima e da direita. */
.carrpiso{position:absolute;left:-13%;right:-5%;top:calc(100% + 6%);height:6.5%;display:block;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 52%,transparent 100%);
  filter:blur(9px);opacity:.45;
  transition:opacity .9s cubic-bezier(.24,.85,.26,1)}
.carrslab:not(.on) .carrpiso{opacity:.24}

.carrface{position:relative;display:block;width:100%;height:100%;border-radius:5px;
  overflow:hidden;isolation:isolate;container-type:inline-size}

/* a foto entra fora de foco e assenta, depois deriva devagar o tempo todo do slide */
.carrcam{position:absolute;inset:-4%;display:block}
.carrcam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.09) saturate(1.06);
  transform:scale(1.03);transform-origin:62% 44%}
.carrslab.on .carrcam img{animation:carrderiva 13s linear forwards}
@keyframes carrderiva{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}

.carrluz{position:absolute;inset:0;display:block;pointer-events:none}
/* Os tres veus num elemento so. Cada camada semitransparente empilhada e uma
   composicao nova, e cada composicao arredonda pra 8 bits: tres arredondamentos
   sobre quase-preto viram degrau visivel. Como background aceita varias camadas,
   as tres resolvem numa passada. A vinheta deixa de ser box-shadow e vira radial
   pra poder entrar na mesma lista. */
.carrluz.leitura{background:
  linear-gradient(96deg,rgba(9,9,11,.94) 0%,rgba(9,9,11,.8) 13%,rgba(9,9,11,.4) 46%,rgba(9,9,11,.02) 74%),
  linear-gradient(0deg,rgba(9,9,11,.72) 0%,transparent 38%),
  radial-gradient(118% 128% at 50% 46%,transparent 52%,rgba(0,0,0,.3) 78%,rgba(0,0,0,.55) 100%)}
/* a luz cai no slab da frente; os de tras ficam na sombra do proprio tambor */
.carrsombra{position:absolute;inset:0;display:block;pointer-events:none;opacity:.34;
  background:linear-gradient(190deg,rgba(6,6,8,.62),rgba(6,6,8,.9));
  transition:opacity 1s cubic-bezier(.24,.85,.26,1)}
.carrslab.on .carrsombra{opacity:0}

.carrtxt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:2.2cqw;padding:0 clamp(18px,5.4cqw,54px);max-width:78%}
.carrtxt>*{opacity:0;transform:translate3d(0,26px,0);filter:blur(5px)}
.carrslab.on .carrtxt>*{opacity:1;transform:none;filter:none;
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .85s cubic-bezier(.16,1,.3,1)}
.carrslab.on .carrtxt>:nth-child(1){transition-delay:.28s}
.carrslab.on .carrtxt>:nth-child(2){transition-delay:.35s}
.carrslab.on .carrtxt>:nth-child(3){transition-delay:.42s}
.carrslab.on .carrtxt>:nth-child(4){transition-delay:.5s}
.carrslab.on .carrtxt>:nth-child(5){transition-delay:.58s}
.carrslab.on .carrtxt>:nth-child(6){transition-delay:.68s}
.carrselo{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#e2413f,#c31f1f);color:#fff;
  font:700 clamp(8px,1.15cqw,9.5px) Inter,var(--sans);letter-spacing:.15em;text-transform:uppercase;
  padding:.75cqw 1.25cqw;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 24px -12px rgba(214,43,43,.95)}
.carrselo i{width:6px;height:6px;border-radius:50%;background:#fff;display:block;flex:none;animation:carrpulso 2.4s ease-out infinite}
@keyframes carrpulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.carrdata{font:700 clamp(9px,1.3cqw,11px) Inter,var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#b6b1a8;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}
.carrrel{display:flex;align-items:baseline;gap:1.7cqw;flex-wrap:wrap;font-family:var(--serif);
  font-size:clamp(34px,8.2cqw,66px);line-height:.92;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  text-shadow:0 2px 2px rgba(0,0,0,.55),0 18px 46px rgba(0,0,0,.9),0 0 34px rgba(255,236,206,.14)}
.carrrel small{font:400 clamp(10.5px,1.5cqw,13px) var(--sans);line-height:1.35;color:#a8a49b;letter-spacing:0;
  text-shadow:0 1px 8px rgba(0,0,0,.9)}
.carrrel small b{display:block;font-weight:400}
.carrtit{font-family:var(--serif);font-size:clamp(18px,3.5cqw,29px);line-height:1.2;max-width:21ch;
  text-shadow:0 2px 20px rgba(0,0,0,.85)}
.carrdiz{color:#b3afa6;font-size:clamp(12px,1.75cqw,14px);line-height:1.6;max-width:44ch;
  text-shadow:0 1px 12px rgba(0,0,0,.95);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carrcta{margin-top:.6cqw;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#fffefb,#ddd8cd);color:#131316;
  padding:clamp(9px,1.5cqw,13px) clamp(16px,2.8cqw,24px);border-radius:3px;
  font:700 clamp(10px,1.5cqw,12px) Inter,var(--sans);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(0,0,0,.16) inset,
             0 2px 4px rgba(0,0,0,.45),0 18px 40px -16px rgba(0,0,0,.95);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.carrcta svg{width:1.9cqw;height:1.9cqw;min-width:12px;min-height:12px;display:block}
.carrslab.on:hover .carrcta{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(0,0,0,.16) inset,
             0 4px 8px rgba(0,0,0,.45),0 26px 54px -18px rgba(0,0,0,1)}

/* ---- acabamento da moldura ---- */
/* Nada de camada clara cobrindo a tela inteira. Brilho de vidro aqui e so uma
   aresta: uma linha acesa na borda de cima do visor, por dentro da moldura. Um
   gradiente branco sobre a face inteira, por mais fraco que seja, levanta o preto
   da foto e e o que deixava a arte leitosa. */
.carrface{box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.6),
          inset 0 0 0 1px rgba(255,255,255,.06)}
.carrslab{background-image:linear-gradient(158deg,#3f3f49 0%,#1c1c21 26%,#0d0d10 64%,#2a2a31 100%),
                          linear-gradient(180deg,rgba(255,255,255,.1) 0 1px,transparent 1px)}
.carrslab.on{box-shadow:0 0 0 1px rgba(255,255,255,.14),
             0 1px 0 rgba(255,255,255,.2) inset,-1px 0 0 rgba(255,255,255,.08) inset,
             0 3px 8px -2px rgba(0,0,0,.72)}

/* A sombra deixa de ser efeito de borda e vira OBJETO na cena. box-shadow e sempre
   uma copia borrada do retangulo do elemento: por mais camadas que se empilhe, ele
   nao sabe que a lamina esta girada 24 graus e recuada, e a sombra de um objeto
   inclinado deveria ser trapezoidal. Como este borrao e filho do slab e vem ANTES
   da face, ele pinta atras dela e herda o mesmo rotateY e a mesma perspectiva:
   deforma sozinho quando a lamina vira. Deslocado pra baixo e pra esquerda, que e
   pra onde cai com a luz vindo de cima e da direita. */

/* Lampejo no vidro: acende so na virada, nunca parado. Um veu branco permanente
   levanta o preto da foto, que foi o que lavou a arte antes. Anima so transform e
   opacity, entao nao repinta nada. */
.carrvidro{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;opacity:0;border-radius:inherit}
/* Nucleo branco puro com queda tipo gaussiana em vez de rampa reta: e o que faz o
   brilho parecer luz e nao uma faixa cinza. Duas faixas, uma fina e forte e outra
   larga e fraca atras, que e como vidro devolve luz nas duas superficies. */
.carrvidro:before,.carrvidro:after{content:"";position:absolute;top:-36%;bottom:-36%;display:block;
  transform:translateX(0) rotate(9deg)}
.carrvidro:before{left:-64%;width:36%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.01) 20%,rgba(255,255,255,.035) 33%,
    rgba(255,255,255,.09) 42%,rgba(255,255,255,.17) 47%,rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.17) 53%,rgba(255,255,255,.09) 58%,rgba(255,255,255,.035) 67%,
    rgba(255,255,255,.01) 80%,transparent 100%)}
.carrvidro:after{display:none}
@keyframes carrlampejo{0%{opacity:0}18%{opacity:.5}70%{opacity:.5}100%{opacity:0}}
@keyframes carrvarre{from{transform:translateX(0) rotate(9deg)}to{transform:translateX(420%) rotate(9deg)}}
@keyframes carrvarre2{from{transform:translateX(0) rotate(9deg)}to{transform:translateX(300%) rotate(9deg)}}
.carrslab.girando .carrvidro{animation:carrlampejo 1.05s ease}
.carrslab.girando .carrvidro:before{animation:carrvarre 1.05s cubic-bezier(.32,.7,.36,1)}
.carrslab.girando .carrvidro:after{animation:carrvarre2 1.05s cubic-bezier(.32,.7,.36,1)}

/* O botao pulsa tres vezes no fim do ciclo, logo antes da lamina virar. Usa a
   mesma duracao do carrossel, entao as batidas caem sempre no mesmo lugar, e para
   quando o carrossel para. */
@keyframes carrchama{
  0%,60%{transform:none;filter:none}
  64%{transform:scale(1.05);filter:brightness(1.12)}
  68%{transform:none;filter:none}
  73%{transform:scale(1.05);filter:brightness(1.12)}
  77%{transform:none;filter:none}
  82%{transform:scale(1.05);filter:brightness(1.12)}
  86%,100%{transform:none;filter:none}
}
.carrslab.on .carrcta{animation:carrchama var(--carrdur,6400ms) ease-in-out}
.carrpalco[data-pausado="1"] .carrcta,.carrpalco.arrastando .carrcta{animation-play-state:paused}

.carrnav{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;justify-content:center;gap:9px}
.carrnav button{width:38px;height:3px;border:0;padding:0;cursor:pointer;border-radius:3px;position:relative;
  background:rgba(242,239,232,.2);overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.6)}
.carrnav button:after{content:"";position:absolute;inset:0;width:0;background:#f2efe8;border-radius:3px;
  box-shadow:0 0 12px rgba(242,239,232,.55)}
.carrnav button.on:after{width:100%;transition:width var(--carrdur,6400ms) linear}
.carrnav button.on.parado:after,.carrpalco[data-pausado="1"] .carrnav button.on:after{transition:none}

/* ===================== cabecalho do grid ===================== */
.secbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:46px 0 0}
.secbar>span{font:700 12px Inter,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);flex:none}
.secbar>small{font:400 12px var(--sans);color:var(--mute);flex:none}
.secbar .filtros{margin:0 0 0 auto}

/* ===================== guia de programacao ===================== */
.gp{margin:64px 0 0;border-top:1px solid var(--line);padding-top:30px}
.gphd h2{margin:0;font-family:Inter,var(--sans);font-weight:700;letter-spacing:-.03em;font-size:clamp(21px,2.4vw,27px)}
.gphd p{margin:9px 0 0;color:var(--mute);font-size:14px;line-height:1.6;max-width:68ch}
.gpfaixa{display:flex;align-items:center;gap:14px;margin:30px 0 4px}
.gpfaixa span{font:700 11px Inter,var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);flex:none}
.gpfaixa i{flex:1 1 auto;height:1px;background:var(--line)}
.gpfaixa small{font:400 11.5px var(--sans);color:var(--mute);flex:none}
.gplinha{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:12px 10px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .14s}
.gplinha:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.gphora{font-family:var(--serif);font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.gphora small{display:block;font:700 8.5px Inter,var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin-top:4px}
.gpmeio{min-width:0}
.gpmeio b{display:block;font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.25}
.gpmeio i{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-style:normal;color:var(--mute);font-size:12.5px;line-height:1.45;margin-top:3px}
.gpdir{display:flex;align-items:center;gap:12px;flex:none}
.gpch{font:700 9.5px Inter,var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.gptp{display:inline-flex;align-items:center;gap:5px;font:700 8px Inter,var(--sans);letter-spacing:.11em;
  text-transform:uppercase;padding:4px 7px;border-radius:2px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.gptp.viv{color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.gptp i{width:5px;height:5px;border-radius:50%;background:var(--red);display:block;flex:none}
.gpnota{margin:12px 10px 0;color:var(--mute);font-size:12.5px;line-height:1.6;max-width:68ch}

@media(max-width:900px){
  .carr{margin-top:26px}
  .carrhd small{display:none}   /* nao cabe ao lado do titulo em 375px e vaza pra fora da tela */
  /* Num celular nao ha largura pra ver os vizinhos do tambor: em vez de girar um
     3D que ninguem enxerga, o slab ocupa a tela inteira e a troca vira dissolve.
     16:9 cortado em retrato perde metade da largura, entao 4:5 e o object-position
     puxam o enquadramento pro terco onde o assunto costuma estar. */
  /* Carrossel plano: em 375px nao ha largura pra tambor. Mas a lamina continua
     sendo um APARELHO, com moldura, cantos e sombra, flutuando sobre o fundo da
     pagina com folga nas laterais. Sangrando de borda a borda e sem moldura ela
     virava so uma foto escura, e o objeto sumia. As barrinhas saem de cima da
     imagem e vao pro rodape reservado embaixo dela. */
  .carrpalco{aspect-ratio:11/12;min-height:0;perspective:none!important;overflow:hidden;cursor:auto}
  /* folga de 44px de cada lado: alem de deixar o tablet menor, ela soma exatamente
     o vao entre duas laminas, entao o passo do arraste fecha numa largura de palco */
  .carrslab{left:44px;right:44px;top:0;bottom:30px;width:auto;height:auto;margin:0;
    padding:4px;border-radius:11px;backface-visibility:visible;opacity:0;
    background:linear-gradient(158deg,#3a3a43 0%,#1c1c21 26%,#0d0d10 64%,#26262d 100%);
    box-shadow:0 0 0 1px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1) inset,
               0 2px 5px -2px rgba(0,0,0,.6);
    transition:transform .45s cubic-bezier(.24,.85,.26,1),opacity .3s ease}
  .carrslab.on,.carrslab.perto{opacity:1}
  .carrslab:not(.perto){opacity:0;pointer-events:none}
  .carrsombra{display:none}
  .carrpiso{left:-9%;right:-1%;top:calc(100% + 3%);height:4.5%;filter:blur(6px);opacity:.38}
  .carrface{border-radius:9px}
  /* a arte estava afogada: menos veu em cima, mais foto. O brilho quente foi
     desenhado pra um quadro deitado; num corte em retrato ele cobre metade do
     tablet e vira nevoa marrom, entao aqui ele so encosta no alto. */
  .carrcam img{filter:contrast(1.09) saturate(1.06)}   /* enquadramento vem do art_focus */
  .carrluz.leitura{background:linear-gradient(0deg,rgba(9,9,11,.96) 4%,rgba(9,9,11,.74) 22%,rgba(9,9,11,.2) 64%,transparent 100%),
    radial-gradient(122% 116% at 50% 44%,transparent 54%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.45) 100%)}
  .carrtxt{justify-content:flex-end;padding:0 15px 17px;max-width:100%;gap:7px}
  .carrrel{font-size:clamp(28px,10.5vw,42px)}
  .carrdiz{-webkit-line-clamp:2}
  .carrnav{bottom:8px}
  .carrdiz{-webkit-line-clamp:3}
  .secbar{margin-top:34px}
  .secbar .filtros{margin:12px 0 0;width:100%}
  .gp{margin-top:46px}
  .gplinha{grid-template-columns:72px minmax(0,1fr);row-gap:8px;padding:12px 2px}
  .gpdir{grid-column:2;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .carrdrum,.carrslab,.carrcam,.carrtxt>*,.carrcta,.carrsombra{transition:none!important;animation:none!important}
  .carrslab.on .carrcam img{animation:none}
  .carrslab.on .carrcta{animation:none}
  .carrvidro,.carrvidro:before,.carrvidro:after{animation:none!important;opacity:0}
  .carrtxt>*{opacity:1;transform:none;filter:none}
  .carrcam{transform:none;filter:none}
  .carrselo i{animation:none}
  .carrnav button.on:after{width:100%;transition:none}
}