/* =========================================================================
   Peças da marca - cores fixas (não mudam com o tema do manual)
   Escala: .pc é o contêiner; dentro de .pc-in, 1em = 1% da largura da peça.
   Assim cada peça é desenhada uma vez e escala sem perder proporção.
   ========================================================================= */
.pc {
  --custodia: #102A5C; --sinal: #1F5BD8; --nucleo: #F4B323; --ambartx: #8A5A00;
  --grafite: #18202E; --ardosia: #566176; --nevoa: #E3EAF6; --linha: #D5DBE5; --papel: #F6F7F9;
  --fd: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --ft: 'Public Sans', Arial, Helvetica, sans-serif;
  --fm: var(--ft);
  container-type: inline-size; position: relative; overflow: hidden; width: 100%; max-width: 100%;
  background: #fff; color: var(--grafite); font-family: var(--ft); color-scheme: light;
}
.pc-in { position: absolute; inset: 0; font-size: 1cqw; line-height: 1.3; }
.pc * { box-sizing: border-box; }
.pc svg { display: block; max-width: none; }
.pc p { margin: 0; max-width: none; }
.pc ul, .pc ol { margin: 0; padding: 0; list-style: none; }
.pc li { margin: 0; max-width: none; }

/* Formatos */
.r45 { aspect-ratio: 4 / 5; } .r916 { aspect-ratio: 9 / 16; } .r11 { aspect-ratio: 1 / 1; }
.r169 { aspect-ratio: 16 / 9; } .ra4 { aspect-ratio: 210 / 297; } .ra4p { aspect-ratio: 297 / 210; }
.r31 { aspect-ratio: 3 / 1; } .r41 { aspect-ratio: 4 / 1; } .r25 { aspect-ratio: 2 / 5; } .r32 { aspect-ratio: 3 / 2; }
.rcartao { aspect-ratio: 85 / 55; } .rcracha { aspect-ratio: 100 / 140; } .rdl { aspect-ratio: 220 / 110; }
.r_pasta { aspect-ratio: 470 / 330; } .r_email { aspect-ratio: 16 / 10; } .rzap { aspect-ratio: 9 / 16; }

