/* Canais de WhatsApp ao vivo (14/10): dentro do .canal-card do bloco "Acompanhe ao vivo".
   Abas + seta no topo, um slide por canal (botão de entrar, frase, celular com o feed). Arquivo separado do nova.css. */
.canal-card.canais{gap:12px;min-width:0;padding:0;background:none;border:0;box-shadow:none;overflow-x:clip;overflow-clip-margin:8px} /* sem moldura: o celular é a peça; o slide de fora não empurra a página */
.canal-acao{display:flex;align-items:center;gap:8px;min-width:0}
.canal-acao .canal-btn{flex:1 1 auto;min-width:0}
.canais-seta{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid var(--tinta);border-radius:50%;background:var(--amarelo);color:var(--tinta);cursor:pointer;transition:rotate .25s var(--sai,ease)}
.canais-seta svg{width:20px;height:20px}
.canais-seta.volta{rotate:180deg}
.canais-seta:focus-visible,.cel-feed:focus-visible,.cel-links a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

.canais-trilho{min-width:0}
.canal-slide[hidden]{display:none}
.canal-slide{display:grid;gap:10px;align-content:start;min-width:0}
.canal-slide .canal-btn{justify-self:stretch;justify-content:center;text-align:center;font-size:15px;line-height:1.05;padding-block:8px}
.cel-info{align-self:center;max-width:94%;margin:auto 0 4px;padding:8px 12px;border-radius:8px;background:#182229;color:#d1d7db;font:500 12.5px/1.4 var(--texto);text-align:center}

/* Celular: moldura preta, tela com topo, feed rolável e rodapé. Altura cabe na tela em qualquer tamanho. */
.celular{container-type:inline-size;display:grid;grid-template-rows:auto minmax(0,1fr) auto;aspect-ratio:9/19.5;width:min(100%,390px);height:auto;padding:10px;border-radius:44px;background:#111;box-shadow:0 0 0 2px #2b2b2b,0 6px 0 var(--tinta);overflow:hidden;justify-self:center} /* proporção de aparelho de verdade */
.cel-topo{display:flex;align-items:center;gap:10px;padding:26px 14px 10px;border-radius:34px 34px 0 0;position:relative;background:#202c33;border-bottom:1px solid #2a3942}
.cel-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--vermelho);color:#fff;font:900 16px/1 var(--tit)}
.cel-topo img.cel-avatar{width:34px;height:34px;max-width:none;object-fit:cover;background:#202c33} /* foto do canal; a letra fica só como reserva */
.celular>*,.cel-topo>*{min-width:0}
.cel-nome{overflow-wrap:anywhere;display:grid;font:700 clamp(12px,4.2cqi,15px)/1.15 var(--texto);color:#e9edef;min-width:0}
.cel-nome small{font:500 12px/1.2 var(--texto);color:#8696a0}
.cel-feed{display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 8px 12px;list-style:none;overflow-y:auto;background:#0b141a;scrollbar-width:thin;scrollbar-color:#374248 transparent;min-height:0} /* modo escuro, igual aos prints; a margem automática da descrição encosta as mensagens embaixo, como no WhatsApp */
.cel-post{display:grid;gap:6px;justify-items:stretch}
.cel-post .cel-links{justify-self:start}
.cel-post img{display:block;width:100%;height:auto;border-radius:8px;background:#111b21}
.cel-post time{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* a hora já aparece no print */
.cel-links{display:flex;flex-wrap:wrap;gap:6px}
.cel-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:#005c4b;border:1.5px solid #00a884;color:#e9edef;font:700 13px/1 var(--texto);text-decoration:none}
@media (hover:hover){.cel-links a:hover{background:#00a884;color:#111b21}}
.cel-dia{align-self:center;padding:2px 0}
.cel-dia span{display:inline-block;padding:5px 10px;border-radius:8px;background:#182229;color:#8696a0;font:600 12px/1 var(--texto)}
.cel-aviso{margin:auto 6px;padding:12px;border-radius:8px;background:#182229;color:#d1d7db;font:500 13px/1.35 var(--texto);text-align:center}
.cel-rodape{margin:0;padding:8px 14px 14px;border-radius:0 0 34px 34px;background:#202c33;color:#8696a0;font:500 11px/1.2 var(--texto);text-align:center}

.cel-fechado{align-self:center;display:grid;gap:4px;max-width:92%;margin:6px 0;padding:10px 12px;border-radius:8px;background:#182229;color:#ffd279;font:500 13px/1.35 var(--texto);text-align:center}
.cel-fechado strong{font-weight:700}
.cel-fechado span{color:#8696a0;font-size:12px}
.cel-fechado:only-child{margin:auto}

.cel-topo{text-decoration:none;color:inherit}
.cel-topo:focus-visible{outline:3px solid var(--azul);outline-offset:-3px}
@media (hover:hover){.cel-topo:hover .cel-nome{text-decoration:underline}}
.cel-topo::before{content:'';position:absolute;top:8px;left:50%;width:84px;height:20px;margin-left:-42px;border-radius:999px;background:#111} /* ilha da câmera */

@media (prefers-reduced-motion:reduce){.canais-seta{transition:none}}

/* Telas baixas (notebook de 600 a 640 px de altura): botão e respiros menores para o bloco caber. */
@media (min-width:700px) and (max-height:640px){
  .canal-card.canais{gap:8px}
  .canal-acao .canal-btn{min-height:40px;padding-block:4px;font-size:13px}
  .canais-seta{width:40px;height:40px}
}

/* Carimbo do canal fechado (14/10), no visual do carimbo Falso da /ia-falsa: vermelho, borda dupla, inclinado sobre a tela.
   Medido pela largura do celular (cqw), legível de 246 a 390 px. Não bloqueia o toque no feed. */
.celular{position:relative}
.cel-carimbo{position:absolute;z-index:2;left:50%;top:46%;translate:-50% -50%;rotate:-12deg;display:grid;justify-items:center;gap:.25em;margin:0;padding:.35em .45em .4em;border:max(3px,1.6cqw) double #ff4d4d;border-radius:.2em;background:rgba(11,20,26,.78);color:#ff4d4d;text-align:center;white-space:nowrap;pointer-events:none;box-shadow:0 0 0 1px rgba(255,77,77,.25)}
.cel-carimbo strong{font:900 10.5cqw/1 var(--tit);letter-spacing:.03em}
.cel-carimbo span{font:800 5cqw/1.1 var(--tit)}

/* Pedido do Thiago (14/10): sem a frase acima do celular, botão de entrar embaixo dele e o topo do celular na altura
   das abas do Instagram ao lado. Sobrepõe a grade do #ao-vivo do nova.css (este arquivo carrega depois). */
@media (min-width:700px) and (min-height:521px) and (orientation:landscape){
  [data-pagina=nova] #ao-vivo .canal-card{grid-area:2/1/6/2;align-self:start}
}
