/* A12 Programação — desenho mínimo; cores vêm dos tokens do kit quando existem. */
.a12-programacao { --ap-fio: var(--e-global-color-a12fio, #d5d5d5); --ap-fundo: var(--e-global-color-a12creme, #fff9ec); --ap-marca: var(--e-global-color-a12marca, #0b4f8c); --ap-texto: var(--e-global-color-text, #1a1a1a); --ap-tonal: var(--e-global-color-a12tonal, #6b6b6b); color: var(--ap-texto); }
.a12-programacao__titulo { margin: 0 0 .5rem; font-size: 1.25rem; }
.a12-programacao__subtitulo { margin: 1rem 0 .25rem; font-size: 1rem; }
.a12-programacao__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.a12-programacao__nav a { white-space: nowrap; text-decoration: none; }
.a12-programacao__lista { list-style: none; margin: 0; padding: 0; }
.a12-programacao__item { display: grid; grid-template-columns: 3.5rem 3rem 1fr; gap: .75rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--ap-fio); }
.a12-programacao__item--passou .a12-programacao__nome, .a12-programacao__item--passou .a12-programacao__hora, .a12-programacao__item--passou .a12-programacao__episodio { color: var(--ap-tonal); }
.a12-programacao__item--passou .a12-programacao__miniatura { filter: grayscale(1); opacity: .7; }
.a12-programacao__item--no-ar { background: var(--ap-fundo); padding-inline: .5rem; margin-inline: -.5rem; }
.a12-programacao__hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.a12-programacao__miniatura, .a12-programacao__imagem { border-radius: 8px; object-fit: cover; display: block; }
.a12-programacao__nome a { text-decoration: none; }
.a12-programacao__episodio { color: var(--ap-tonal); }
.a12-programacao__badge { display: inline-flex; align-items: center; height: 22px; padding: 0 .6rem; border-radius: 4px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--a12-fundo-suave, #e3eef7); color: var(--a12-on-fundo-suave, #111); vertical-align: middle; }
.a12-programacao__badge--no-ar { background: var(--a12-principal, var(--ap-marca)); color: var(--a12-on-principal, #fff); }
.a12-programacao__selos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .25rem; vertical-align: middle; }
.a12-programacao__selo { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 .45rem; border-radius: 4px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; line-height: 1; text-decoration: none; background: #1b1b1b; color: #fff; }
.a12-programacao__selo--classind { font-weight: 600; color: #fff; }
.a12-programacao__selo--l, .a12-programacao__selo--al { background: #0a9c4d; }
.a12-programacao__selo--10, .a12-programacao__selo--a10 { background: #1c7ad8; }
.a12-programacao__selo--12, .a12-programacao__selo--a12 { background: #e8b800; color: #000; }
.a12-programacao__selo--14, .a12-programacao__selo--a14 { background: #f08a00; }
.a12-programacao__selo--16, .a12-programacao__selo--a16 { background: #d9261c; }
.a12-programacao__selo--18, .a12-programacao__selo--a18 { background: #000; }
.a12-programacao__selo--vivo { background: #b3261e; color: #fff; text-transform: uppercase; }
.a12-programacao__selo--verifique { background: transparent; color: var(--ap-tonal); font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0; min-width: 0; }
.a12-programacao__selo--acess { background: #1b1b1b; color: #fff; }
.a12-programacao__item--passou .a12-programacao__selo, .a12-programacao__item--passou .a12-programacao__badge { opacity: .75; }
.a12-programacao__cartao { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: 1rem; background: var(--ap-fundo); border: 1px solid var(--ap-fio); border-radius: 8px; }
.a12-programacao__estado { margin: 0; color: var(--ap-tonal); font-size: .9rem; }
.a12-programacao__cartao .a12-programacao__nome { margin: .1rem 0 .3rem; font-size: 1.4rem; }
.a12-programacao__progresso { width: 100%; height: .4rem; margin: .5rem 0; }
.a12-programacao a.a12-programacao__botao, .a12-programacao a.a12-programacao__botao:link, .a12-programacao a.a12-programacao__botao:visited { display: inline-flex; align-items: center; gap: .5rem; padding: 12px 22px; border-radius: 32px; background: var(--a12-principal, var(--ap-marca)); color: var(--a12-on-principal, #fff); font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; border: 0; box-shadow: none; transition: background .15s, box-shadow .15s; }
.a12-programacao a.a12-programacao__botao:hover, .a12-programacao a.a12-programacao__botao:focus-visible { background: var(--a12-secundaria, var(--ap-marca)); color: var(--a12-on-secundaria, #fff); text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); outline: none; }
.a12-programacao a.a12-programacao__botao:focus-visible { box-shadow: 0 0 0 3px var(--a12-fundo-suave, #c6d3ed); }
@media (max-width: 600px) { .a12-programacao__cartao { grid-template-columns: 1fr; } .a12-programacao__imagem { width: 100%; height: auto; max-width: 240px; } .a12-programacao__item { grid-template-columns: 3.2rem 1fr; } .a12-programacao__miniatura { display: none; } }

/* Barra do cabeçalho do núcleo: cores da paleta contextual (a12-color-palettes), nunca fixas. */
/* Barra do cabeçalho do núcleo — medidas tiradas do mock de 16/10/2026 (1600px):
   barra 70px, sem padding lateral (a margem é do container do Elementor), rótulo 11px, pill 28px, nome 18px, ícones 17px centrados na barra com passo 35px,
   botão 215×46. Tudo na paleta contextual do núcleo; o bloco "ao vivo" é link para o stream. */
.a12-programacao--barra { --ap-barra-fundo: var(--a12-fundo-minimo, #eef2f8); --ap-barra-texto: var(--a12-secundaria, #1e3a6e); --ap-barra-marca: var(--a12-secundaria, #20377d); --ap-barra-on-marca: var(--a12-on-secundaria, #fff); --ap-barra-pill-prox: var(--a12-fundo-suave, #d5e0ee); --ap-barra-fio: color-mix(in srgb, var(--ap-barra-marca) 22%, transparent);
  display: flex; align-items: center; justify-content: flex-start; gap: 0; min-height: 70px; padding: 0; box-sizing: border-box; background: var(--ap-barra-fundo); color: var(--ap-barra-texto); }
.a12-programacao--barra-sem-fundo { background: transparent; border-bottom: 0; } /* fundo="0": o container do Elementor pinta a faixa inteira */
.a12-programacao__grupo { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
/* Os blocos encolhem antes de a linha quebrar: o nome que não cabe rola (barra.js). */
.a12-programacao__bloco, .a12-programacao a.a12-programacao__bloco { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 0 1 auto; min-width: 170px; padding: 11px 27px 10px; border-right: 1px solid var(--ap-barra-fio); color: inherit; text-decoration: none; }
.a12-programacao__bloco--ao-vivo { padding-left: 0; }
.a12-programacao__bloco--a-seguir { border-right: 0; padding-right: 0; }
.a12-programacao a.a12-programacao__bloco--link:hover .a12-programacao__nome, .a12-programacao a.a12-programacao__bloco--link:focus-visible .a12-programacao__nome { color: var(--ap-barra-texto); }
.a12-programacao a.a12-programacao__bloco--link:focus-visible { outline: 2px solid var(--ap-barra-marca); outline-offset: 2px; border-radius: 6px; }
.a12-programacao__rotulo { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--ap-barra-texto); display: inline-flex; align-items: center; gap: 6px; }
/* bolinha ao vivo: a mesma onda da Missa (a12-celebracoes .a12-cel-pt--vivo): sai do ponto e some */
.a12-programacao__bloco--ao-vivo .a12-programacao__rotulo::before { content: ""; position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ap-barra-marca); }
.a12-programacao__bloco--ao-vivo .a12-programacao__rotulo { position: relative; }
.a12-programacao__bloco--ao-vivo .a12-programacao__rotulo::after { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ap-barra-marca); animation: a12-programacao-pulso 1.6s ease-out infinite; pointer-events: none; }
@keyframes a12-programacao-pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a12-programacao__bloco--ao-vivo .a12-programacao__rotulo::after { animation: none; display: none; } }
/* ponta esquerda com a próxima atração (nada no ar): sem o ponto pulsante, pílula vazada até entrar no ar */
.a12-programacao__bloco--prevista .a12-programacao__rotulo::before, .a12-programacao__bloco--prevista .a12-programacao__rotulo::after { display: none; }
.a12-programacao__linha { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.a12-programacao__pill { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; background: var(--ap-barra-marca); color: var(--ap-barra-on-marca); border: 1.5px solid var(--ap-barra-marca); }
.a12-programacao__pill--vazada { background: var(--ap-barra-pill-prox); color: var(--ap-barra-texto); border-color: color-mix(in srgb, var(--ap-barra-marca) 55%, transparent); }
.a12-programacao--barra .a12-programacao__nome { font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--ap-barra-marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a12-programacao--barra a, .a12-programacao--barra a:hover, .a12-programacao--barra a:focus { text-decoration: none; }
.a12-programacao--barra .a12-programacao__nome a, .a12-programacao--barra .a12-programacao__nome a:visited { color: inherit; text-decoration: none; }
.a12-programacao--barra .a12-programacao__nome a:hover, .a12-programacao--barra .a12-programacao__nome a:focus-visible { text-decoration: none; color: var(--ap-barra-texto); }
.a12-programacao__nome--vazio { opacity: .7; font-size: 1rem; }
/* Nome longo rola (barra.js mede e liga): pausa no início, desliza, recomeça; fade nas bordas; para no hover. */
.a12-programacao--barra .a12-programacao__rolagem { display: inline-flex; gap: 48px; white-space: nowrap; }
@property --ap-fade { syntax: '<length>'; inherits: false; initial-value: 0px; }
.a12-programacao--barra .a12-programacao__nome--rola { text-overflow: clip; padding-left: 10px; margin-left: -10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ap-fade), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--ap-fade), #000 calc(100% - 28px), transparent); animation: a12-programacao-fade var(--ap-rola-dur, 10s) linear infinite; }
@keyframes a12-programacao-fade { 0%, 18% { --ap-fade: 0px; } 24%, 100% { --ap-fade: 24px; } }
.a12-programacao--barra .a12-programacao__nome--rola:hover, .a12-programacao--barra .a12-programacao__bloco:focus-within .a12-programacao__nome--rola { animation-play-state: paused; }
.a12-programacao--barra .a12-programacao__nome--rola .a12-programacao__rolagem { animation: a12-programacao-rola var(--ap-rola-dur, 10s) linear infinite; }
.a12-programacao--barra .a12-programacao__nome--rola:hover .a12-programacao__rolagem, .a12-programacao--barra .a12-programacao__bloco:focus-within .a12-programacao__rolagem { animation-play-state: paused; }
@keyframes a12-programacao-rola { 0%, 18% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--ap-rola, 0px))); } }
@media (prefers-reduced-motion: reduce) { .a12-programacao--barra .a12-programacao__nome--rola { text-overflow: ellipsis; mask-image: none; -webkit-mask-image: none; } .a12-programacao--barra .a12-programacao__nome--rola .a12-programacao__rolagem { animation: none; } .a12-programacao--barra .a12-programacao__nome--rola .a12-programacao__copia[aria-hidden] { display: none; } }
.a12-programacao__redes { list-style: none; margin: 0 0 0 44px; padding: 0; display: flex; flex: none; align-items: center; gap: 3px; }
.a12-programacao__icone, .a12-programacao button.a12-programacao__icone, .a12-programacao a.a12-programacao__icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ap-barra-marca); cursor: pointer; text-decoration: none; transition: background .15s; }
.a12-programacao__icone svg { width: 18px; height: 18px; }
.a12-programacao__icone:hover, .a12-programacao__icone:focus-visible { background: color-mix(in srgb, var(--ap-barra-marca) 12%, transparent); outline: none; }
.a12-programacao__icone--copiado { background: var(--ap-barra-marca); color: var(--ap-barra-on-marca); }
.a12-programacao a.a12-programacao__botao--barra { flex: none; margin-left: auto; white-space: nowrap; height: 46px; padding: 0 22px; font-size: 16px; gap: 10px; }
/* tipografia clara: chips e botão da barra em cima da cor secundária (navy), não da principal — na Rádio a principal é clara demais para texto branco (3,5:1) */
.a12-programacao a.a12-programacao__botao--barra, .a12-programacao a.a12-programacao__botao--barra:link, .a12-programacao a.a12-programacao__botao--barra:visited { background: var(--ap-barra-marca); color: var(--ap-barra-on-marca); }
.a12-programacao a.a12-programacao__botao--barra:hover, .a12-programacao a.a12-programacao__botao--barra:focus-visible { background: color-mix(in srgb, var(--ap-barra-marca) 85%, #000); color: var(--ap-barra-on-marca); }
.a12-programacao__seta { flex: none; }

/* Fichas do programa (quando assistir, classificação, acessibilidade) */
.a12-programacao-ficha { --af-fio: var(--a12-fundo-suave, #d9e4f2); --af-tile: var(--a12-fundo-suave, #e3eef7); --af-tile-texto: var(--a12-principal, #005199); --af-rotulo: var(--a12-secundaria, #5a6b7d);
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--af-fio); border-radius: 8px; background: #fff; }
.a12-programacao-ficha__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--af-tile); color: var(--af-tile-texto); }
.a12-programacao-ficha__icone--cheio { background: var(--af-tile-texto); color: #fff; }
.a12-programacao-ficha__icone--selo { background: transparent; }
.a12-programacao-ficha__selo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; font-weight: 600; font-size: 20px; color: #fff; }
.a12-programacao-ficha__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a12-programacao-ficha__rotulo { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--af-rotulo); }
.a12-programacao-ficha__valor { font-size: 1rem; line-height: 1.35; }
.a12-programacao-ficha__valor abbr { text-decoration: none; font-weight: 600; }
.a12-programacao-ficha__proxima { display: block; font-size: .9rem; color: var(--af-rotulo); }
.a12-programacao-ficha__proxima--no-ar { color: #b3261e; font-weight: 600; }
.a12-programacao-ficha__descritores { display: block; font-size: .85rem; color: var(--af-rotulo); }
.a12-programacao-ficha__vazio { color: var(--af-rotulo); font-style: italic; }
.a12-programacao-ficha__nota { color: var(--af-rotulo); font-size: .9em; }
abbr.a12-programacao__selo, abbr.a12-programacao__selo[title] { text-decoration: none; border-bottom: 0; cursor: help; }
.a12-programacao__item--passou .a12-programacao__nome a { color: inherit; }

/* Harmonia dos selos: uma régua só (22px, raio 4, 11px/800, caixa alta), alinhados ao meio do nome. */
.a12-programacao__item { align-items: center; }
.a12-programacao__item .a12-programacao__corpo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.a12-programacao__item .a12-programacao__nome { font-size: 1.05rem; line-height: 1.3; }
.a12-programacao__item .a12-programacao__episodio { flex-basis: 100%; order: 10; margin-top: -2px; }
.a12-programacao__item .a12-programacao__selos { margin-top: 0; }
.a12-programacao__badge, .a12-programacao__selo { height: 22px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 0 7px; }
.a12-programacao__selo--classind { min-width: 30px; }
.a12-programacao__selo--verifique { height: auto; font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0; color: var(--ap-tonal); }
.a12-programacao__vod { margin-left: .25rem; font-size: .85rem; }
.a12-programacao__selo[title], .a12-programacao__badge[title] { cursor: help; }
/* Dentro de widget HTML/Shortcode do Elementor o texto herda fonte de sistema em peso 900: amarrar pelo kit. */
.a12-programacao, .a12-programacao-ficha { font-family: var(--e-global-typography-text-font-family, "Roboto"), "Roboto", system-ui, sans-serif; font-weight: var(--e-global-typography-text-font-weight, 400); line-height: var(--e-global-typography-text-line-height, 1.5); }
.a12-programacao *, .a12-programacao-ficha * { font-family: inherit; }
.a12-programacao-ficha__valor, .a12-programacao__episodio, .a12-programacao-ficha__proxima, .a12-programacao-ficha__descritores { font-weight: 400; }
.a12-programacao a.a12-programacao__botao { font-family: var(--e-global-typography-9975a72-font-family, "Roboto"), "Roboto", sans-serif; font-weight: var(--e-global-typography-9975a72-font-weight, 500); }
/* Fichas: mesma altura mínima e mesma régua vertical, independentemente de terem 1, 2 ou 3 linhas. */
.a12-programacao-ficha { min-height: 100px; padding: 14px 18px; gap: 16px; align-items: center; box-sizing: border-box; }
.a12-programacao-ficha__corpo { gap: 0; justify-content: center; }
.a12-programacao-ficha__rotulo { line-height: 16px; margin-bottom: 4px; }
.a12-programacao-ficha__valor { font-size: 1rem; line-height: 24px; }
.a12-programacao-ficha__proxima, .a12-programacao-ficha__descritores { line-height: 20px; margin-top: 2px; font-size: .9rem; }
.a12-programacao-ficha__nota { font-size: .9rem; }
/* Cores do núcleo (paleta contextual do a12-color-palettes), nunca do kit genérico: fundo, fio, links e barra. */
.a12-programacao { --ap-fio: var(--a12-fundo-suave, #d5e0ee); --ap-fundo: var(--a12-fundo-minimo, #f3f7fb); --ap-marca: var(--a12-principal, #005199); }
.a12-programacao .a12-programacao__nome a, .a12-programacao .a12-programacao__nome a:visited { color: var(--a12-principal, #005199); }
.a12-programacao .a12-programacao__nome a:hover, .a12-programacao .a12-programacao__nome a:focus-visible { color: var(--a12-secundaria, #003361); text-decoration: underline; }
.a12-programacao__cartao { background: var(--a12-fundo-minimo, #f3f7fb); border-color: var(--a12-fundo-suave, #d5e0ee); }
.a12-programacao__item--no-ar, .a12-programacao__item--no_ar { background: var(--a12-fundo-minimo, #f3f7fb); }
.a12-programacao img.a12-programacao__miniatura, .a12-programacao img.a12-programacao__imagem, .a12-programacao-ficha img, .a12-programacao .a12-programacao__miniatura { border-radius: 8px; overflow: hidden; }
.a12-programacao__progresso { accent-color: var(--a12-principal, #005199); border-radius: 999px; overflow: hidden; }
.a12-programacao__progresso::-webkit-progress-bar { background: var(--a12-fundo-suave, #d5e0ee); border-radius: 999px; }
.a12-programacao__progresso::-webkit-progress-value { background: var(--a12-principal, #005199); border-radius: 999px; }
.a12-programacao__progresso::-moz-progress-bar { background: var(--a12-principal, #005199); }
.a12-programacao__titulo, .a12-programacao__subtitulo { color: var(--a12-secundaria, inherit); }

/* Apresentadores, redes, edições e botão de assistir */
.a12-programacao-pessoas__lista, .a12-programacao-redes__lista, .a12-programacao-edicoes__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.a12-programacao-pessoas__item a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; width: 112px; text-align: center; }
.a12-programacao-pessoas__foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--a12-fundo-suave, #d5e0ee); color: var(--a12-principal, #005199); }
.a12-programacao-pessoas__nome { font-size: .95rem; line-height: 1.3; color: var(--a12-principal, #005199); }
.a12-programacao-redes__lista { gap: 10px; margin-top: 6px; }
.a12-programacao-redes__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--a12-fundo-suave, #d5e0ee); color: var(--a12-principal, #005199); background: #fff; }
.a12-programacao-redes__link:hover { background: var(--a12-fundo-minimo, #f3f7fb); border-color: var(--a12-principal, #005199); }
.a12-programacao-edicoes__lista { display: grid; grid-template-columns: repeat(var(--ape-colunas, 3), minmax(0, 1fr)); }
.a12-programacao-edicoes__item a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.a12-programacao-edicoes__capa { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.a12-programacao-edicoes__data { font-size: .8rem; color: var(--a12-secundaria, #5a6b7d); }
.a12-programacao-edicoes__titulo { font-weight: 500; color: var(--a12-principal, #005199); line-height: 1.3; }
.a12-programacao__lista--datas .a12-programacao__item { grid-template-columns: 8.75rem 1fr; }
.a12-programacao__lista--datas .a12-programacao__hora { white-space: nowrap; }
.a12-programacao__ponto { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; margin-right: .5rem; animation: a12-programacao-pulsa 1.4s infinite; }
@keyframes a12-programacao-pulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .a12-programacao__ponto { animation: none; } }
@media (max-width: 600px) { .a12-programacao-edicoes__lista { grid-template-columns: 1fr 1fr; } }
/* Sinopse do programa: classe única para ajuste de estilo; nunca em negrito, tipografia do kit. */
.a12-programacao-sinopse, .a12-programacao-sinopse p { font-family: var(--e-global-typography-text-font-family, "Roboto"), "Roboto", system-ui, sans-serif; font-weight: 400; font-size: var(--e-global-typography-text-font-size, 1rem); line-height: var(--e-global-typography-text-line-height, 1.6); color: inherit; margin: 0 0 1em; }
/* A barra mede a própria largura (container query), não a janela. Redução progressiva, sem quebrar linha:
   ≥1000: o mock. 700–1000: as quatro redes recolhem (compartilhar abre todas) e os dois blocos dividem o espaço
   em partes iguais, para o divisor alinhar entre linhas. 560–700: o botão vira círculo com a seta.
   <560: empilha, botão com texto na largura toda. */
.a12-programacao-caixa { container-type: inline-size; }
@container (max-width: 1000px) {
  .a12-programacao__grupo { flex: 1 1 auto; }
  .a12-programacao__bloco, .a12-programacao a.a12-programacao__bloco { flex: 1 1 0; min-width: 0; }
  .a12-programacao__redes { margin-left: 16px; }
  .a12-programacao a.a12-programacao__icone--rede { display: none; }
  .a12-programacao a.a12-programacao__botao--barra { margin-left: 16px; }
}
@container (max-width: 700px) {
  .a12-programacao a.a12-programacao__botao--barra { width: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .a12-programacao__botao-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a12-programacao a.a12-programacao__botao--barra .a12-programacao__seta { width: 22px; height: 22px; }
}
@container (max-width: 560px) {
  .a12-programacao--barra { flex-wrap: wrap; padding: 2px 0 12px; }
  .a12-programacao__grupo { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .a12-programacao__bloco, .a12-programacao a.a12-programacao__bloco { border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--ap-barra-fio); }
  .a12-programacao__bloco--a-seguir { border-bottom: 0; }
  .a12-programacao__redes { flex: 1 1 100%; justify-content: space-between; margin: 0; }
  .a12-programacao a.a12-programacao__icone--rede { display: inline-flex; }
  .a12-programacao a.a12-programacao__botao--barra { margin: 12px 0 0; width: auto; flex: 1 1 100%; justify-content: center; border-radius: 32px; padding: 0 22px; }
  .a12-programacao__botao-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .a12-programacao a.a12-programacao__botao--barra .a12-programacao__seta { width: 18px; height: 18px; }
}
/* Barra: nenhum link sublinha no hover (a regra geral das listas, acima, perdia por ordem). O hover só escurece. */
.a12-programacao--barra .a12-programacao__nome a:hover, .a12-programacao--barra .a12-programacao__nome a:focus-visible, .a12-programacao--barra a:hover, .a12-programacao--barra a:focus-visible { text-decoration: none; }
.a12-programacao--barra .a12-programacao__nome a:hover, .a12-programacao--barra .a12-programacao__nome a:focus-visible { color: var(--ap-barra-texto); }

/* ============================================================================
   Página de programação — [a12_programacao_grade]
   Referências: guia de TV da BBC (abas de dia, "on now" em destaque, lista limpa com a hora
   à esquerda), programação da Globo (cartão do ar) e o "now playing" de Spotify/Apple Music.
   ========================================================================== */
.a12-pg { --pg-marca: var(--a12-principal, #005199); --pg-on-marca: var(--a12-on-principal, #fff); --pg-texto: var(--a12-secundaria, #1e3a6e); --pg-suave: var(--a12-fundo-suave, #d5e0ee); --pg-minimo: var(--a12-fundo-minimo, #f3f7fb); --pg-fio: color-mix(in srgb, var(--pg-marca) 14%, transparent); --pg-tonal: color-mix(in srgb, var(--pg-texto) 62%, transparent);
  container-type: inline-size; padding: 40px 0 56px; font-family: var(--e-global-typography-text-font-family, "Roboto"), "Roboto", system-ui, sans-serif; color: var(--e-global-color-text, #1a1a1a); }
.a12-pg * { box-sizing: border-box; }

/* título */
.a12-pg__topo { margin: 0 0 24px; }
.a12-pg__sobre { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--pg-tonal); }
.a12-pg__titulo { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--pg-texto); letter-spacing: -.01em; }

/* herói: o que está no ar */
.a12-pg__heroi { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 28px; margin: 0 0 40px; border-radius: 20px; background: linear-gradient(135deg, var(--pg-suave), var(--pg-minimo) 70%); }
.a12-pg__heroi-capa img { display: block; width: 200px; height: 200px; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--pg-marca) 45%, transparent); }
.a12-pg__heroi-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.a12-pg__heroi-rotulo { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--pg-texto); font-variant-numeric: tabular-nums; }
.a12-pg__ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pg-marca); }
.a12-pg__ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pg-marca); animation: a12-programacao-pulso 1.6s ease-out infinite; }
.a12-pg__heroi-nome { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--pg-marca); letter-spacing: -.01em; }
.a12-pg__heroi-nome a { color: inherit; text-decoration: none; }
.a12-pg__heroi-nome a:hover { color: var(--pg-texto); text-decoration: none; }
.a12-pg__heroi-sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--pg-tonal); max-width: 60ch; }
.a12-pg__heroi-progresso { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 520px; margin-top: 4px; }
.a12-pg__heroi-falta { font-size: 13px; color: var(--pg-tonal); white-space: nowrap; }
.a12-pg__heroi-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.a12-pg a.a12-pg__heroi-link { font-size: 15px; font-weight: 500; color: var(--pg-marca); text-decoration: none; }
.a12-pg a.a12-pg__heroi-link:hover { color: var(--pg-texto); }
.a12-pg__heroi-prox { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--pg-fio); font-size: 15px; color: var(--pg-texto); }
.a12-pg__heroi-prox span { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--pg-tonal); margin-right: 6px; }
.a12-pg__heroi-prox time { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.a12-pg__heroi-prox a { color: var(--pg-marca); text-decoration: none; font-weight: 500; }
.a12-pg__heroi-prox a:hover { color: var(--pg-texto); }

/* controle: abas de dia + agora */
.a12-pg__controle { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--pg-fio); margin: 0 0 20px; }
.a12-pg__dias { min-width: 0; flex: 1 1 auto; }
.a12-pg__dias ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.a12-pg__dias ul::-webkit-scrollbar { display: none; }
.a12-pg__dias li { flex: none; }
.a12-pg a.a12-pg__diaitem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 10px 14px 12px; color: var(--pg-tonal); text-decoration: none; border-radius: 10px 10px 0 0; transition: color .15s, background .15s; }
.a12-pg a.a12-pg__diaitem::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .15s; }
.a12-pg a.a12-pg__diaitem:hover { color: var(--pg-marca); background: var(--pg-minimo); text-decoration: none; }
.a12-pg a.a12-pg__diaitem:focus-visible { outline: 2px solid var(--pg-marca); outline-offset: -2px; }
.a12-pg a.a12-pg__diaitem--atual { color: var(--pg-marca); }
.a12-pg a.a12-pg__diaitem--atual::after { background: var(--pg-marca); }
.a12-pg__diaitem-rotulo { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.a12-pg__diaitem-num { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.a12-pg__acoes { display: flex; align-items: center; gap: 8px; flex: none; padding-bottom: 8px; }
.a12-pg button.a12-pg__agora { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--pg-fio); background: transparent; color: var(--pg-marca); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.a12-pg button.a12-pg__agora:hover, .a12-pg button.a12-pg__agora:focus-visible { background: var(--pg-minimo); border-color: var(--pg-marca); outline: none; }

/* cabeçalho do dia */
.a12-pg__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 4px; }
.a12-pg__dia-titulo { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--pg-texto); }
.a12-pg a.a12-pg__programas { font-size: 14px; font-weight: 500; color: var(--pg-marca); text-decoration: none; white-space: nowrap; }
.a12-pg a.a12-pg__programas:hover { color: var(--pg-texto); }

/* lista */
.a12-pg__lista { list-style: none; margin: 0; padding: 0; }
.a12-pg__item { position: relative; display: grid; grid-template-columns: 72px 80px minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 16px 16px; margin: 0 -16px; border-radius: 14px; transition: background .15s; }
.a12-pg__item + .a12-pg__item::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--pg-fio); }
.a12-pg__item:hover { background: var(--pg-minimo); }
.a12-pg__item--no_ar { background: var(--pg-minimo); box-shadow: inset 4px 0 0 var(--pg-marca); }
.a12-pg__item--no_ar + .a12-pg__item::before, .a12-pg__item--no_ar::before { display: none; }
.a12-pg__item--foco { background: color-mix(in srgb, var(--pg-marca) 10%, transparent); }
.a12-pg__hora { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.a12-pg__hora time { font-size: 17px; font-weight: 600; color: var(--pg-texto); line-height: 1.1; }
.a12-pg__fim { font-size: 12px; color: var(--pg-tonal); }
.a12-pg__fim::before { content: "até "; }
.a12-pg a.a12-pg__capa { display: block; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--pg-suave); }
.a12-pg__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a12-pg__corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.a12-pg__linha1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.a12-pg__nome { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--pg-marca); }
.a12-pg__nome a { color: inherit; text-decoration: none; }
.a12-pg__nome a:hover, .a12-pg__nome a:focus-visible { color: var(--pg-texto); text-decoration: none; }
.a12-pg__episodio { margin: 0; font-size: 14px; line-height: 1.4; color: var(--pg-tonal); }
.a12-pg__episodio--resumo { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.a12-pg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 2px; }
.a12-pg__meta .a12-programacao__selos { margin: 0; }
.a12-pg__duracao { font-size: 12px; color: var(--pg-tonal); }
.a12-pg__progresso { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--pg-marca) 18%, transparent); overflow: hidden; }
.a12-pg__item .a12-pg__progresso { margin-top: 8px; }
.a12-pg__progresso span { display: block; height: 100%; background: var(--pg-marca); border-radius: 999px; }
.a12-pg a.a12-pg__vod { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pg-marca); color: var(--pg-marca); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.a12-pg a.a12-pg__vod:hover { background: var(--pg-marca); color: var(--pg-on-marca); }
.a12-programacao__selo--inedito { background: var(--a12-principal, #005199); color: var(--a12-on-principal, #fff); text-transform: uppercase; }
.a12-programacao__selo--reprise { background: #444; color: #fff; text-transform: uppercase; }

/* passado */
.a12-pg__item--passou .a12-pg__hora time, .a12-pg__item--passou .a12-pg__nome { color: var(--pg-tonal); }
.a12-pg__item--passou .a12-pg__capa img { filter: grayscale(1); opacity: .6; }
.a12-pg__item--passou .a12-programacao__selo { opacity: .6; }
.a12-pg__lista--recolhida .a12-pg__item--passou { display: none; }
.a12-pg__anteriores { display: flex; justify-content: center; padding: 4px 0 16px; }
.a12-pg button.a12-pg__mostrar { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pg-fio); background: transparent; color: var(--pg-texto); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.a12-pg button.a12-pg__mostrar:hover, .a12-pg button.a12-pg__mostrar:focus-visible { border-color: var(--pg-marca); color: var(--pg-marca); background: var(--pg-minimo); outline: none; }
.a12-pg button.a12-pg__mostrar::before { content: "↑ "; }

/* vazio */
.a12-pg__vazio { padding: 48px 24px; border: 1px dashed var(--pg-fio); border-radius: 16px; text-align: center; color: var(--pg-tonal); }
.a12-pg__vazio p { margin: 0 0 16px; font-size: 16px; }

/* largura menor */
@container (max-width: 720px) {
  .a12-pg { padding: 24px 0 40px; }
  .a12-pg__titulo { font-size: 30px; }
  .a12-pg__heroi { grid-template-columns: 1fr; gap: 18px; padding: 20px; border-radius: 16px; }
  .a12-pg__heroi-capa img { width: 120px; height: 120px; }
  .a12-pg__heroi-nome { font-size: 24px; }
  .a12-pg__controle { flex-direction: column; align-items: stretch; gap: 8px; }
  .a12-pg__acoes { justify-content: flex-end; padding-bottom: 8px; }
  .a12-pg__item { grid-template-columns: 56px 64px minmax(0, 1fr); row-gap: 8px; padding: 12px 8px; margin: 0 -8px; }
  .a12-pg__item + .a12-pg__item::before { left: 8px; right: 8px; }
  .a12-pg a.a12-pg__capa { width: 64px; height: 64px; }
  .a12-pg__nome { font-size: 16px; }
  .a12-pg a.a12-pg__vod { grid-column: 3; justify-self: start; height: 32px; }
  .a12-pg__cabeca { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .a12-pg__item, .a12-pg a.a12-pg__diaitem { transition: none; } .a12-pg__ponto::after { animation: none; display: none; } }
/* shortcodes com a identidade da página, dentro de outra página: sem o respiro da página inteira */
.a12-pg--embutido { padding: 0; }
.a12-pg__dia-titulo--solto { margin: 0 0 12px; }
.a12-pg--no-ar .a12-pg__heroi { margin-bottom: 24px; }
.a12-pg__controle--sem-faixa { padding-bottom: 8px; }
.a12-pg__dia-titulo--controle { padding-bottom: 4px; }
.a12-pg__data { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--pg-tonal); white-space: nowrap; }
.a12-pg--proximas .a12-pg__item { grid-template-columns: 88px 64px minmax(0, 1fr) auto; }
.a12-pg--proximas .a12-pg a.a12-pg__capa, .a12-pg--proximas a.a12-pg__capa { width: 64px; height: 64px; }

/* Tempo real (ao-vivo.js). A troca de programa na barra é um empurrão para a esquerda: o "a seguir"
   viaja até o lugar do "ao vivo" por cima de tudo (--viajando), o que saiu é um fantasma absoluto
   que escorrega e some (--saindo), e a pílula se enche no caminho pela transição de cor. */
.a12-programacao--barra .a12-programacao__bloco { position: relative; }
.a12-programacao__linha--saindo { position: absolute; margin: 0; pointer-events: none; }
.a12-programacao__linha--viajando { position: relative; z-index: 2; }
.a12-programacao__pill { transition: background-color .6s cubic-bezier(.2, 0, 0, 1), color .6s cubic-bezier(.2, 0, 0, 1), border-color .6s cubic-bezier(.2, 0, 0, 1); }
.a12-programacao__redes li[hidden] { display: none; }
.a12-pg__progresso span { transition: width 1s linear; }
.a12-pg__item { transition: background .6s cubic-bezier(.2, 0, 0, 1); }
.a12-pg--no-ar .a12-pg__item--passou { display: none; }
@media (prefers-reduced-motion: reduce) { .a12-programacao__pill, .a12-pg__progresso span { transition: none; } }