/* Tons */
.t-escuro { background: var(--custodia); color: #fff; }
.t-papel { background: var(--papel); }
.t-sinal { background: var(--sinal); color: #fff; }

/* Primitivas tipográficas (tamanhos em em = % da largura) */
.tit { font-family: var(--fd); font-weight: 700; font-stretch: 112%; line-height: 1.02; text-wrap: balance; }
.tit.xb { font-weight: 800; }
.tit i, .tit em { font-style: normal; }
.hl { background: var(--nucleo); color: var(--custodia); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mono { font-family: var(--fm); }
.rot { font-family: var(--fm); font-weight: 700; }
.ap { color: var(--ardosia); }
.t-escuro .ap, .t-sinal .ap { color: #C3CEE6; }
.cx { position: absolute; }

/* Identificação do curso dentro das peças */
.id { display: flex; align-items: center; gap: .9em; }
.id svg { width: 4.6em; height: 4.6em; flex: none; }
.id .n { font-family: var(--fd); font-weight: 700; font-stretch: 112%; line-height: 1.04; font-size: 2.1em; }
.id .s { font-family: var(--fm); font-weight: 700; font-size: 1.35em; color: var(--ardosia); margin-bottom: .25em; display: block; }
.t-escuro .id .s, .t-sinal .id .s { color: #B8C5E0; }

/* Marcador de categoria */
.cat { display: inline-flex; align-items: center; gap: .8em; }
.cat svg { width: 2.6em; height: 2.6em; flex: none; }
.cat span { font-family: var(--fm); font-weight: 700; font-size: 2.1em; }

/* Banda de identificação (rodapé das peças sociais) */
.banda { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 2em; padding: 0 7em; height: 12.5em; border-top: .25em solid var(--linha); background: #fff; color: var(--custodia); }
.t-papel .banda { background: var(--papel); }
.t-escuro .banda { background: var(--custodia); color: #fff; }
.t-sinal .banda { background: var(--sinal); color: #fff; border-top-color: rgba(255,255,255,.25); }
.banda.transp { background: transparent; }
.r21 { aspect-ratio: 2 / 1; } .r_cena { aspect-ratio: 1122 / 1402; } .r_cordao { aspect-ratio: 15 / 1; } .r34 { aspect-ratio: 3 / 4; } .r_perfil { aspect-ratio: 9 / 19; }
.t-escuro .banda { border-top-color: rgba(255, 255, 255, .16); }
.banda .ufba { font-family: var(--fm); font-weight: 700; font-size: 2em; }

/* Linha de custódia: microtexto contínuo */
.custodia-linha { font-family: var(--fm); font-weight: 700; white-space: nowrap; overflow: hidden; line-height: 1; }

/* Placeholders honestos de fotografia e retrato */
.foto { position: relative; overflow: hidden; background:
  radial-gradient(120% 90% at 78% 18%, rgba(255,255,255,.35), transparent 55%),
  radial-gradient(90% 70% at 15% 95%, rgba(16,42,92,.55), transparent 60%),
  linear-gradient(160deg, #8FA3C4 0%, #5E769F 45%, #33496F 100%); }
.foto.quente { background:
  radial-gradient(110% 80% at 70% 20%, rgba(255,240,215,.55), transparent 55%),
  radial-gradient(90% 70% at 20% 100%, rgba(40,30,20,.45), transparent 60%),
  linear-gradient(160deg, #C9B79E 0%, #8E7B66 50%, #4F4436 100%); }
.foto.verde { background:
  radial-gradient(110% 80% at 70% 15%, rgba(255,255,255,.4), transparent 55%),
  linear-gradient(170deg, #9DB7B0 0%, #5F857D 55%, #2F4F4A 100%); }
.foto .fr { position: absolute; left: 1.4em; bottom: 1.2em; font-family: var(--fm); font-weight: 700; color: #fff; font-size: 1.5em; background: rgba(10, 20, 40, .55); padding: .3em .6em; }
.foto .fr::before { content: none; }
.foto .nuc { position: absolute; width: 4em; height: 4em; background: var(--nucleo); }

.ret { position: relative; overflow: hidden; aspect-ratio: 1; }
.ret.sem { background: var(--custodia); display: grid; place-items: center; }
.ret.sem b { font-family: var(--fd); font-weight: 800; font-stretch: 112%; color: #fff; font-size: 7em; }
.ret.sem::after { content: ""; position: absolute; right: 9%; bottom: 9%; width: 12%; height: 12%; background: var(--nucleo); }
.ret .foto { position: absolute; inset: 0; }
.ret.claro.sem { background: var(--nevoa); }
.ret.claro.sem b { color: var(--custodia); }

/* Assinatura institucional (logos oficiais entram nos espaços tracejados) */
.parc { display: flex; align-items: center; gap: 1.6em; flex-wrap: nowrap; }
.parc .gr { display: grid; gap: .5em; }
.parc .gr > i { font-style: normal; font-family: var(--fm); font-weight: 700; font-size: 1.05em; color: var(--ardosia); }
.parc .lg { display: flex; gap: 1em; align-items: center; }
.slot { border: .16em dashed #9AA6BB; border-radius: .3em; display: grid; place-items: center; text-align: center; font-family: var(--fm); font-weight: 700; color: #6A7487; padding: .3em .6em; line-height: 1.05; min-height: 4.6em; min-width: 7em; font-size: 1em; }
.slot small { display: block; font-size: .62em; font-weight: 400; margin-top: .2em; opacity: .85; text-transform: none; }
.t-escuro .slot { border-color: rgba(255,255,255,.4); color: #D1DAEB; }
.t-escuro .parc .gr > i { color: #B8C5E0; }
.t-escuro .claro-local, .t-sinal .claro-local { color: var(--grafite); }
.t-escuro .claro-local .slot, .t-sinal .claro-local .slot { border-color: #9AA6BB; color: #6A7487; }
.t-escuro .claro-local .parc .gr > i { color: var(--ardosia); }
.parc .div { width: .14em; align-self: stretch; background: var(--linha); }

/* Linhas de serviço (data, horário, local, transmissão) */
.svc { display: grid; grid-template-columns: 4.2em 1fr; gap: 1.2em; align-items: center; }
.svc .ic { width: 4.2em; height: 4.2em; display: grid; place-items: center; background: var(--custodia); color: #fff; }
.svc .ic svg { width: 2.6em; height: 2.6em; }
.t-escuro .svc .ic { background: rgba(255,255,255,.1); color: #fff; }
.svc b { display: block; font-family: var(--fd); font-weight: 700; font-size: 2.6em; line-height: 1.1; }
.svc span { display: block; font-size: 2em; line-height: 1.25; color: var(--ardosia); }
.t-escuro .svc span { color: #C3CEE6; }

/* Modalidade */
.mod { display: inline-flex; align-items: center; gap: .6em; font-family: var(--fm); font-weight: 700; border: .18em solid currentColor; padding: .35em .8em; font-size: 1.7em; }
.mod i { width: .7em; height: .7em; background: var(--nucleo); display: block; }

/* Contador de carrossel */
.pag { font-family: var(--fm); font-weight: 700; font-size: 2em; }
.seta { font-family: var(--fm); font-weight: 700; font-size: 2.2em; display: inline-flex; align-items: center; gap: .6em; }
.seta svg { width: 2.4em; height: 1.2em; display: block; }

/* Fundos de padrão (as URIs são definidas pelo script a partir de marca.js) */
.bg-campo { background-color: var(--custodia); background-image: var(--pad-campo); background-size: 32em 32em; }
.bg-campo-claro { background-color: var(--papel); background-image: var(--pad-campo-claro); background-size: 32em 32em; }
.bg-trama { background-color: #fff; background-image: var(--pad-trama); background-size: 24em 24em; }
.bg-uma-cor { background-image: var(--pad-uma-cor); background-size: 24em 24em; }

/* Documento A4: 1em = 1% de 210 mm = 2,1 mm. Corpo 11 pt ≈ 1,85em */
.doc { font-size: 1cqw; }
.doc .corpo { font-size: 1.82em; line-height: 1.5; color: var(--grafite); }
.doc .corpo p + p { margin-top: .7em; }
.doc h5 { font-family: var(--fd); font-weight: 700; font-stretch: 112%; margin: 0; color: var(--custodia); }
.doc table { border-collapse: collapse; width: 100%; font-size: 1.55em; line-height: 1.35; }
.doc th { text-align: left; font-family: var(--fm); font-weight: 700; font-size: .78em; color: var(--custodia); border-bottom: .14em solid var(--custodia); padding: .45em .5em; vertical-align: bottom; }
.doc td { border-bottom: .07em solid var(--linha); padding: .45em .5em; vertical-align: top; }
.doc td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc .campo { border-bottom: .1em solid #9AA6BB; min-height: 1.5em; }
.doc .lbl { font-family: var(--fm); font-weight: 700; font-size: 1.1em; color: var(--ardosia); }
.doc .assin { border-top: .1em solid var(--grafite); padding-top: .4em; font-size: 1.45em; line-height: 1.3; text-align: center; }
.doc .corpo table { font-size: .85em; }
.doc .corpo .lbl { font-size: .62em; }
.doc .pgn { font-family: var(--fm); font-weight: 700; font-size: 1.2em; color: var(--ardosia); }
.doc .marg { position: absolute; left: 9.5em; right: 9.5em; }

/* P&B: simula impressão monocromática */
.pb { filter: grayscale(1) contrast(1.05); }

/* Telas de vídeo e slides: 1em = 1% da largura de 1920 px */
.sl .corpo { font-size: 1.9em; line-height: 1.45; }

/* Caixa marcada como exemplo dentro de peças */
.ex-tag { position: absolute; z-index: 5; font-family: var(--fm); font-weight: 700; font-size: 1.4em; background: #FFF4D6; color: #5A4300; border: .12em solid #E9C46A; padding: .15em .5em; }

/* Movimento: vinheta curta da célula (versão estática equivalente é o quadro final) */
@keyframes nucleo-entra { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes barra-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes barra-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes surge { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
.vinheta.toca .bv { transform-origin: center top; animation: barra-v .6s cubic-bezier(.2,.7,.2,1) both; }
.vinheta.toca .bh { transform-origin: left center; animation: barra-h .6s cubic-bezier(.2,.7,.2,1) both; }
.vinheta.toca .bv:nth-child(2) { animation-delay: .08s; }
.vinheta.toca .bh:nth-child(4) { animation-delay: .2s; }
.vinheta.toca .bh:nth-child(3) { animation-delay: .14s; }
.vinheta.toca .nc { transform-origin: center; transform-box: fill-box; animation: nucleo-entra .5s .7s cubic-bezier(.2,.7,.2,1) both; }
.vinheta.toca .tx { animation: surge .5s 1s ease both; }
.lower.toca .lb { animation: barra-h .45s cubic-bezier(.2,.7,.2,1) both; transform-origin: left center; }
.lower.toca .lt { animation: surge .4s .35s ease both; }

/* ---------- Direção 2 - Parágrafo ---------- */
.d2 { --tinta: #0B3D35; --marca-texto: #F2E25C; --papel2: #FBFBF8; --cinza2: #5B6661;
  --fs: 'Source Serif 4', Georgia, 'Times New Roman', serif; --fss: 'Source Sans 3', Arial, sans-serif; --fmm: 'Source Sans 3', Arial, sans-serif; }
.d2 .ser { font-family: var(--fs); }
.d2 .ss { font-family: var(--fss); }
.d2 .mm { font-family: var(--fmm); }
.d2 .mt { background: linear-gradient(transparent 52%, var(--marca-texto) 52%, var(--marca-texto) 92%, transparent 92%); padding: 0 .08em; }
.d2 .nl { font-family: var(--fmm); color: #9BA8A2; text-align: right; }

/* ---------- Direção 3 - Trama ---------- */
.d3 { --indigo: #26246B; --verde3: #138A86; --coral: #EE6A4D; --mostarda: #F2B33D; --creme3: #FAF7F2;
  --fm3: 'Manrope', Arial, sans-serif; }
.d3 .mn { font-family: var(--fm3); }

/* Logos oficiais: arquivos recebidos, sem alteração. Em fundo escuro, ficam sobre placa branca. */
.logo { display: inline-flex; align-items: center; height: 4.6em; min-width: 0 !important; min-height: 0 !important; flex: none; }
.logo img { height: 100%; width: auto; display: block; max-width: none; }
.logo-ic { height: 5.4em; }
.logo-senasp { height: 4em; }
.logo-mjsp { height: 3.6em; }
.t-escuro .logo, .t-sinal .logo { background: #fff; padding: .4em .6em; border-radius: .35em; box-sizing: content-box; }
.t-escuro .claro-local .logo, .t-sinal .claro-local .logo { background: none; padding: 0; }