/* ==========================================================================
   CENTRAL DO ALUNO — site próprio, com a cara do Moodle (tema don).
   Lote 5, 13/10/2026. Refeita em 20/10/2026 (anotações do Marcelo de 19/10).
   Virou página externa em 20/10/2026: sai do editor do Moodle, então não há
   mais limite de HTML, CSS ou <script>. A estética continua a do AVA.

   Arquivos: index.html (conteúdo), central.css (este), central.js
   (comportamento), pendente.css (marca o que falta enviar; sai antes de ir
   ao ar), ementas/ (PDFs, gerados por tools/gerar-ementas.mjs).

   TOKENS (os da casa):
       navy #102770   azul #0059FB   tinta suave #3A4468 / #5A668C
       linha #D5D8E2  linha fraca #EEF1F7  superfície #F5F7FB  tint #EAF1FF
       r-sm 8 / r-md 10 / r-lg 16
   Do Moodle, copiados do tema: barra #0A2445 (60px), fundo #F4F8FB, herói
   radial #1B6BFF → #0059FB → #102770, fonte do sistema.
   Régua de comunicação da FAT (Figma "Régua de retenção"):
       #INFO IMPORTANTE #00AEEF · #COLOCA EM PRÁTICA #0054A6 · #ESTAMOS COM VOCÊ #34A853
       #OPEN FOR WORK #674EA7 · #VAMOS RECUPERAR #ED8500
   Para FUNDO COM TEXTO BRANCO três delas cedem (APCA, medido em 13/10):
   info → #0092CB, inc → #1E8E5A, rec → #C96F00. A cor pura fica nos pontos
   e bordas, onde não há texto por cima.

   GRID DE 8: toda altura de linha e espaço é múltiplo de 8 (4 só em vão
   apertado). Linhas de texto: 16 (12–13px), 24 (14–18px), 32 (24px).
   ALVO: 24 no mínimo no desktop, 40 no celular.

   O INTERIOR (painel e seções, 20/10/2026, aprovado pelo Marcelo): miolo de
   1200, laterais de 32 (16 no celular); texto corrido com linha de até 720.
   O herói é uma faixa de ponta a ponta na cor do curso, a "mesa" do portão;
   os atalhos do painel são os cartões escuros do portão; as listas das
   seções ficam claras. A cor do curso fica só no herói (--cur-a e --cur-b,
   do body: data-cor-curso e data-cor-tipo, que o central.js escreve); o
   resto do interior usa o azul da marca (--int-fundo), e o WhatsApp o verde
   dele (pedido do Marcelo, 20/10).
   ========================================================================== */


/* --------------------------------------------------------------------------
   A CASCA — o que no AVA vinha do Moodle: página, barra e herói
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: #F4F8FB;
    color: #3A4468;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    -webkit-font-smoothing: antialiased;
}
img, svg, iframe {
    display: block;
    max-width: 100%;
}
input, button, select, textarea {
    font: inherit;
}
.pular {
    position: absolute;
    top: -48px;
    left: 16px;
    z-index: 30;
    padding: 8px 16px;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-weight: 700;
}
.pular:focus {
    top: 8px;
}

/* A barra do AVA: mesmo azul e altura do Moodle. Sino e avatar não vêm: fora
   do Moodle eles não funcionariam. */
.barra {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
    padding: 0 12px;
    background: #0A2445;
}
.barra-marca {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    color: #F4F8FB;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}
.barra-ava {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-left: auto;
    padding: 0 16px;
    border: 1px solid rgba(244, 248, 251, .32);
    border-radius: 999px;
    color: #F4F8FB;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.barra :focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}
@media (hover: hover) {
    .barra-ava:hover {
        border-color: #F4F8FB;
        background: rgba(244, 248, 251, .08);
    }
}

/* A cor do curso no interior. Os mesmos degradês dos cartões de curso do
   portão; o tipo vale para curso sem cor própria (Pós, Qualifica SP). */
body {
    --cur-a: #0D2C55;
    --cur-b: #071F3A;
    /* O resto do interior fica no azul da marca (pedido do Marcelo, 20/10:
       "aqui não precisa ser vermelho, tudo azul"), o degradê do cartão de
       Qualificação do portão. O que tem cor própria leva a dela (WhatsApp). */
    --int-fundo: linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    --int-base: #0047C9;
    --int-tinta: #0047C9;                 /* ícone e texto sobre branco */
}
body[data-cor-tipo="qualificacao"] { --cur-a: #1B6BFF; --cur-b: #102770; }
body[data-cor-tipo="qualificasp"]  { --cur-a: #2A2A2A; --cur-b: #000000; }
body[data-cor-tipo="pos"]          { --cur-a: #2B44C9; --cur-b: #1A2A8C; }
body[data-cor-curso="sj"]  { --cur-a: #8C2346; --cur-b: #4A0F24; }
body[data-cor-curso="adm"] { --cur-a: #0D2C55; --cur-b: #071F3A; }
body[data-cor-curso="mkt"] { --cur-a: #C2410C; --cur-b: #7C2D12; }
body[data-cor-curso="rh"]  { --cur-a: #0F766E; --cur-b: #134E4A; }
body[data-cor-curso="ds"]  { --cur-a: #6D28D9; --cur-b: #3B1A8C; }
body[data-cor-curso="ii"]  { --cur-a: #0369A1; --cur-b: #0C3B66; }

/* O miolo de 1200 (pedido do Marcelo, 20/10: os 784 do limitedwidth do
   Moodle eram pequenos demais). A página ocupa a janela; o herói vai de
   ponta a ponta e o conteúdo fica no miolo, com 32 de lado no mínimo. */
.pagina {
    --miolo-lado: max(32px, calc((100% - 1200px) / 2));
    padding: 60px 0 64px;                 /* a barra é fixed de 60; embaixo, 64 para a sombra dos cartões não ser cortada no fim da página */
    overflow-x: clip;                     /* a fita vai de ponta a ponta com 50vw, que conta a barra de rolagem */
}
/* No portão a página é a tela inteira, sem o herói (pedido do Marcelo,
   20/10: o portão quer imersão). */
body:not([data-etapa="painel"]) .pagina {
    padding: 60px 0 0;
}
body:not([data-etapa="painel"]) .heroi {
    display: none;
}
body:not([data-etapa="painel"]) .pagina > main,
body:not([data-etapa="painel"]) .central {
    padding: 0;
}
.pagina > main {
    padding: 48px var(--miolo-lado) 0;
}
/* Com uma seção aberta, a fita cola embaixo do herói. */
body:has(.ctl-secao:target, .ctl-secao :target) .pagina > main,
body:has(.ctl-secao:target, .ctl-secao :target) .central {
    padding-top: 0;
}

/* O HERÓI (20/10/2026): a faixa do curso, de ponta a ponta, na estética da
   mesa do portão. O degradê do curso escurecido, a grade de 32 bem apagada
   e a luz difusa à direita, longe do texto; o conteúdo fica no miolo. Os
   anéis do herói do Moodle saíram (nada de forma desenhada no fundo).
   Branco no ponto mais claro do degradê: 6,0:1 ou mais em todos os cursos. */
.heroi {
    position: relative;
    min-height: 216px;                    /* trilha 24 + 8 + título 48 + 16 + linha 40, com 40 em cima e embaixo */
    margin: 0;
    padding: 40px var(--miolo-lado);
    background-color: color-mix(in oklab, var(--cur-b), #000 40%);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(40% 160% at 92% 0%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, color-mix(in oklab, var(--cur-a), #000 15%) 0%, color-mix(in oklab, var(--cur-b), #000 40%) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    color: #FFFFFF;
}
.heroi-trilha {
    display: flex;
    align-items: center;
    height: 24px;                         /* o chevron inline somava 1px */
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
}
.heroi-trilha a {
    color: #FFFFFF;
    text-decoration: none;
}
.heroi-trilha a:hover {
    text-decoration: underline;
}
/* O título: o mesmo corpo da pergunta das etapas do portão. */
.heroi h1 {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
/* O ícone do curso no quadro de vidro, como nos cartões do portão. */
.heroi h1 .icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: 1.25rem;
    letter-spacing: 0;
}

/* O herói no painel (upgrade de 20/10): a trilha ganha "Central do Aluno",
   o título vira o curso (com o ícone dele) e embaixo vêm a turma, a etapa
   da jornada numa frase e o Trocar de curso. No portão, nada disso aparece. */
.heroi-painel {
    display: none;
}
body[data-etapa="painel"] .heroi-trilha .heroi-painel {
    display: inline-flex;
    align-items: center;
}
.heroi-trilha .heroi-painel .fa {
    margin: 0 8px;
    font-size: .625rem;
    opacity: .72;
}
body[data-etapa="painel"] .heroi-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 40px;
}
/* A turma: pílula de vidro. */
.heroi-turma {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .24);
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.heroi-turma:empty {
    display: none;                        /* Qualifica SP: a turma sai do cadastro, não há o que mostrar */
}
.heroi-status {
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* Trocar de curso: o botão de vidro do Liberar (CTA em fundo escuro não é
   botão branco), com o mesmo hover. */
.heroi-trocar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-left: auto;
    padding: 0 16px;
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 16px -8px rgba(0, 0, 0, .40);
    color: #FFFFFF;
    font: inherit;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.heroi-trocar .fa {
    font-size: .75rem;
}
.heroi-trocar:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}
@media (hover: hover) {
    .heroi-trocar:hover {
        background-color: rgba(255, 255, 255, .12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 16px 24px -8px rgba(0, 0, 0, .48);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .heroi-trocar:hover {
        transform: translateY(-2px);
    }
}
.heroi h1:focus {
    outline: 0;                           /* foco programático da troca de etapa */
}
/* Com uma seção aberta, o herói encolhe para uma linha (80): curso e
   turma. A etapa e o Trocar ficam no painel. */
body:has(.ctl-secao:target, .ctl-secao :target) .heroi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 0;
    padding: 16px var(--miolo-lado);
}
body:has(.ctl-secao:target, .ctl-secao :target) :is(.heroi-trilha, .heroi-status, .heroi-trocar) {
    display: none;
}
body:has(.ctl-secao:target, .ctl-secao :target) .heroi h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -.01em;
}
body:has(.ctl-secao:target, .ctl-secao :target) .heroi-sub {
    min-height: 32px;
}

@media (max-width: 767.98px) {
    .pagina {
        --miolo-lado: 16px;               /* o Moodle usa 8 */
        padding-bottom: 48px;
    }
    .pagina > main {
        padding-top: 32px;
    }
    .heroi {
        min-height: 0;
        padding: 24px 16px 32px;
        background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    }
    .heroi h1 {
        min-height: 40px;
        font-size: 1.375rem;
        line-height: 2rem;
        letter-spacing: -.01em;
    }
    body[data-etapa="painel"] .heroi h1 .icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    /* Curso de duas linhas (o central.js marca .is-duas-linhas): o quadro
       cresce para 56 e se centra no bloco de 64, cobrindo do alto da primeira
       linha ao pé da segunda (Marcelo, 21/10/2026). */
    body[data-etapa="painel"] .heroi h1.is-duas-linhas .icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    .heroi-trocar {
        margin-left: 0;
    }
    .heroi-status {
        flex: 1 1 auto;
    }
    body:has(.ctl-secao:target, .ctl-secao :target) .heroi {
        padding: 16px;
    }
    body:has(.ctl-secao:target, .ctl-secao :target) .heroi h1 {
        align-items: center;
        font-size: 1.25rem;
    }
    body:has(.ctl-secao:target, .ctl-secao :target) .heroi h1 .icon {
        margin-top: 0;
    }
}


/* --------------------------------------------------------------------------
   0. A CAIXA DA PÁGINA                                                       
   -------------------------------------------------------------------------- */
.central {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #3A4468;
    position: relative;
    padding-top: 8px;
    padding-bottom: 32px;
}
.central h2,
.central h3,
.central h4 {
    color: #102770;
    font-weight: 600;
    margin: 0;
}
.central h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}
.central h3,
.central h4 {
    font-size: 1.125rem;
    line-height: 1.5rem;
}
.central p {
    margin: 0;
}
.central ul,
.central ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.central a {
    color: #0059FB;
}
.central button {
    font: inherit;
    color: inherit;
}
.central :is(a, button, summary, select, input):focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
    box-shadow: none;
}
.central [hidden] {
    display: none !important;             /* o script esconde com hidden; os display:flex/grid desta camada não podem vencê-lo */
}
.central .ctl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* Linha do tempo de 3 semestres (TI): no desktop "1º bim." para não quebrar;
   o leitor de tela continua ouvindo "bimestre". */
.central .ctl-bim-curto {
    display: none;
}
@media (min-width: 768px) {
    .central .ctl-metro.is-3sem .ctl-bim-longo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .central .ctl-metro.is-3sem .ctl-bim-curto {
        display: inline;
    }
}
.central [id] {
    scroll-margin-top: 156px;             /* 60 da barra + 64 da fita + 32 */
}


/* --------------------------------------------------------------------------
   1. O PORTÃO — a carteirinha que se monta, em tela cheia (20/10/2026)
   Duas metades da altura da tela, embaixo da barra. À esquerda a CENA: a
   mesa na cor do tipo e, depois, do curso (grade apagada e luz difusa, a
   estética dos cartões do tipo), com a carteirinha grande no meio e o
   progresso embaixo. À direita o PALCO, com uma etapa por vez. No celular
   (e no tablet em pé) a cena vem em cima e o palco sobe por cima dela como
   uma folha. Antes de o script rodar só a etapa 1 aparece (sem piscar o
   resto); depois, só a que o data-etapa da .central manda.
   -------------------------------------------------------------------------- */
.central {
    --ctl-ease: cubic-bezier(.23, 1, .32, 1);       /* ease-out forte: entra rápido, assenta devagar */
}
.central > [data-etapa],
.central .ctl-palco > [data-etapa] {
    display: none;
}
.central:not(.ctl-js) .ctl-palco > [data-etapa="tipo"],
.central[data-etapa="tipo"] .ctl-palco > [data-etapa="tipo"],
.central[data-etapa="curso"] .ctl-palco > [data-etapa="curso"],
.central[data-etapa="turma"] .ctl-palco > [data-etapa="turma"],
.central[data-etapa="ra"] .ctl-palco > [data-etapa="ra"],
.central[data-etapa="painel"] > [data-etapa="painel"] {
    display: block;
}
.central[data-etapa="painel"] > .ctl-portao {
    display: none;
}

/* As cores da cena e da carteirinha: duas propriedades registradas, para a
   troca andar (o navegador não anima degradê). Herdam: a .ctl-portao troca,
   a cena e a carteirinha acompanham. As mesmas cores dos cartões de escolha. */
@property --cart-a {
    syntax: "<color>";
    inherits: true;
    initial-value: #0D2C55;
}
@property --cart-b {
    syntax: "<color>";
    inherits: true;
    initial-value: #071F3A;
}
.central .ctl-portao {
    --cart-a: #0D2C55;
    --cart-b: #071F3A;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* 5 : 7 da grade de 12, perto de 1 : √2 (a folha A4): o palco pesa mais sem esmagar a cena */
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
    transition: --cart-a 400ms ease, --cart-b 400ms ease;
}
.central .ctl-portao[data-cor-tipo="qualificacao"] { --cart-a: #1B6BFF; --cart-b: #102770; }
.central .ctl-portao[data-cor-tipo="qualificasp"]  { --cart-a: #2A2A2A; --cart-b: #000000; }
.central .ctl-portao[data-cor-tipo="pos"]          { --cart-a: #2B44C9; --cart-b: #1A2A8C; }
.central .ctl-portao[data-cor-curso="sj"]  { --cart-a: #8C2346; --cart-b: #4A0F24; }
.central .ctl-portao[data-cor-curso="adm"] { --cart-a: #0D2C55; --cart-b: #071F3A; }
.central .ctl-portao[data-cor-curso="mkt"] { --cart-a: #C2410C; --cart-b: #7C2D12; }
.central .ctl-portao[data-cor-curso="rh"]  { --cart-a: #0F766E; --cart-b: #134E4A; }
.central .ctl-portao[data-cor-curso="ds"]  { --cart-a: #6D28D9; --cart-b: #3B1A8C; }
.central .ctl-portao[data-cor-curso="ii"]  { --cart-a: #0369A1; --cart-b: #0C3B66; }

/* A CENA: fica parada enquanto o palco rola. */
.central .ctl-cena {
    position: sticky;
    top: 60px;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    padding: 48px 64px;
    background-color: color-mix(in oklab, var(--cart-b), #000 50%);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%),   /* a luz fica atrás da carteirinha */
        linear-gradient(160deg, color-mix(in oklab, var(--cart-a), #000 30%) 0%, color-mix(in oklab, var(--cart-b), #000 50%) 100%);   /* a mesa, mais escura que a carteirinha */
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    color: #FFFFFF;
}
/* A carteirinha no centro da cena. O nome da página mora na barra (pedido
   de 20/10); o título da cena fica só para o leitor de tela. */
.central .ctl-cena > * {
    justify-self: center;
    width: min(448px, 100%);
}
.central .ctl-cena-topo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.central .ctl-cena-titulo {
    margin: 0;
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-cena-titulo:focus {
    outline: 0;
}

/* A carteirinha: o objeto da cena. Proporção de cartão (448 × 280), reta;
   no desktop ela inclina de leve seguindo o ponteiro pela cena (o script
   escreve --rx e --ry; a transição longa faz o atraso de mola). */
.central .ctl-cart-cartao {
    position: relative;
    overflow: hidden;
    align-self: center;
    justify-self: center;
    display: grid;
    align-content: space-between;
    min-height: 280px;
    padding: 32px;
    border-radius: 12px;
    background-color: var(--cart-b);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(90% 70% at 15% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--cart-a) 0%, var(--cart-b) 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .16),
        0 2px 4px rgba(0, 0, 0, .16),
        0 40px 80px -24px rgba(0, 0, 0, .60);
    color: #FFFFFF;
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 600ms var(--ctl-ease);
}

/* O brilho que atravessa a carteirinha quando o RA libera. */
.central .ctl-cart-cartao::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
    pointer-events: none;
}
.central .ctl-portao.is-liberada .ctl-cart-cartao::after {
    transform: translateX(100%);
    transition: transform 900ms var(--ctl-ease) 120ms;
}

.central .ctl-cart-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin: 0;
}
/* O chip: metal claro com os contatos. */
.central .ctl-cart-chip {
    position: relative;
    width: 40px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #F4F8FB 0%, #B9C9EC 55%, #8FA6DA 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(7, 31, 58, .2);
}
.central .ctl-cart-chip::before {
    content: "";
    position: absolute;
    inset: 10px 0;
    border-top: 1px solid rgba(7, 31, 58, .24);
    border-bottom: 1px solid rgba(7, 31, 58, .24);
}
.central .ctl-cart-chip::after {
    content: "";
    position: absolute;
    inset: 0 14px;
    border-left: 1px solid rgba(7, 31, 58, .24);
    border-right: 1px solid rgba(7, 31, 58, .24);
}
/* O logo da escola, branco vazado: a cor da carteirinha passa pelas letras. */
.central .ctl-cart-marca {
    display: block;
    width: auto;
    height: 40px;
    transition: opacity 200ms ease;
}

/* Os campos. O curso e a turma são botões: voltam para a etapa. */
.central .ctl-cart-curso,
.central .ctl-cart-campo {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    text-align: left;
}
.central .ctl-cart-curso {
    align-items: center;
    gap: 16px;
    min-height: 56px;
}
.central button.ctl-cart-curso:not(:disabled),
.central button.ctl-cart-campo:not(:disabled) {
    cursor: pointer;
}
.central .ctl-cart-cartao button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}
.central .ctl-cart-icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    font-size: 1.5rem;
}
.central .ctl-portao:not([data-cor-tipo]) .ctl-cart-icone .fa {
    opacity: .56;                         /* ainda sem escolha */
}
/* Qualifica SP: a marca SP num quadro branco, como no cartão do tipo. */
.central .ctl-cart-cartao[data-icone="qualificasp"] .ctl-cart-icone {
    background: #FFFFFF url("marcas/qualificasp-sp.png") center / 40px auto no-repeat;
}
.central .ctl-cart-cartao[data-icone="qualificasp"] .ctl-cart-icone .fa {
    visibility: hidden;
}
.central .ctl-cart-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.central .ctl-cart-tipo,
.central .ctl-cart-rotulo {
    color: rgba(255, 255, 255, .88);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.central .ctl-cart-valor {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 800;
    text-wrap: balance;
}
/* A base na mesma grade do curso: a turma embaixo do ícone e o RA alinhado
   com o nome do curso. */
.central .ctl-cart-base {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
}
.central .ctl-cart-campo {
    flex-direction: column;
    min-height: 48px;
}
.central .ctl-cart-base .ctl-cart-valor {
    font-size: 1.5rem;
    line-height: 2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    white-space: nowrap;
}
/* Vazio: o lugar do dado, apagado. */
.central .ctl-cart-valor.is-vazio,
.central .ctl-cart-tipo.is-vazio {
    color: rgba(255, 255, 255, .80);      /* .64 dava 3,5:1 em Marketing; .80 passa de 4,5 em todos */
    font-weight: 600;
    letter-spacing: 0;
}
.central .ctl-cart-tipo.is-vazio {
    text-transform: none;
}
.central .ctl-cart-base .ctl-cart-valor.is-vazio {
    font-size: 1.125rem;
}
/* O campo da etapa da vez: sublinhado. No RA, o cursor pisca na carteirinha
   enquanto o aluno digita no campo. */
.central .ctl-cart-valor.is-atual {
    width: fit-content;
    min-width: 48px;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .88);
}
.central .ctl-cart-cartao.is-digitando .ctl-cart-campo [data-valor="ra"]::after {   /* 0,5,1: vence o reset do lápis no RA */
    content: "";
    display: inline-block;
    width: 2px;
    height: 24px;
    margin: 4px 0 0 2px;
    vertical-align: top;                  /* 4 + 24 dentro da linha: a base fica em 48 */
    background: #FFFFFF;
    opacity: 1;
    animation: ctl-cursor 1s steps(1) infinite;
}
@keyframes ctl-cursor {
    50% { opacity: 0; }
}
.central .ctl-cart-dig {
    display: inline-block;
}
.central .ctl-cart-dig.is-novo {
    animation: ctl-digito 160ms var(--ctl-ease);
}
@keyframes ctl-digito {
    from { opacity: 0; transform: translateY(8px); }
}
/* Editar: o lápis aparece ao passar o mouse sobre o curso ou a turma. */
.central :is(.ctl-cart-curso, .ctl-cart-campo) .ctl-cart-valor:not(.is-vazio)::after {
    content: "\f303";                     /* pen */
    margin-left: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    vertical-align: 2px;
    line-height: 0;                       /* invisível, não pode esticar a linha (48 → 52) */
    opacity: 0;
    transition: opacity 150ms ease;
}
.central .ctl-cart-campo[data-campo="ra"] .ctl-cart-valor::after {
    content: none;
}
@media (hover: hover) {
    .central :is(button.ctl-cart-curso, button.ctl-cart-campo):not(:disabled):hover .ctl-cart-valor::after {
        opacity: .8;
    }
}

/* O carimbo. */
.central .ctl-cart-selo {
    position: absolute;
    top: 32px;
    right: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 2px solid #FFFFFF;
    border-radius: 6px;
    background: #1E8E5A;                  /* o verde da régua que aceita texto branco */
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5);
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0;
    transform: rotate(-8deg) scale(1.6);
    pointer-events: none;
}
.central .ctl-portao.is-liberada .ctl-cart-selo {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
    transition: opacity 160ms ease-out 200ms, transform 280ms var(--ctl-ease) 200ms;
}
.central .ctl-portao.is-liberada .ctl-cart-marca {
    opacity: 0;
}

/* O PALCO: a trilha no alto, alinhada com o título da cena, e a etapa
   embaixo, com o título sempre na mesma altura (a etapa troca, o olho não
   precisa procurar a pergunta). */
.central .ctl-palco {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 64px;
    min-width: 0;
    padding: 48px 64px 64px;
    overflow-x: clip;                     /* a cascata entra 24px de lado: sem isto a página alarga no celular e o Chrome aborta a transição ("Viewport size changed") */
    container: palco / inline-size;       /* as escolhas se arrumam pela largura do palco */
}
.central .ctl-palco > * {
    justify-self: center;
    width: 100%;
    max-width: 800px;
}
.central .ctl-palco > .ctl-etapa {
    align-self: start;
}

/* A TRILHA (referência do Marcelo, 20/10): o stepper clássico, centrado.
   Círculo, nome e a linha de apoio embaixo; um trilho liga cada círculo ao
   próximo e enche quando a etapa seguinte é alcançada. Feita: o visto azul
   e a escolha no lugar do apoio, e volta para ela (no mouse, o visto vira
   lápis). Da vez: o número aceso, com halo. Por vir: cinza. */
.central .ctl-trilha ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.central .ctl-trilha li {
    position: relative;
    min-width: 0;
}
.central .ctl-trilha li:not(:last-child)::before,
.central .ctl-trilha li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    border-radius: 1px;
    background: #D5D8E2;
}
.central .ctl-trilha li:not(:last-child)::after {
    background: #0059FB;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 480ms var(--ctl-ease);
}
.central .ctl-trilha li:has(+ li:is(.is-feito, .is-atual))::after,
.central .ctl-portao.is-liberada .ctl-trilha li:not(:last-child)::after {
    transform: scaleX(1);
}
.central .ctl-trilha-passo {
    display: grid;
    justify-items: center;
    align-content: start;
    row-gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #5A668C;                       /* o cinza de texto da casa: #6B7393 dava 4,4:1 */
    font: inherit;
    text-align: center;
}
.central .ctl-trilha-passo:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 4px;
}
.central .ctl-trilha-marca {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #C5CBDC;
    border-radius: 50%;
    background: #E9EDF4;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ctl-ease);
}
.central .ctl-trilha-marca::before {
    content: "\f00c";                     /* check */
    display: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
}
.central .ctl-trilha-rotulo {
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-trilha-valor {
    min-height: 16px;                     /* vazia até haver escolha: a altura fica reservada */
    max-width: 100%;
    margin-top: -8px;                     /* cola no nome: o par se lê junto */
    overflow: hidden;
    color: #5A668C;
    font-size: .8125rem;
    line-height: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Da vez */
.central .ctl-trilha li.is-atual .ctl-trilha-rotulo {
    color: #102770;
}
.central .ctl-trilha li.is-atual .ctl-trilha-marca {
    border-color: #0059FB;
    background: #0059FB;
    box-shadow: 0 0 0 4px rgba(0, 89, 251, .16);
    color: #FFFFFF;
}
/* Feita (e todas, no carimbo) */
.central .ctl-trilha li.is-feito .ctl-trilha-rotulo {
    color: #102770;
}
.central .ctl-trilha li.is-feito .ctl-trilha-valor {
    color: #3A4468;
    font-weight: 600;
}
.central .ctl-trilha li.is-feito .ctl-trilha-marca,
.central .ctl-portao.is-liberada .ctl-trilha .ctl-trilha-marca {
    border-color: #0059FB;
    background: #0059FB;
    box-shadow: none;
    color: #FFFFFF;
}
.central .ctl-trilha li.is-feito .ctl-trilha-n,
.central .ctl-portao.is-liberada .ctl-trilha .ctl-trilha-n {
    display: none;
}
.central .ctl-trilha li.is-feito .ctl-trilha-marca::before,
.central .ctl-portao.is-liberada .ctl-trilha .ctl-trilha-marca::before {
    display: block;
}
.central .ctl-trilha li.is-feito .ctl-trilha-passo:not(:disabled) {
    cursor: pointer;
}
@media (hover: hover) {
    .central .ctl-trilha li.is-feito .ctl-trilha-passo:not(:disabled):hover .ctl-trilha-marca {
        box-shadow: 0 0 0 4px rgba(0, 89, 251, .16);
    }
    .central .ctl-trilha li.is-feito .ctl-trilha-passo:not(:disabled):hover .ctl-trilha-marca::before {
        content: "\f303";                 /* pen: trocar */
    }
    .central .ctl-trilha li.is-feito .ctl-trilha-passo:not(:disabled):hover .ctl-trilha-valor {
        color: #0059FB;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}
.central .ctl-trilha li.is-feito .ctl-trilha-passo:not(:disabled):active .ctl-trilha-marca {
    transform: scale(.92);
}

/* A pergunta da etapa e a linha de apoio embaixo. */
.central .ctl-palco .ctl-etapa > h2 {
    margin-bottom: 32px;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.central .ctl-palco .ctl-etapa-pergunta {
    margin: -16px 0 32px;                 /* 16 do título */
    color: #3A4468;
    font-size: 1.125rem;
    line-height: 1.5rem;
}
.central .ctl-palco .ctl-etapa-pergunta .ctl-link {
    font-size: inherit;
    font-weight: 700;
    vertical-align: baseline;
}
.central .ctl-etapa h2:focus,
.central .ctl-cal-titulo:focus {
    outline: 0;                           /* o foco programático da troca de etapa não desenha anel em título */
}

/* Link de ação dentro do texto. */
.central .ctl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* A ENTRADA: cada etapa chega em cascata, da direita (avançando) ou da
   esquerda (voltando). Só transform e opacity. O script numera as escolhas
   visíveis (--i), para a cascata não contar as escondidas. */
.central {
    --ctl-dx: 24px;
}
.central[data-direcao="tras"] {
    --ctl-dx: -24px;
}
.central.ctl-js .ctl-palco .ctl-etapa > h2,
.central.ctl-js .ctl-palco .ctl-etapa-pergunta,
.central.ctl-js .ctl-palco .ctl-escolhas > li,
.central.ctl-js .ctl-palco .ctl-etapa > .ctl-pendente,
.central.ctl-js .ctl-palco .ctl-form-ra,
.central.ctl-js .ctl-palco .ctl-equipe {
    animation: ctl-entra 300ms var(--ctl-ease) both;
}
.central.ctl-js .ctl-palco .ctl-etapa > h2 { animation-delay: 40ms; }   /* a etapa velha já está 80% apagada */
.central.ctl-js .ctl-palco .ctl-etapa-pergunta { animation-delay: 80ms; }
.central.ctl-js .ctl-palco .ctl-escolhas > li { animation-delay: calc(120ms + min(var(--i, 0), 4) * 30ms); }   /* do 5º em diante, juntos: nada anima sozinho abaixo da dobra */
.central.ctl-js .ctl-palco .ctl-etapa > .ctl-pendente,
.central.ctl-js .ctl-palco .ctl-form-ra { animation-delay: 160ms; }
.central.ctl-js .ctl-palco .ctl-equipe { animation-delay: 240ms; }
.central.ctl-js .ctl-palco .ctl-form-ra.is-trocado { animation-delay: 0ms; }   /* RA ⇄ e-mail: entra na hora */
@keyframes ctl-entra {
    from { opacity: 0; transform: translateX(var(--ctl-dx)); }
}

/* A TROCA DE ETAPA (View Transitions, onde houver): a etapa velha sai para
   o lado, a página fica viva (a cor da cena anda por CSS) e o cartão
   escolhido voa até a carteirinha (ctl-voo). Sem a API, fica só a cascata. */
html[data-ctl-vt="passo"] .ctl-palco > .ctl-etapa {
    view-transition-name: ctl-palco;      /* só a etapa anda; a trilha fica parada (só a visível tem caixa) */
}
html[data-ctl-vt="passo"]::view-transition-old(root),
html[data-ctl-vt="passo"]::view-transition-new(root),
html[data-ctl-vt="passo"]::view-transition-new(ctl-palco) {
    animation: none;
}
html[data-ctl-vt="passo"]::view-transition-old(ctl-palco) {
    animation: ctl-sai 120ms cubic-bezier(.23, 1, .32, 1) both;
}
html[data-ctl-vt="passo"][data-ctl-dir="tras"]::view-transition-old(ctl-palco) {
    animation-name: ctl-sai-tras;         /* voltando, a velha sai pela direita */
}
html[data-ctl-vt]::view-transition-group(ctl-palco) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
html[data-ctl-vt]::view-transition-group(ctl-voo) {
    z-index: 10;
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
html[data-ctl-vt]::view-transition-old(ctl-voo),
html[data-ctl-vt]::view-transition-new(ctl-voo) {
    animation-duration: 400ms;
}
/* Página rolada: a etapa velha e a nova não ficam no mesmo lugar da tela, e
   deslizar uma até a outra passava por cima da carteirinha. A página salta,
   a nova entra em cascata e o ícone continua voando. */
html[data-ctl-topo]::view-transition-group(ctl-palco) {
    animation: none;
}
html[data-ctl-topo]::view-transition-old(ctl-palco) {
    display: none;
}
/* Voo de texto (o número da turma): voa só o velho, encolhendo; texto em
   fusão cruzada deixava dois "08". */
html[data-ctl-voo="texto"]::view-transition-new(ctl-voo) {
    animation: none;
    opacity: 0;
}
html[data-ctl-voo="texto"]::view-transition-old(ctl-voo) {
    animation: none;
}
html[data-ctl-vt="painel"]::view-transition-group(root) {
    animation-duration: 360ms;
}
@keyframes ctl-sai {
    to { opacity: 0; transform: translateX(-24px); filter: blur(4px); }
}
@keyframes ctl-sai-tras {
    to { opacity: 0; transform: translateX(24px); filter: blur(4px); }
}

/* O toque: o cartão afunda um pouco (em cima do levantar do hover). Com
   menos movimento, a regra geral do fim da folha zera tudo isso. O afundar
   desenhado substitui o flash azul do sistema. */
.central {
    -webkit-tap-highlight-color: transparent;
}
.central .ctl-palco .ctl-escolha:active {
    transform: scale(.97);
    transition-duration: 100ms;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-palco .ctl-escolha:hover:active {
        transform: translateY(-2px) scale(.97);
    }
}

/* Tablet em pé e celular: a cena em cima, o palco sobe como folha. */
@media (max-width: 1023.98px) {
    .central .ctl-portao {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .central .ctl-cena {
        position: relative;
        top: 0;
        height: auto;
        gap: 24px;
        padding: 32px;
    }
    .central .ctl-palco {
        position: relative;
        row-gap: 32px;
        padding: 32px 32px 48px;
        background: #F4F8FB;
    }
    .central .ctl-palco > * {
        max-width: none;
    }
    .central .ctl-palco .ctl-etapa > h2 {
        margin-bottom: 24px;
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .central .ctl-palco .ctl-etapa-pergunta {
        margin: -8px 0 24px;
    }
}
/* Celular (pedido do Marcelo, 20/10): sem a mesa escura, a carteirinha fica
   no mesmo fundo claro do palco, com 32 de ar em cima (da barra) e embaixo
   (até a trilha). Ela continua opaca (o degradê dela não muda) e no tamanho
   de sempre (208); só a sombra vira a dos cartões claros. */
@media (max-width: 767.98px) {
    .central .ctl-portao {
        background: #F4F8FB;              /* o fundo claro é do portão: cena e palco transparentes, a sombra da carteirinha não é cortada */
    }
    .central .ctl-cena {
        padding: 32px 16px 0;
        background: none;
        color: #102770;                   /* fundo claro: o branco herdado (o título só para leitor de tela) dava 1,1:1 */
    }
    .central .ctl-cena > * {
        width: min(343px, 100%);
    }
    .central .ctl-cart-cartao {
        min-height: 208px;
        padding: 24px;
        border-radius: 10px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .28),
            inset 0 0 0 1px rgba(255, 255, 255, .16),
            0 2px 4px rgba(7, 31, 58, .12),
            0 12px 24px -8px rgba(7, 31, 58, .32);
    }
    .central .ctl-cart-topo {
        height: 32px;
    }
    .central .ctl-cart-chip {
        width: 32px;
        height: 24px;
        border-radius: 4px;
    }
    .central .ctl-cart-chip::before { inset: 7px 0; }
    .central .ctl-cart-chip::after { inset: 0 11px; }
    .central .ctl-cart-marca {
        height: 32px;
    }
    .central .ctl-cart-curso {
        min-height: 48px;
    }
    .central .ctl-cart-icone {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        font-size: 1.25rem;
    }
    .central .ctl-cart-valor {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
    .central .ctl-cart-base {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .central .ctl-cart-campo {
        min-height: 40px;
    }
    .central .ctl-cart-base .ctl-cart-valor {
        font-size: 1.25rem;
    }
    .central .ctl-cart-base .ctl-cart-valor.is-vazio {
        font-size: 1rem;
    }
    .central .ctl-cart-selo {
        top: 24px;
        right: 24px;
        height: 32px;
        padding: 0 12px;
        font-size: .8125rem;
    }
    .central .ctl-palco {
        row-gap: 24px;
        padding: 32px 16px 48px;          /* 32 da carteirinha até a trilha */
        background: none;
    }
    /* Na folha estreita, a trilha fica com o círculo e o nome: a escolha
       já está na carteirinha, logo acima. */
    .central .ctl-trilha-passo {
        min-height: 56px;
        padding: 0 4px;
    }
    .central .ctl-trilha-rotulo {
        font-size: .8125rem;
    }
    .central .ctl-trilha-valor {
        display: none;
    }
    .central .ctl-palco .ctl-etapa > h2 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .central .ctl-palco .ctl-etapa-pergunta {
        font-size: 1rem;
    }
}

/* As escolhas: um cartão por opção. */
.central .ctl-escolhas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.central :is([data-etapa="tipo"], [data-etapa="curso"]) .ctl-escolhas {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* palco estreito (tablet): duas colunas */
}
@container palco (min-width: 720px) {
    .central [data-etapa="tipo"] .ctl-escolhas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .central [data-etapa="curso"] .ctl-escolhas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Turma: três por linha; com quatro, dois e dois (sem órfã). O script
   escreve quantas estão visíveis (data-n). */
.central .ctl-escolhas-turma {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .central .ctl-escolhas-turma:is([data-n="2"], [data-n="4"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.central .ctl-escolha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;          /* topo: o ícone fica na mesma altura mesmo se o nome quebrar */
    width: 100%;
    height: 100%;
    min-height: 96px;
    margin: 0;
    padding: 23px;
    border: 1px solid #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
    color: #102770;
    text-align: left;
    cursor: pointer;
}
.central .ctl-escolha .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 16px;
    border-radius: 6px;
    background: #EAF1FF;
    color: #0059FB;
    font-size: 1.125rem;
}
.central .ctl-escolha strong {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-wrap: balance;                   /* "Desenvolvimento / de Sistemas", sem palavra sozinha */
}
.central .ctl-escolha span {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-escolha:focus-visible {
    border-color: #0059FB;
    box-shadow: 0 8px 24px rgba(16, 39, 112, .10);
}
@media (hover: hover) {
    .central .ctl-escolha:hover {
        border-color: #0059FB;
        box-shadow: 0 8px 24px rgba(16, 39, 112, .10);
    }
}

/* Os cartões do TIPO DE CURSO (pedido do Marcelo, 20/10): verticais, cada um
   com o seu fundo, no desenho dos cartões grandes de Meus cursos (lote 6):
   degradê de 160° e a grade fina no passo de 24, ícone grande num quadro
   translúcido no centro, nome embaixo (o "Acessar" saiu a pedido). Técnicos
   navy (o mesmo degradê do cartão escuro de Meus cursos), Qualificação no
   azul da marca, Pós em índigo e o Qualifica SP em preto com a marca SP.
   Contraste do nome no ponto mais claro de cada fundo: ver LEIA-ME. TUDO É
   `background`: nada de pseudo-elemento por cima do botão. */
.central [data-etapa="tipo"] .ctl-escolha {
    --tp-fundo: linear-gradient(160deg, #0D2C55 0%, #071F3A 100%);
    --tp-grade: rgba(255, 255, 255, .03);   /* metade, a pedido (20/10) */
    --tp-tinta: #FFFFFF;
    --tp-quadro: rgba(255, 255, 255, .10);
    --tp-quadro-borda: rgba(255, 255, 255, .24);
    --tp-icone: #FFFFFF;
    /* Profundidade e vidro (pedido do Marcelo, 20/10): uma luz difusa no alto,
       sem forma desenhada, que o quadro de vidro do ícone desfoca. */
    --tp-sombra: inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12), 0 12px 24px -8px rgba(7, 31, 58, .32);
    min-height: 224px;                    /* no palco estreito; no largo, 288 (abaixo) */
    padding: 24px;
    border: 0;
    background-color: #071F3A;
    background-image:
        linear-gradient(to right, var(--tp-grade) 1px, transparent 1px),
        linear-gradient(to bottom, var(--tp-grade) 1px, transparent 1px),
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--tp-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow: var(--tp-sombra);
    color: var(--tp-tinta);
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}
.central [data-etapa="tipo"] .ctl-escolha[data-tipo="qualificacao"] {
    --tp-fundo: linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    --tp-grade: rgba(255, 255, 255, .04);
    --tp-quadro: rgba(255, 255, 255, .16);
    --tp-quadro-borda: rgba(255, 255, 255, .32);
    background-color: #0047C9;
}
/* Qualifica SP pelo manual dele (QualificaSP/identidade-qualificasp.md): o
   preto é de faixa. O vermelho fica só na marca SP do ícone (o marcador do
   nome saiu a pedido, 20/10), num quadro branco para o S preto não sumir. */
.central [data-etapa="tipo"] .ctl-escolha[data-tipo="qualificasp"] {
    --tp-fundo: linear-gradient(160deg, #1A1A1A 0%, #000000 100%);
    --tp-grade: rgba(255, 255, 255, .03);   /* metade, a pedido (20/10) */
    --tp-quadro: #FFFFFF;
    --tp-quadro-borda: transparent;
    background-color: #000000;
}
.central [data-etapa="tipo"] .ctl-escolha[data-tipo="qualificasp"] > .icon {
    background: #FFFFFF url("marcas/qualificasp-sp.png") center / 64px auto no-repeat;
    color: transparent;                   /* o desenho do Font Awesome sai; fica a marca */
}
/* Pós: índigo, para separar do azul da Qualificação. Branco 7,6:1 no ponto
   mais claro. */
.central [data-etapa="tipo"] .ctl-escolha[data-tipo="pos"] {
    --tp-fundo: linear-gradient(160deg, #2B44C9 0%, #1A2A8C 100%);
    --tp-grade: rgba(255, 255, 255, .035);
    --tp-quadro: rgba(255, 255, 255, .12);
    --tp-quadro-borda: rgba(255, 255, 255, .24);
    background-color: #1A2A8C;
}
/* O ícone grande, no centro do espaço acima do nome (pedido do Marcelo,
   20/10: 56 → 72 → 112, centralizado). O nome fica embaixo, à esquerda. */
.central [data-etapa="tipo"] .ctl-escolha .icon {
    align-self: center;
    width: 96px;
    height: 96px;
    margin: auto 0;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), var(--tp-quadro);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),          /* a luz pega na borda de cima */
        inset 0 0 0 1px var(--tp-quadro-borda),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 16px 32px -12px rgba(0, 0, 0, .45);
    color: var(--tp-icone);
    font-size: 3rem;
    filter: none;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}
@container palco (min-width: 720px) {
    .central [data-etapa="tipo"] .ctl-escolha {
        min-height: 288px;
    }
    .central [data-etapa="tipo"] .ctl-escolha .icon {
        width: 112px;
        height: 112px;
        font-size: 3.5rem;
    }
    .central [data-etapa="tipo"] .ctl-escolha[data-tipo="qualificasp"] > .icon {
        background-size: 80px auto;
    }
}
.central [data-etapa="tipo"] .ctl-escolha .icon::before {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
.central [data-etapa="tipo"] .ctl-escolha[data-tipo="qualificasp"] > .icon {
    background: #FFFFFF url("marcas/qualificasp-sp.png") center / 72px auto no-repeat;   /* a marca tem 84px de origem: não passar disso */
}
.central [data-etapa="tipo"] .ctl-escolha strong {
    margin-top: 24px;
    color: var(--tp-tinta);
    font-size: 1.125rem;                  /* com 20, "Pós‑graduação" passava 9px da margem no cartão de 184 */
    line-height: 1.5rem;
    font-weight: 800;
}
.central [data-etapa="tipo"] .ctl-escolha:focus-visible {
    box-shadow: var(--tp-sombra), 0 24px 48px -12px rgba(7, 31, 58, .40);
}
@media (hover: hover) {
    .central [data-etapa="tipo"] .ctl-escolha:hover {
        box-shadow: var(--tp-sombra), 0 24px 48px -12px rgba(7, 31, 58, .40);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central [data-etapa="tipo"] .ctl-escolha:hover {
        transform: translateY(-4px);
    }
    .central [data-etapa="tipo"] .ctl-escolha:hover .icon {
        transform: translateY(-2px) scale(1.04);
    }
}
@media (max-width: 767.98px) {
    .central [data-etapa="tipo"] .ctl-escolhas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .central [data-etapa="tipo"] .ctl-escolha {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        min-height: 208px;
        padding: 16px;
    }
    .central [data-etapa="tipo"] .ctl-escolha::after {
        content: none;                    /* o cartão inteiro já parece um botão */
    }
    .central [data-etapa="tipo"] .ctl-escolha .icon {
        width: 80px;
        height: 80px;
        margin: auto 0;
        border-radius: 10px;
        font-size: 2.5rem;
    }
    .central [data-etapa="tipo"] .ctl-escolha[data-tipo="qualificasp"] > .icon {
        background-size: 56px auto;
    }
    .central [data-etapa="tipo"] .ctl-escolha strong {
        display: flex;
        align-items: flex-end;
        min-height: 48px;                 /* duas linhas reservadas: o ícone fica a 32 do topo nos quatro */
        margin-top: 16px;
        font-size: 1.125rem;
    }
}

/* Os cartões de CURSO e de TURMA (pedido do Marcelo, 20/10): a mesma
   estética dos cartões do tipo, em tamanho de lista. A turma herda a cor do
   curso (pelo data-curso do <li>). O fundo segue o tipo do curso (pelo
   data-tipos do <li>): Técnicos navy, Qualificação azul, Qualifica SP preto,
   Pós índigo. Ícone branco num quadro de vidro, nome em branco. */
.central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha {
    --cs-fundo: linear-gradient(160deg, #0D2C55 0%, #071F3A 100%);
    --cs-base: #071F3A;
    --cs-sombra: inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12), 0 12px 24px -8px rgba(7, 31, 58, .32);
    min-height: 136px;
    padding: 24px;
    border: 0;
    background-color: var(--cs-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px),
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--cs-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow: var(--cs-sombra);
    color: #FFFFFF;
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}
.central [data-etapa="curso"] li[data-tipos~="qualificacao"] > .ctl-escolha {
    --cs-fundo: linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    --cs-base: #0047C9;
}
.central [data-etapa="curso"] li[data-tipos~="qualificasp"] > .ctl-escolha {
    --cs-fundo: linear-gradient(160deg, #1A1A1A 0%, #000000 100%);
    --cs-base: #000000;
}
.central [data-etapa="curso"] li[data-tipos~="pos"] > .ctl-escolha,
.central [data-etapa="turma"] li[data-curso^="pos-"] > .ctl-escolha {
    --cs-fundo: linear-gradient(160deg, #2B44C9 0%, #1A2A8C 100%);
    --cs-base: #1A2A8C;
}
/* Cada curso com a sua cor (pedido do Marcelo, 20/10), por cima da cor do
   tipo, escolhida pelo que o curso lembra: Jurídico em vinho (a cor do
   Direito), Administração no navy corporativo, Marketing em laranja,
   Recursos Humanos em verde-água (gente, cuidado), Desenvolvimento em violeta
   (código) e Informática para Internet no azul da web. Branco no ponto mais
   claro de cada degradê: SJ 8,6 · ADM 13,9 · MKT 5,2 · RH 5,5 · DS 7,1 ·
   II 5,9 (:1). Curso novo sem regra aqui fica com a cor do tipo. */
.central [data-etapa="curso"] [data-curso-opcao="sj"],
.central [data-etapa="turma"] li[data-curso="sj"] > .ctl-escolha  { --cs-fundo: linear-gradient(160deg, #8C2346 0%, #4A0F24 100%); --cs-base: #4A0F24; }
.central [data-etapa="curso"] [data-curso-opcao="adm"],
.central [data-etapa="turma"] li[data-curso="adm"] > .ctl-escolha { --cs-fundo: linear-gradient(160deg, #0D2C55 0%, #071F3A 100%); --cs-base: #071F3A; }
.central [data-etapa="curso"] [data-curso-opcao="mkt"],
.central [data-etapa="turma"] li[data-curso="mkt"] > .ctl-escolha { --cs-fundo: linear-gradient(160deg, #C2410C 0%, #7C2D12 100%); --cs-base: #7C2D12; }
.central [data-etapa="curso"] [data-curso-opcao="rh"],
.central [data-etapa="turma"] li[data-curso="rh"] > .ctl-escolha  { --cs-fundo: linear-gradient(160deg, #0F766E 0%, #134E4A 100%); --cs-base: #134E4A; }
.central [data-etapa="curso"] [data-curso-opcao="ds"],
.central [data-etapa="turma"] li[data-curso="ds"] > .ctl-escolha  { --cs-fundo: linear-gradient(160deg, #6D28D9 0%, #3B1A8C 100%); --cs-base: #3B1A8C; }
.central [data-etapa="curso"] [data-curso-opcao="ii"],
.central [data-etapa="turma"] li[data-curso="ii"] > .ctl-escolha  { --cs-fundo: linear-gradient(160deg, #0369A1 0%, #0C3B66 100%); --cs-base: #0C3B66; }
.central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha .icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: 1.25rem;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}
.central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha strong {
    color: #FFFFFF;
    font-weight: 700;
}
/* Turma (pedido do Marcelo, 20/10): mais visual e baixo. Quadro de vidro
   com o ícone de turma à esquerda e, ao lado, "Turma" de rótulo sobre o
   número grande. O <strong> continua dizendo "Turma 9" (o script lê o
   textContent). */
/* Embaixo do número, a fase da turma (o script escreve: "1º semestre",
   "Formandos", "Formada"), para o aluno se reconhecer sem lembrar o número.
   Grade: o ícone ocupa as duas linhas. */
.central [data-etapa="turma"] .ctl-escolha {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: center;
    column-gap: 16px;
    min-height: 128px;
}
.central [data-etapa="turma"] .ctl-escolha::before {
    content: "\f0c0";                     /* users */
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25rem;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}
.central [data-etapa="turma"] .ctl-escolha strong {
    grid-column: 2;
    display: flex;
    flex-direction: column;
}
.central [data-etapa="turma"] .ctl-escolha .ctl-turma-fase {
    grid-column: 2;
    color: rgba(255, 255, 255, .88);
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
}
.central [data-etapa="turma"] .ctl-escolha small {
    color: rgba(255, 255, 255, .82);
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 600;
}
.central [data-etapa="turma"] .ctl-escolha b {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 900;
    letter-spacing: -.02em;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central [data-etapa="turma"] .ctl-escolha:hover::before {
        transform: translateY(-2px) scale(1.04);
    }
}
.central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha:focus-visible {
    box-shadow: var(--cs-sombra), 0 24px 48px -12px rgba(7, 31, 58, .40);
}
@media (hover: hover) {
    .central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha:hover {
        box-shadow: var(--cs-sombra), 0 24px 48px -12px rgba(7, 31, 58, .40);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha:hover {
        transform: translateY(-4px);
    }
    .central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha:hover .icon {
        transform: translateY(-2px) scale(1.04);
    }
}
@media (max-width: 767.98px) {
    .central [data-etapa="curso"] .ctl-escolha {
        flex-wrap: nowrap;                /* com "Desenvolvimento de Sistemas" a seta descia de linha */
        min-height: 72px;
        padding: 16px;
    }
    .central [data-etapa="curso"] .ctl-escolha strong {
        flex: 1;
        min-width: 0;
    }
    .central [data-etapa="curso"] .ctl-escolha .icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 1.125rem;
    }
    .central [data-etapa="turma"] .ctl-escolha {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 80px;
        padding: 16px;
    }
    .central [data-etapa="turma"] .ctl-escolha::after {
        position: static;                 /* o chevron vira a 3ª coluna da grade */
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .central [data-etapa="turma"] .ctl-escolha::before {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 1.125rem;
    }
    .central [data-etapa="turma"] .ctl-escolha strong {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        height: 1.5rem;                   /* a linha de base empurrava 1 a mais: 25 */
    }
    .central [data-etapa="turma"] .ctl-escolha {
        row-gap: 4px;                     /* entre o número e a fase */
    }
    /* Encaixe feito à mão pelo Marcelo (20/10), arrastando o texto: o bloco
       sobe 1 (a linha de 24 deixa 5 de ar sobre o "10") e o "Turma 10" vai
       1 para a esquerda. Tinta: topo do "10" a 22, base da fase a 58. */
    .central [data-etapa="turma"] .ctl-escolha > strong {
        translate: -1px -1px;
    }
    .central [data-etapa="turma"] .ctl-escolha > .ctl-turma-fase {
        translate: 0 -1px;
    }
    .central [data-etapa="turma"] .ctl-escolha b {
        font-size: 1.5rem;
        line-height: 1.5rem;              /* 32 deixava 8 vazios sobre o número e o texto descia do centro do ícone */
    }
    .central :is([data-etapa="curso"], [data-etapa="turma"]) .ctl-escolha::after {
        color: rgba(255, 255, 255, .64);  /* o chevron da linha, no escuro */
    }
}

/* Lista longa (Qualifica SP, 11 cursos): no desktop o cartão vira linha,
   ícone ao lado do nome, como no celular; seis fileiras de 72 cabem na tela
   como as duas do técnico, e a trilha não sobe. */
@media (min-width: 768px) {
    .central [data-etapa="curso"] .ctl-escolhas.is-longa {
        row-gap: 8px;                     /* lista: as fileiras mais juntas que os cartões */
    }
    .central [data-etapa="curso"] .ctl-escolhas.is-longa .ctl-escolha {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 16px;
        min-height: 80px;                 /* 16 + duas linhas de 24 + 16 */
        padding: 16px;
    }
    .central [data-etapa="curso"] .ctl-escolhas.is-longa .ctl-escolha strong {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .central [data-etapa="curso"] .ctl-escolhas.is-longa .ctl-escolha .icon {
        flex: none;
        align-self: center;
        margin: 0;
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
}

/* A escolha atual, quando o aluno volta a uma etapa: um anel azul, com o
   fundo da página entre ele e o cartão. */
.central .ctl-palco .ctl-escolha.is-escolhida,
.central .ctl-palco .ctl-escolha.is-escolhida:hover {
    box-shadow: 0 0 0 3px #F4F8FB, 0 0 0 5px #0059FB, 0 12px 24px -8px rgba(7, 31, 58, .32);
}

/* Formulários: RA, senha mestra, código de formandos. */
.central .ctl-form {
    max-width: 560px;
}
.central .ctl-form label {
    display: block;
    margin: 0 0 8px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-form-linha {
    display: flex;
    gap: 8px;
}
.central .ctl-form input {
    flex: 1;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #B5BBCF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: .04em;
}
.central .ctl-form input:focus {
    border-color: #0059FB;
    box-shadow: 0 0 0 3px rgba(0, 89, 251, .20);
    outline: 0;
}
.central .ctl-form input[aria-invalid="true"] {
    border-color: #B42318;
}
.central .ctl-form .ctl-botao {
    height: 48px;
}
/* O RA: o campo grande da última etapa, com o botão do mesmo tamanho. */
.central .ctl-form-ra input {
    height: 56px;
    padding-bottom: 4px;                  /* a fonte tem mais ascendente que descendente: sem isto o texto desce ~3px */
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}
.central .ctl-form-ra input::placeholder {
    color: #8E97B3;
    font-size: 1.25rem;                   /* o placeholder segue a linha de base do texto de 24px: menor que 20, desce no campo */
    letter-spacing: 0;
}
.central .ctl-form-ra .ctl-botao {
    height: 56px;
    padding: 0 24px;
    font-size: 1rem;
}
.central .ctl-form-ajuda {
    margin-top: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-form-erro {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    color: #B42318;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-form-erro::before {
    content: "\f06a";                     /* circle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.central .ctl-equipe {
    max-width: 560px;
    margin-top: 32px;
    padding-top: 15px;
    border-top: 1px solid #D5D8E2;
}
.central .ctl-equipe > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    cursor: pointer;
    list-style: none;
}
.central .ctl-equipe > summary::-webkit-details-marker {
    display: none;
}
.central .ctl-equipe > summary::after {
    content: "\f078";                     /* chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .625rem;
}
.central .ctl-equipe[open] > summary {
    margin-bottom: 16px;
}


/* O RA no desenho dos cartões (pedido do Marcelo, 20/10): um painel na cor
   do curso (a mesma da carteirinha, --cart-a/--cart-b), com a grade fina, a
   luz difusa no alto e o crachá no quadro de vidro. O campo é de vidro e o
   botão é branco, com o texto na cor escura do curso. O erro vira etiqueta
   branca, para ler sobre qualquer cor. */
.central .ctl-palco .ctl-form-ra {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 24px;
    max-width: none;
    padding: 32px;
    border-radius: 10px;
    background-color: var(--cart-b);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(70% 90% at 10% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--cart-a) 0%, var(--cart-b) 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-palco .ctl-form-ra::before {
    content: "\f2c1";                     /* id-badge: o crachá */
    grid-row: 1 / span 4;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;                         /* a altura do rótulo com o campo */
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);   /* vertical: em diagonal, a metade esquerda clareava e o crachá parecia fora do centro */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2.25rem;
}
.central .ctl-palco .ctl-form-ra > * {
    grid-column: 2;
}
.central .ctl-palco .ctl-form-ra label {
    color: rgba(255, 255, 255, .88);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.central .ctl-palco .ctl-form-ra input {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.central .ctl-palco .ctl-form-ra input::placeholder {
    color: rgba(255, 255, 255, .88);      /* .64 dava 3,1:1 em Marketing; o tamanho menor e o peso normal ainda o separam do RA digitado */
}
.central .ctl-palco .ctl-form-ra input:focus {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, .16);
    box-shadow: none;
    outline: 2px solid #FFFFFF;           /* o anel de .24 sumia no painel escuro */
    outline-offset: 2px;
}
.central .ctl-palco .ctl-form-ra input[aria-invalid="true"] {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 180, 168, .48);
}
/* Liberar: botão de vidro, como os ícones da Central (CTA em fundo escuro
   não é botão branco). Texto branco, borda clara para ler como botão. */
.central .ctl-palco .ctl-form-ra .ctl-botao {
    min-width: 136px;
    padding: 0 32px;
    border-color: #FFFFFF;                /* o contorno mais firme do painel: com o vidro fino, é ele que diz "botão" */
    background-color: rgba(255, 255, 255, 0);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);   /* vidro fino: mais branco que isso, RH e Marketing caem abaixo de 4,5:1 */
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 16px -8px rgba(0, 0, 0, .40);
}
.central .ctl-palco .ctl-form-ra .ctl-botao:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    color: #FFFFFF;
}
/* Hover como o dos cartões da Central: o vidro acende (a cor anima, o
   degradê fica), a sombra desce e o botão sobe 2. */
@media (hover: hover) {
    .central .ctl-palco .ctl-form-ra .ctl-botao:not(:disabled):hover {
        border-color: #FFFFFF;
        background-color: rgba(255, 255, 255, .12);   /* 5,1:1 no pior curso (RH) */
        color: #FFFFFF;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 16px 24px -8px rgba(0, 0, 0, .48);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-palco .ctl-form-ra .ctl-botao:not(:disabled):hover {
        transform: translateY(-2px);
    }
}
.central .ctl-palco .ctl-form-ra .ctl-form-ajuda {
    color: rgba(255, 255, 255, .80);
}
.central .ctl-palco .ctl-form-ra .ctl-form-ajuda a,
.central .ctl-palco .ctl-form-ra .ctl-form-ajuda .ctl-link {
    display: inline-block;
    margin: -8px 0;
    padding: 8px 0;                       /* alvo de 40 sem mexer na linha */
    color: #FFFFFF;
    font-weight: 600;
    vertical-align: baseline;
}
.central .ctl-palco .ctl-form-ra .ctl-form-ajuda + .ctl-form-ajuda {
    margin-top: 0;                        /* "Não achou?" e "Já sabe?": duas linhas de 24, sem vão */
}
.central .ctl-palco .ctl-form-ra .ctl-form-ajuda .ctl-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}
/* A consulta pelo e-mail (22/10/2026): o mesmo painel, com o envelope no
   lugar do crachá. O e-mail é texto comum: sem o espaçado nem os números
   tabulares do RA, e no tamanho do corpo, para caber o endereço longo. */
.central .ctl-palco .ctl-form-email::before {
    content: "\f0e0";                     /* envelope */
}
.central .ctl-palco .ctl-form-email input {
    padding-bottom: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: 0;
    font-variant-numeric: normal;
}
.central .ctl-palco .ctl-form-email input::placeholder {
    font-size: 1.125rem;
}
.central .ctl-palco .ctl-form-email[aria-busy="true"] .ctl-botao {
    cursor: progress;
}
.central .ctl-palco .ctl-form-email .ctl-botao:disabled {
    opacity: 1;                           /* consultando: o botão diz "Consultando", não apaga */
}
/* Achou: o RA já está no campo, e a etiqueta branca diz de onde veio. Mesmo
   desenho do erro, com o check e a cor escura do curso. */
.central .ctl-palco .ctl-form-ra .ctl-form-achado {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--cart-b);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-palco .ctl-form-ra .ctl-form-achado::before {
    content: "\f058";                     /* circle-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.central .ctl-portao.is-liberada .ctl-form-ra .ctl-botao:disabled {
    opacity: 1;                           /* liberando: o botão diz "Liberada", não apaga */
}
.central .ctl-palco .ctl-form-ra .ctl-form-erro {
    margin-top: 16px;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 6px;
    background: #FFFFFF;
    color: #B42318;
}
/* A equipe: só o link, logo embaixo do painel. */
.central .ctl-palco .ctl-equipe {
    max-width: none;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}
/* No celular o crachá vai para o lado do rótulo, como cabeçalho do painel:
   o campo sobe 64 e chega à dobra na tela de 667. */
@media (max-width: 767.98px) {
    .central .ctl-palco .ctl-form-ra {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        padding: 24px 16px;
    }
    .central .ctl-palco .ctl-form-ra::before {
        grid-row: 1;
        width: 48px;
        height: 48px;
        border-radius: 8px;
        font-size: 1.5rem;
    }
    .central .ctl-palco .ctl-form-ra label {
        grid-column: 2;
        align-self: center;
        margin: 0;
    }
    .central .ctl-palco .ctl-form-ra label {
        grid-row: 1;
    }
    /* O erro vem logo abaixo do campo, antes do botão: com o teclado aberto,
       é o que cabe acima dele. */
    .central .ctl-palco .ctl-form-ra .ctl-form-linha {
        display: contents;
    }
    .central .ctl-palco .ctl-form-ra > :not(label),
    .central .ctl-palco .ctl-form-ra .ctl-form-linha > * {
        grid-column: 1 / -1;
    }
    .central .ctl-palco .ctl-form-ra input {
        order: 1;
        margin-top: 16px;
    }
    .central .ctl-palco .ctl-form-ra .ctl-form-erro,
    .central .ctl-palco .ctl-form-ra .ctl-form-achado {
        order: 2;
        margin-top: 8px;
    }
    .central .ctl-palco .ctl-form-ra .ctl-botao {
        order: 3;
        margin-top: 8px;
    }
    .central .ctl-palco .ctl-form-ra .ctl-form-ajuda {
        order: 4;
    }
}
/* A FAIXA (celular, 20/10): com o RA em foco e a carteirinha fora da tela,
   uma faixa dela desce de baixo da barra: o ícone do curso, a turma e os
   dígitos, com o cursor. 56 de altura (8 + 40 + 8). */
.central .ctl-faixa {
    display: none;
}
@media (max-width: 767.98px) {
    .central .ctl-faixa {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 19;                      /* embaixo da barra (20): desce de trás dela */
        display: grid;
        grid-template-columns: 32px auto minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        height: 56px;
        padding: 0 16px;
        background-color: var(--cart-b);
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
            linear-gradient(160deg, var(--cart-a) 0%, var(--cart-b) 100%);
        background-size: 24px 24px, 24px 24px, 100% 100%;
        background-position: -1px -1px, -1px -1px, 0 0;
        background-repeat: repeat, repeat, no-repeat;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16), 0 8px 16px -8px rgba(7, 31, 58, .48);
        color: #FFFFFF;
        visibility: hidden;
        transform: translateY(-100%);
        transition: transform 160ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 160ms;
    }
    .central .ctl-portao.is-faixa .ctl-faixa {
        visibility: visible;
        transform: none;
        transition: transform 240ms cubic-bezier(.23, 1, .32, 1), visibility 0s;
    }
}
.central .ctl-faixa-icone {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .24);
    font-size: 1rem;
}
.central .ctl-faixa-campo {
    display: grid;
    min-width: 0;
}
.central .ctl-faixa-campo b {
    overflow: hidden;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    white-space: nowrap;
}
.central .ctl-faixa [data-faixa="ra"]::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 20px;
    margin: 2px 0 0 2px;
    vertical-align: top;
    background: #FFFFFF;
    animation: ctl-cursor 1s steps(1) infinite;
}

/* Toque: sem o lápis do hover, curso e turma na carteirinha pareciam texto
   parado. O lápis fica à vista, apagado. */
@media (hover: none) {
    .central :is(button.ctl-cart-curso, button.ctl-cart-campo):not(:disabled) .ctl-cart-valor:not(.is-vazio)::after {
        opacity: .64;
    }
}
/* Notebook baixo (1366 × 768, 1280 × 800): a tela cheia não rola. */
@media (min-width: 1024px) and (max-height: 880px) {
    .central .ctl-cena {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .central .ctl-palco {
        row-gap: 32px;
        padding: 32px 64px 16px;          /* o curso técnico (656 de bloco) cabe em 708 sem rolar */
    }
    .central .ctl-palco .ctl-etapa > h2 {
        margin-bottom: 24px;
    }
    .central .ctl-palco .ctl-etapa-pergunta {
        margin: -8px 0 24px;
    }
    .central [data-etapa="curso"] .ctl-escolha {
        min-height: 128px;                /* duas fileiras de curso: 12px a menos e a 1366 × 768 não rola */
    }
}
/* A TRILHA PARADA (desktop, 20/10): o bloco trilha + etapa fica no meio da
   altura, mas centrado pela etapa mais alta possível (--bloco-max, medido
   pelo central.js numa cópia escondida). A trilha fica no mesmo lugar em
   todas as etapas; só muda com o tamanho da janela. Sem a medida, o mínimo. */
@media (min-width: 1024px) {
    .central .ctl-palco {
        --palco-topo-min: 48px;           /* o central.js lê: etapa maior que a tela não conta para a trilha */
        padding-top: max(48px, calc((100dvh - 60px - var(--bloco-max, 100dvh)) / 2));
        padding-top: max(48px, round(down, calc((100dvh - 60px - var(--bloco-max, 100dvh)) / 2), 8px));   /* no grid de 8, onde houver round() */
    }
}
@media (min-width: 1024px) and (max-height: 880px) {
    .central .ctl-palco {
        --palco-topo-min: 32px;
        padding-top: max(32px, calc((100dvh - 60px - var(--bloco-max, 100dvh)) / 2));
        padding-top: max(32px, round(down, calc((100dvh - 60px - var(--bloco-max, 100dvh)) / 2), 8px));   /* no grid de 8, onde houver round() */
    }
}

/* --------------------------------------------------------------------------
   2. O PAINEL — a linha do tempo (curso, turma e Trocar moram no herói)    
   -------------------------------------------------------------------------- */
/* A LINHA DO TEMPO — mapa de metrô. Os semestres são quadrantes de fundo
   claro com dois bimestres (cada um com a sua avaliação); as férias ficam
   entre eles; a formatura é a estação final. O trilho é um traço só, medido
   pelo script (--trilho-*), do primeiro ao último ponto; a parte percorrida
   é navy até o ponto atual. */
.central .ctl-linha {
    margin: 0 0 48px;
    padding: 31px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
/* Os títulos do painel: o peso das perguntas do portão, num corpo abaixo. */
.central :is(.ctl-linha-titulo, .ctl-atalhos-titulo) {
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-linha-titulo {
    margin: 0 0 8px;
}
.central .ctl-metro {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 32px;                    /* espaço do selo "Você está aqui" */
}
.central .ctl-metro::before,
.central .ctl-metro::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--trilho-eixo, 0);
    left: var(--trilho-ini, 0);
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
}
.central .ctl-metro::before {
    width: calc(var(--trilho-fim, 0px) - var(--trilho-ini, 0px));
    background: #D5D8E2;
}
.central .ctl-metro::after {
    width: calc(var(--trilho-ate, 0px) - var(--trilho-ini, 0px));
    background: #102770;
}
.central .ctl-metro-sem {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 8px 8px;
    border-radius: 8px;
    background: #F5F7FB;
}
.central .ctl-metro-sem.is-atual {
    background: #EAF1FF;
}
.central .ctl-metro-sem > ol {
    display: flex;
    gap: 8px;
}
.central .ctl-metro-rotulo {
    order: 2;
    margin-top: 8px;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
}
.central .ctl-metro-sem.is-atual .ctl-metro-rotulo {
    color: #0059FB;
}
.central .ctl-parada {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.central .ctl-metro > .ctl-parada {
    margin-top: 16px;                     /* o mesmo respiro de topo do quadrante: todos os pontos no mesmo eixo */
}
.central .ctl-metro > .ctl-parada-formatura {
    flex: 1.5 1 0;
}
.central .ctl-parada-ponto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 3px solid #B5BBCF;
    border-radius: 50%;
    background: #FFFFFF;
    color: #FFFFFF;
    font-size: .625rem;
}
.central .ctl-parada.is-feito .ctl-parada-ponto {
    border-color: #102770;
    background: #102770;
}
.central .ctl-parada.is-atual .ctl-parada-ponto {
    border-color: #0059FB;
    box-shadow: 0 0 0 6px rgba(0, 89, 251, .16);
}
.central .ctl-parada.is-atual:not(.ctl-parada-formatura) .ctl-parada-ponto::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0059FB;
}
.central .ctl-parada-formatura .ctl-parada-ponto {
    width: 40px;
    height: 40px;
    margin-top: -8px;                     /* 40 no lugar de 24: o centro fica no mesmo eixo dos outros pontos */
    margin-bottom: -8px;
    border: 0;
    background: linear-gradient(135deg, #2C7BFF 0%, #0047C9 100%);
    box-shadow: 0 4px 12px rgba(0, 71, 201, .32);
    font-size: 1rem;
}
.central .ctl-parada-formatura.is-feito .ctl-parada-ponto {
    background: #102770;
    box-shadow: none;
}
.central .ctl-parada-nome {
    margin-top: 8px;
    color: #102770;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 600;
}
.central .ctl-parada.is-futuro .ctl-parada-nome {
    color: #5A668C;
}
.central .ctl-parada-formatura .ctl-parada-nome {
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: #0047C9;
}
.central .ctl-parada-av {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
}
.central .ctl-parada-av .icon {
    margin: 0;
    font-size: .625rem;
}
.central .ctl-aqui {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 999px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    white-space: nowrap;
}
.central .ctl-aqui::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: #0059FB;
}
/* O selo fica preso ao ponto, não à parada: na formatura (ponto de 40) ele sobe junto. */
.central .ctl-parada-formatura .ctl-aqui {
    bottom: calc(100% + 16px);
}
.central .ctl-linha-nota {
    margin-top: 16px;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}


/* --------------------------------------------------------------------------
   3. O PAINEL DO DIA E OS ATALHOS — e o mesmo hub como fita quando uma seção
   abre. Upgrade de 20/10: Calendário e Comunicações viram os dois cartões
   vivos (a próxima aula e o último aviso, desenhados pelo script); os outros
   8 viram atalhos em 2 colunas (4 + 4, sem buraco). Os cartões de Horários
   e Comunicações seguem no HTML com .ctl-so-fita: na fita são pílulas. O
   Calendário voltou ao painel como atalho em 23/10/2026, quando a seção
   abriu (Marcelo: "card de calendario na home"), e a Central de Carreiras
   passou para a fita (.ctl-so-fita) no mesmo dia, para o painel seguir com 8.
   Em 26/10/2026 o Suporte saiu do painel e da fita (a seção fica, aberta
   pelo Manual) e a Carreiras voltou ao painel no lugar dele: seguem 8. No
   mesmo dia entrou o 9º, a Declaração de matrícula (só Técnico, só no
   painel), e a grade passou a 5 por linha com a de baixo centralizada:
   5 + 4 (5 + 3 para quem não vê a Declaração).
   -------------------------------------------------------------------------- */
.central .ctl-vivos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 48px;
}
/* Os cartões vivos ficam claros (são para ler: horários, nomes, o aviso);
   a cor do curso entra no quadro do ícone. Hover: sobe 2, como no portão. */
.central .ctl-vivo {
    position: relative;                   /* o ::after do link cobre o cartão */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 240px;
    padding: 31px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    transition: border-color 150ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.central .ctl-vivo:has(.ctl-vivo-link:focus-visible) {
    border-color: #0059FB;
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central .ctl-vivo:hover {
        border-color: #C9D0E0;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-vivo:hover {
        transform: translateY(-2px);
    }
}
/* O nome do cartão: título direto, sem rótulo em caixa alta. */
.central .ctl-vivo-rotulo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-vivo-rotulo .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--int-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 16px -8px rgba(7, 31, 58, .40);
    color: #FFFFFF;
    font-size: 1rem;
}
.central .ctl-vivo-quando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 8px;
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-vivo-quando time {
    color: #5A668C;
    font-size: .875rem;
    font-weight: 400;
}
.central .ctl-vivo-titulo {
    margin: 0 0 8px;
    color: #102770;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}
.central .ctl-vivo-texto {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-vivo-aulas {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}
.central .ctl-vivo-aulas li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px;
    border-radius: 8px;
    background: #F5F7FB;
}
.central .ctl-vivo-hora {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #D5D8E2;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.central .ctl-vivo-disc {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.central .ctl-vivo-disc strong {
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-vivo-disc span {
    color: #5A668C;
    font-size: .8125rem;
    line-height: 1rem;
}
.central .ctl-vivo .ctl-meet {
    position: relative;
    z-index: 1;                           /* acima do ::after do link do cartão */
}
.central .ctl-vivo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}
.central .ctl-vivo-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}
.central .ctl-vivo-link:focus-visible {
    outline: 0;                           /* o anel vai no cartão inteiro */
}
.central .ctl-vivo-link .icon {
    font-size: .75rem;
    transition: transform 150ms ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-vivo:hover .ctl-vivo-link .icon {
        transform: translateX(4px);
    }
}

.central .ctl-atalhos-titulo {
    margin: 0 0 16px;
}
/* Flex com quebra, não grade (26/10/2026, o 9º cartão): cada cartão tem a
   largura de uma coluna e a linha incompleta fica no meio, como um
   triângulo de ponta-cabeça (Eduardo: "5 na de cima e 4 na de baixo").
   --ctl-colunas e --ctl-vao dão a conta: (100% − vãos) / colunas. */
.central .ctl-cartoes {
    --ctl-colunas: 2;
    --ctl-vao: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ctl-vao);
}
.central .ctl-cartoes > li {
    flex: 0 0 calc((100% - (var(--ctl-colunas) - 1) * var(--ctl-vao)) / var(--ctl-colunas));
    min-width: 0;
}
@media (min-width: 1024px) {
    .central .ctl-cartoes {
        --ctl-colunas: 3;                 /* 3 + 3 + 3 até o miolo chegar a 1200: com 5, os nomes e as frases quebravam */
    }
}
@media (min-width: 1280px) {
    .central .ctl-cartoes {
        --ctl-colunas: 5;                 /* 5 + 4 no miolo de 1200 */
    }
}
.central .ctl-so-celular {
    display: none;                        /* o resto do nome que só o celular mostra (lá a frase sai) */
}
.central .ctl-so-fita {
    display: none;
}
/* Os atalhos são os cartões do portão (estética aprovada em 20/10): degradê
   do curso, grade de 24 bem apagada, luz difusa no alto (perto do ícone,
   longe do texto), ícone branco no quadro de vidro, nome e frase em branco.
   Azul da marca; o WhatsApp no verde dele.
   O nome fica sempre na mesma altura; a frase tem uma linha (23/10/2026:
   textos curtos, o cartão baixou de 192 para 168). Na fita (seção aberta)
   o cartão vira pílula: ver adiante. */
.central .ctl-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 168px;                    /* 24 + ícone 48 + 24 + nome 24 + frase 24 + 24 (frase em uma linha, 23/10/2026) */
    padding: 24px;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
    text-decoration: none;
}
/* Cada seção com a sua cor (pedido do Marcelo, 20/10: "sugere uma cor pra
   cada um"), escolhida pelo que ela lembra; quatro saem da régua de
   comunicação da FAT. A cor vale para o atalho, a pílula da fita, o ícone
   da cabeça e os cartões da seção. Calendário, Comunicações e Ambientação
   ficam no azul da marca (são do AVA). Branco no ponto mais claro de cada
   degradê: 4,6:1 ou mais. Tinta (sobre branco): a cor do meio. */
.central :is(.ctl-cartao[href="#ementas"], #ementas) {          /* #Coloca em prática: o conteúdo para estudar */
    --int-fundo: linear-gradient(160deg, #1F6FC4 0%, #0054A6 55%, #0A2E6B 100%);
    --int-base: #0054A6;
    --int-tinta: #0054A6;
}
.central :is(.ctl-cartao[href="#docentes"], #docentes) {        /* framboesa: gente, quem ensina */
    --int-fundo: linear-gradient(160deg, #B3306F 0%, #8E1F55 55%, #4F0C2D 100%);
    --int-base: #8E1F55;
    --int-tinta: #8E1F55;
}
.central :is(.ctl-cartao[href="#manual"], #manual) {            /* #Info importante: o manual, a regra */
    --int-fundo: linear-gradient(160deg, #0879AD 0%, #006590 55%, #003E5C 100%);
    --int-base: #006590;
    --int-tinta: #006590;
}
.central #suporte {                                             /* laranja de socorro: o pedido de ajuda (o cartão saiu em 26/10/2026; a seção fica) */
    --int-fundo: linear-gradient(160deg, #C2500F 0%, #A33E08 55%, #5E2204 100%);
    --int-base: #A33E08;
    --int-tinta: #A33E08;
}
.central :is(.ctl-cartao[href="#carreiras"], #carreiras) {      /* #Open for work: a carreira */
    --int-fundo: linear-gradient(160deg, #7354B8 0%, #5B3F99 55%, #2F1D5C 100%);
    --int-base: #5B3F99;
    --int-tinta: #5B3F99;
}
.central :is(.ctl-cartao[href="#whatsapp"], #whatsapp) {        /* o verde do WhatsApp */
    --int-fundo: linear-gradient(160deg, #1B8051 0%, #136640 55%, #0B3F27 100%);
    --int-base: #136640;
    --int-tinta: #136640;
}
.central :is(.ctl-cartao[href="#formatura"], #formatura) {      /* o dourado da conquista, escurecido para o branco ler */
    --int-fundo: linear-gradient(160deg, #9C6600 0%, #7A4E00 55%, #422A00 100%);
    --int-base: #7A4E00;
    --int-tinta: #7A4E00;
}
.central .ctl-cartao[href$="/local/dondeclaracao/index.php"] {   /* verde-petróleo (o do RH na carteirinha): o papel oficial, longe do verde do WhatsApp; branco 5,5:1 */
    --int-fundo: linear-gradient(160deg, #0F766E 0%, #0B5E58 55%, #053A36 100%);
    --int-base: #0B5E58;
    --int-tinta: #0B5E58;
}
.central .ctl-cartao:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 2px 4px rgba(7, 31, 58, .12),
            0 24px 48px -12px rgba(7, 31, 58, .40);
        text-decoration: none;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao:hover {
        transform: translateY(-4px);
    }
    .central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao:hover .icon {
        transform: translateY(-2px) scale(1.04);
    }
}
/* Ícones (Font Awesome com a classe .icon): sem margem própria; cada
   componente diz o tamanho. */
.central .icon {
    flex: none;
    margin: 0;
}
.central .ctl-cartao .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: 1.25rem;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}
.central .ctl-cartao strong {
    margin-top: 24px;
    color: #FFFFFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-cartao > span {
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
}
/* A seta diz que o cartão inteiro é o alvo, na altura do ícone. Só no
   painel: na fita, não. */
.central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao::after {
    content: "\f054";                     /* chevron-right */
    position: absolute;
    top: 40px;                            /* centro do quadro do ícone (24 + 24) menos meia linha */
    right: 24px;
    color: rgba(255, 255, 255, .72);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    line-height: 1rem;
    transition: transform 150ms ease, color 150ms ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao:hover::after {
        color: #FFFFFF;
        transform: translateX(4px);
    }
}
/* O cartão que sai da Central (a Declaração, em outra aba): a seta vira a
   de link externo. */
.central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao[target="_blank"]::after {
    content: "\f08e";                     /* arrow-up-right-from-square */
}
.central .ctl-inicio {
    display: none;                        /* a casa só existe na fita */
}

/* A fita (refeita em 20/10; o Marcelo achou a de pílulas "feia e mal
   organizada"): uma linha de abas de texto, de ponta a ponta da janela,
   grudada embaixo da barra. A casa na frente e três grupos separados por
   um fio: o curso (Calendário, Ementas, Docentes, Comunicações), a ajuda
   (Manual, WhatsApp, Ambientação) e o depois (Carreiras, Formatura; o
   Suporte saiu da fita em 26/10/2026). Sem ícone nas abas (eram onze cores lado a lado): a aba
   acesa é a do traço embaixo, na cor da seção. O nome longo do atalho
   encurta (.ctl-longo some). Onde não cabe, a fita rola de lado e o script
   traz a aba acesa para a vista. A .pagina corta o que passa da janela. */
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-hub {
    position: sticky;
    top: 60px;                            /* a barra é fixed de 60 */
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 64px;
    margin: 0 calc(50% - 50vw) 32px;
    padding: 0 calc(50vw - 50%);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: #FFFFFF;
    box-shadow: inset 0 -1px 0 #E3E7F0, 0 8px 16px -12px rgba(16, 39, 112, .16);
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-hub::-webkit-scrollbar {
    display: none;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-so-fita {
    display: flex;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartoes > li.ctl-so-painel {   /* o peso vence o display: flex dos li da fita */
    display: none;                        /* a Declaração não é seção: na fita, não */
}
.central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-linha, .ctl-vivos, .ctl-atalhos-titulo) {
    display: none;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartoes {
    display: contents;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartoes > li {
    display: flex;
    flex: none;
    align-items: stretch;
}
/* O fio entre os grupos (a ordem de 22/10): antes da Ambientação (começar
   no AVA), dos Horários (o curso) e da Carreiras (o depois; até 26/10/2026
   era antes do Suporte, que saiu da fita). */
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartoes > li:has(> :is([href="#ambientacao"], [href="#horarios"], [href="#carreiras"]))::before {
    content: "";
    flex: none;
    align-self: center;
    width: 1px;
    height: 24px;
    margin: 0 8px;
    background: #D5D8E2;
}
.central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-inicio, .ctl-cartao) {
    position: relative;
    display: inline-flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;                   /* só o anel do foco usa */
    background: none;
    box-shadow: none;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transform: none;
    transition: color 150ms ease;
}
/* O traço da aba: cinza ao passar o mouse, na cor da seção quando acesa. */
.central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-inicio, .ctl-cartao)::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background-color 150ms ease;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-inicio {
    margin-left: -12px;                   /* a casa alinha com a margem do conteúdo, não a aba */
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartao .icon {
    display: none;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-inicio .icon {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font-size: .875rem;
}
.central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-inicio, .ctl-cartao) strong {
    margin: 0;
    color: inherit;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-cartao > span, .ctl-cartao .ctl-longo, .ctl-inicio > span) {
    display: none;
}
.central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-inicio, .ctl-cartao):focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: -8px;                 /* dentro da aba: a fita corta o que passa da borda */
}
@media (hover: hover) {
    .central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-inicio, .ctl-cartao):hover {
        color: #102770;
    }
    .central:has(.ctl-secao:target, .ctl-secao :target) :is(.ctl-inicio, .ctl-cartao):hover::after {
        background: #D5D8E2;
    }
}
/* A seção aberta acende a própria aba. */
.central:has(#horarios:target, #horarios :target) .ctl-cartao[href="#horarios"],
.central:has(#calendario:target, #calendario :target) .ctl-cartao[href="#calendario"],
.central:has(#ementas:target, #ementas :target) .ctl-cartao[href="#ementas"],
.central:has(#docentes:target, #docentes :target) .ctl-cartao[href="#docentes"],
.central:has(#comunicacoes:target, #comunicacoes :target) .ctl-cartao[href="#comunicacoes"],
.central:has(#manual:target, #manual :target) .ctl-cartao[href="#manual"],
.central:has(#carreiras:target, #carreiras :target) .ctl-cartao[href="#carreiras"],
.central:has(#whatsapp:target, #whatsapp :target) .ctl-cartao[href="#whatsapp"],
.central:has(#formatura:target, #formatura :target) .ctl-cartao[href="#formatura"],
.central:has(#ambientacao:target, #ambientacao :target) .ctl-cartao[href="#ambientacao"] {
    color: #102770;
}
.central:has(#horarios:target, #horarios :target) .ctl-cartao[href="#horarios"]::after,
.central:has(#calendario:target, #calendario :target) .ctl-cartao[href="#calendario"]::after,
.central:has(#ementas:target, #ementas :target) .ctl-cartao[href="#ementas"]::after,
.central:has(#docentes:target, #docentes :target) .ctl-cartao[href="#docentes"]::after,
.central:has(#comunicacoes:target, #comunicacoes :target) .ctl-cartao[href="#comunicacoes"]::after,
.central:has(#manual:target, #manual :target) .ctl-cartao[href="#manual"]::after,
.central:has(#carreiras:target, #carreiras :target) .ctl-cartao[href="#carreiras"]::after,
.central:has(#whatsapp:target, #whatsapp :target) .ctl-cartao[href="#whatsapp"]::after,
.central:has(#formatura:target, #formatura :target) .ctl-cartao[href="#formatura"]::after,
.central:has(#ambientacao:target, #ambientacao :target) .ctl-cartao[href="#ambientacao"]::after {
    background: var(--int-base);
}


/* --------------------------------------------------------------------------
   4. AS SEÇÕES — fechadas até a âncora chamar                                 
   Sem parágrafo de introdução (regra de 19/10). Exceções: Ambientação e
   Docentes (23/10/2026: diz o que a seção junta, da direção à tutoria).
   -------------------------------------------------------------------------- */
.central .ctl-secao {
    display: none;
}
.central .ctl-secao:target,
.central .ctl-secao:has(:target) {
    display: block;
}
/* A cabeça da seção (20/10): o título no corpo da pergunta das etapas do
   portão, com o ícone no quadro azul da marca (o WhatsApp no verde dele).
   O texto que abre a seção fica na linha de 720. */
.central .ctl-secao-cabeca {
    margin-bottom: 32px;
}
.central .ctl-secao-cabeca h2 {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.central .ctl-secao-cabeca h2 .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--int-base);
    background-image:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 12px 24px -12px rgba(7, 31, 58, .48);
    color: #FFFFFF;
    font-size: 1.25rem;
    letter-spacing: 0;
}
.central .ctl-secao-cabeca p {
    max-width: 720px;
    margin-top: 16px;
    font-size: 1.125rem;
    line-height: 2rem;
}
/* Os subtítulos (os grupos de Docentes, Agentes de integração, Os mais
   lidos): o peso do portão, um corpo abaixo da cabeça. */
.central :is(.ctl-secao > h3, .ctl-ementas-curso > h3, .ctl-rumo > h3, .ctl-docs-grupo > h3) {
    margin: 48px 0 16px;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-secao-cabeca + h3,
.central .ctl-ementas-curso > h3 {
    margin-top: 0;                        /* só um curso aparece por vez: o título dele abre a seção */
}
.central .ctl-rotulo {
    margin: 0 0 16px;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* As listas claras das seções (ementas, docentes, manual, suporte, regras):
   uma superfície só, branca, com fio leve e sombra baixa; ao passar o mouse,
   sobe 2, como no portão. O ícone fica num quadro azul-claro. */
.central :is(.ctl-ementa, .ctl-prof-cartao, .ctl-atalho, .ctl-regras-bloco, .ctl-msg, .ctl-pendente,
             .ctl-passos, .ctl-docs, .ctl-faq-grupo, .ctl-manual-artigo, .ctl-guia, .ctl-rumo-bloco, .ctl-artigo, .ctl-salarios, .ctl-tendencias > li, .ctl-ia) {
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
@media (hover: hover) {
    .central :is(.ctl-ementa, .ctl-atalho, .ctl-guia, .ctl-artigo, .ctl-manual-artigo):hover {
        border-color: #C9D0E0;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central :is(.ctl-ementa, .ctl-atalho, .ctl-guia, .ctl-artigo, .ctl-manual-artigo):hover {
        transform: translateY(-2px);
    }
}
@media (max-width: 767.98px) {
    .central .ctl-secao-cabeca {
        margin-bottom: 24px;
    }
    .central .ctl-secao-cabeca h2 {
        min-height: 40px;
        font-size: 1.75rem;
        line-height: 2.5rem;
        letter-spacing: -.01em;
    }
    .central .ctl-secao-cabeca h2 .icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    .central .ctl-secao-cabeca p {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .central :is(.ctl-secao > h3, .ctl-ementas-curso > h3) {
        margin-top: 32px;
    }
}


/* --------------------------------------------------------------------------
   5. CALENDÁRIO (refeito em 23/10/2026) — na gramática dos Horários
   O script monta .ctl-cal: a faixa da próxima aula, a barra (‹ Hoje ›, o
   período e Semana | Mês) e o corpo. A lista de datas, as tabelas de grade
   e a legenda das cores são a fonte e só aparecem sem o script.
   Tipos (Marcelo, 20/10 e 23/10/2026): cada um com cor e ícone. As cores
   moram só no bloco "Os tipos", logo abaixo; a regra que dá o tipo e o
   ícone, no central.js (tipoEvento, ICONE).
   -------------------------------------------------------------------------- */
.central.ctl-js .ctl-meses,
.central.ctl-js .ctl-grades {
    display: none;
}
.central .ctl-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 16px;
    color: #3A4468;
    font-size: .8125rem;
    line-height: 1.5rem;
}
.central .ctl-legenda[hidden] {
    display: none;                        /* com o script, o tipo vem escrito no evento */
}
.central .ctl-legenda li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.central .ctl-legenda .ctl-legenda-aula {
    display: none;                        /* o traço era da visão Mês antiga */
}
.central .ctl-ponto {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.central .ctl-cor-info { background: #0092CB; }
.central .ctl-cor-cob  { background: #0054A6; }
.central .ctl-cor-inc  { background: #1E8E5A; }
.central .ctl-cor-emp  { background: #674EA7; }
.central .ctl-cor-rec  { background: #C96F00; }
/* A data com maiúscula (Comunicações e pop-up). A borda colorida das
   mensagens (.ctl-borda-*) saiu em 26/10/2026: a faixa do tipo a substitui. */
.central .ctl-msg-data::first-letter,
.central .ctl-dlg-data::first-letter {
    text-transform: uppercase;
}

/* A faixa da próxima aula: o cartão escuro dos Horários (degradê, grade
   apagada, vidro no ícone), numa linha só. A luz fica na ponta direita,
   longe do texto: no ponto mais claro do degradê, embaixo do texto, o
   branco dá 4,57:1. */
.central .ctl-cal-prox {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    margin: 0 0 24px;
    padding: 16px;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(40% 140% at 100% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-cal-prox:empty {
    display: none;
}
.central .ctl-cal-prox-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .24);
    font-size: 1rem;
}
.central .ctl-cal-prox-texto {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;                  /* baseline com dois corpos dava linha de 25 e saía do grid */
    gap: 0 16px;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .ctl-cal-prox-rotulo {
    font-size: .875rem;
    font-weight: 600;
}
.central .ctl-cal-prox-quando {
    font-weight: 600;
}
.central .ctl-cal-prox-texto strong {
    font-weight: 800;
}
.central .ctl-cal-prox-acoes {
    display: flex;
    flex: none;
    gap: 8px;
}
.central .ctl-cal-prox :focus-visible {
    outline-color: #FFFFFF;               /* o anel azul some no degradê */
}
/* "Ver na semana": o botão de vidro do Trocar do herói. */
.central .ctl-cal-prox-ver {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 16px -8px rgba(0, 0, 0, .40);
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.central .ctl-cal-prox-entrar {
    height: 40px;
    padding: 0 16px;
    font-size: .875rem;
    font-weight: 700;
}
.central .ctl-cal-prox-entrar.is-aceso {
    background: #D92D20;                  /* a sala abriu: o vermelho dos Horários */
}

/* A barra: [‹ | Hoje | ›], o período e [Semana | Mês]. O contorno dos
   grupos é um outline para dentro: fica por cima do fundo dos botões. */
.central .ctl-cal-barra {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.central :is(.ctl-cal-nav, .ctl-cal-vistas) {
    display: inline-flex;
    flex: none;
    height: 40px;
    border-radius: 8px;
    background: #FFFFFF;
    outline: 1px solid #D5D8E2;
    outline-offset: -1px;
}
.central :is(.ctl-cal-nav, .ctl-cal-vistas) button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}
.central .ctl-cal-seta {
    width: 40px;
}
.central .ctl-cal-seta:first-child {
    border-radius: 8px 0 0 8px;
}
.central .ctl-cal-seta:last-child {
    border-radius: 0 8px 8px 0;
}
.central .ctl-cal-seta .icon {
    margin: 0;
    font-size: .75rem;
}
.central .ctl-cal-nav .ctl-cal-hoje {
    position: relative;
    padding: 0 16px;
    box-shadow: inset 1px 0 0 #D5D8E2, inset -1px 0 0 #D5D8E2;
    color: #102770;
}
/* Longe de hoje, o ponto na cor do curso. */
.central .ctl-cal-hoje-ponto {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cur-a, #0059FB);
    opacity: 0;
    transform: scale(.5);
    transition: opacity 150ms ease, transform 150ms cubic-bezier(.23, 1, .32, 1);
}
.central .ctl-cal-hoje.is-longe .ctl-cal-hoje-ponto {
    opacity: 1;
    transform: none;
}
.central .ctl-cal-titulo {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 16px;
    min-width: 0;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-cal-titulo span {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
}
/* O segmentado: botões de largura igual e o indicador desliza por baixo. */
.central .ctl-cal-vistas {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, 80px);
}
.central .ctl-cal-vistas-ind {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 6px;
    background: #102770;
    transition: transform 200ms cubic-bezier(.77, 0, .175, 1);
}
.central .ctl-cal[data-vista="mes"] .ctl-cal-vistas-ind {
    transform: translateX(100%);
}
.central .ctl-cal-vistas button {
    position: relative;                   /* acima do indicador */
    border-radius: 8px;
}
.central .ctl-cal-vistas button[aria-pressed="true"] {
    color: #FFFFFF;
}
.central .ctl-cal-corpo {
    transform-origin: 50% 0;
}

/* Os tipos (Marcelo, 23/10/2026: "cores em férias, recesso, etc com ícones
   também"). Para trocar uma cor, troque aqui; nada mais no CSS tem o hex.
     --ctl-tipo-fundo e --ctl-tipo-tinta  o chip, a barra do Mês e a pílula
                                          da linha do dia sem aula (o texto e
                                          o ícone vão na tinta)
     --ctl-tipo-hover                     o fundo com o mouse em cima
     --ctl-tipo-claro                     o dia sem aula na grade do Mês e o
                                          bloco calmo da semana sem aula
     --ctl-tipo-borda                     o contorno da barra do Mês (sobre o
                                          dia pintado, o fundo sozinho sumia)
                                          e do bloco calmo
     --ctl-tipo-ponto                     a marca do celular e o ponto da aula
                                          no Mês
     --ctl-tipo-tom                       o texto do bloco calmo
   Todo tipo define os sete, mesmo quando ponto e tom repetem a tinta: a
   variável herda, e o ponto do Feriado dentro do dia de prova do celular
   (25/01) saía no âmbar da Prova (Claude, 23/10/2026).
   Claro, borda e hover saem do par: o claro é o fundo a 50% com o branco, a
   borda é 25% da tinta no fundo e o hover, 8%. Todo par texto/fundo passa
   de 4,5:1 e de APCA Lc 60; a tabela está no relatório do calendário de
   23/10/2026 (docs/relatorio-calendario-2026-10-23.md).
   Desde 26/10/2026 as mesmas variáveis pintam a faixa do tipo nos cartões
   de Comunicações (.ctl-mensagens): a cor do tipo é uma só. */
.central :is(.ctl-cal, .ctl-mensagens) .is-prova    { --ctl-tipo-fundo: #A16100; --ctl-tipo-tinta: #FFFFFF; --ctl-tipo-hover: #8A5300; --ctl-tipo-claro: #FFF7EB; --ctl-tipo-borda: #F2D4A6; --ctl-tipo-ponto: #A16100; --ctl-tipo-tom: #7A4A00; }
.central :is(.ctl-cal, .ctl-mensagens) .is-revisao   { --ctl-tipo-fundo: #FFF4E0; --ctl-tipo-tinta: #7A4A00; --ctl-tipo-hover: #F4E6CE; --ctl-tipo-claro: #FFFAF0; --ctl-tipo-borda: #DECAA8; --ctl-tipo-ponto: #7A4A00; --ctl-tipo-tom: #7A4A00; }
.central :is(.ctl-cal, .ctl-mensagens) .is-feriado   { --ctl-tipo-fundo: #FDECEF; --ctl-tipo-tinta: #A3123A; --ctl-tipo-hover: #F6DBE1; --ctl-tipo-claro: #FEF6F7; --ctl-tipo-borda: #E7B6C2; --ctl-tipo-ponto: #A3123A; --ctl-tipo-tom: #A3123A; }
.central :is(.ctl-cal, .ctl-mensagens) .is-recesso   { --ctl-tipo-fundo: #E6F5F2; --ctl-tipo-tinta: #0F6B5C; --ctl-tipo-hover: #D5EAE6; --ctl-tipo-claro: #F3FAF9; --ctl-tipo-borda: #B0D3CD; --ctl-tipo-ponto: #0F6B5C; --ctl-tipo-tom: #0F6B5C; }
.central :is(.ctl-cal, .ctl-mensagens) .is-ferias    { --ctl-tipo-fundo: #E7F5EC; --ctl-tipo-tinta: #17643F; --ctl-tipo-hover: #D6E9DE; --ctl-tipo-claro: #F3FAF6; --ctl-tipo-borda: #B3D1C1; --ctl-tipo-ponto: #17643F; --ctl-tipo-tom: #17643F; }
.central :is(.ctl-cal, .ctl-mensagens) .is-reposicao,
.central :is(.ctl-cal, .ctl-mensagens) .is-aovivo    { --ctl-tipo-fundo: #EAF1FF; --ctl-tipo-tinta: #0047C9; --ctl-tipo-hover: #D7E3FB; --ctl-tipo-claro: #F5F8FF; --ctl-tipo-borda: #B0C7F2; --ctl-tipo-ponto: #0047C9; --ctl-tipo-tom: #0047C9; }
.central :is(.ctl-cal, .ctl-mensagens) .is-formatura { --ctl-tipo-fundo: #F1ECFA; --ctl-tipo-tinta: #4B3A82; --ctl-tipo-hover: #E4DEF0; --ctl-tipo-claro: #F8F6FD; --ctl-tipo-borda: #C8C0DC; --ctl-tipo-ponto: #4B3A82; --ctl-tipo-tom: #4B3A82; }
.central :is(.ctl-cal, .ctl-mensagens) .is-sem       { --ctl-tipo-fundo: #EEF1F7; --ctl-tipo-tinta: #3A4468; --ctl-tipo-hover: #E3E7F0; --ctl-tipo-claro: #F1F3F8; --ctl-tipo-borda: #D5D8E2; --ctl-tipo-ponto: #5A668C; --ctl-tipo-tom: #3A4468; }
.central :is(.ctl-cal, .ctl-mensagens) .is-aviso     { --ctl-tipo-fundo: #FFFFFF; --ctl-tipo-tinta: #102770; --ctl-tipo-hover: #F1F3F8; --ctl-tipo-claro: #F1F3F8; --ctl-tipo-borda: #D5D8E2; --ctl-tipo-ponto: #5A668C; --ctl-tipo-tom: #102770; }
/* Na barra do Mês, o Sem aula fica um tom abaixo: sobre o dia cinza
   (#F1F3F8), o #EEF1F7 sumia (#3A4468 no #E3E7F0: 7,7:1, Lc 78). */
.central .ctl-cal .ctl-cal-barra-ev.is-sem { --ctl-tipo-fundo: #E3E7F0; --ctl-tipo-hover: #D5D8E2; }

/* Os eventos: o chip da semana e do dia (40; 48 no celular), a barra do mês (24). */
.central :is(.ctl-cal-ev, .ctl-cal-barra-ev) {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: var(--ctl-tipo-fundo);
    color: var(--ctl-tipo-tinta);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.central .ctl-cal-ev {
    height: 40px;
    padding: 0 16px;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-cal-ev-miolo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.central .ctl-cal-ev-data {
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.central .ctl-cal-ev-titulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.central :is(.ctl-cal-ev, .ctl-cal-barra-ev).is-prova {
    font-weight: 700;                     /* o branco no âmbar, em 700 (4,97:1, Lc 79) */
}
/* O contorno: o do Aviso no chip, e o de todo tipo claro na barra do Mês. */
.central .ctl-cal-ev.is-aviso,
.central .ctl-cal-barra-ev:not(.is-prova) {
    box-shadow: inset 0 0 0 1px var(--ctl-tipo-borda);
}
/* O ícone do tipo, à esquerda, na cor do texto (o miolo é aria-hidden). */
.central :is(.ctl-cal-ev, .ctl-cal-barra-ev, .ctl-cal-livre-ev) .icon {
    flex: none;
    margin: 0;
    color: inherit;
    font-size: .75rem;
}

/* A Semana: os avisos dela numa faixa e as linhas dos Horários. */
.central .ctl-cal-nesta {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 16px;
}
.central .ctl-cal-nesta-rotulo {
    flex: none;
    color: #5A668C;
    font-size: .875rem;
    line-height: 2.5rem;                  /* na linha dos chips */
    font-weight: 700;
}
.central .ctl-cal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.central .ctl-cal-chips li {
    min-width: 0;
    max-width: 100%;
}
.central .ctl-cal .ctl-hor-dia,
.central .ctl-cal-calmo {
    position: relative;                   /* o anel do dia pedido */
}
/* O docente na linha é link (Docentes aberta): no Calendário, alvo de 40
   (48 no celular). Os Horários ficam como estão. */
.central .ctl-cal a.ctl-hor-prof {
    min-height: 40px;
}
.central .ctl-cal .ctl-hor-dia:focus {
    outline: 0;                           /* foco programático: quem marca o dia é o anel */
}
.central .ctl-cal .ctl-hor-dia:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
/* A linha do dia sem aula: o título do evento vira a pílula do tipo, com o
   ícone (só no Calendário; nos Horários, a linha fica como está). */
.central .ctl-cal .ctl-hor-livre .ctl-cal-livre-ev {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--ctl-tipo-fundo);
    color: var(--ctl-tipo-tinta);
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
    white-space: nowrap;
}
.central .ctl-cal .ctl-hor-livre .ctl-cal-livre-ev.is-aviso {
    box-shadow: inset 0 0 0 1px var(--ctl-tipo-borda);
}
/* Semana inteira sem aula: um bloco calmo só, no tom do tipo do evento
   (recesso, férias, prova); sem tipo, o cinza. */
.central .ctl-cal-calmo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #F5F7FB;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-cal-calmo p {
    display: flex;
    flex-direction: column;
}
.central .ctl-cal-calmo strong {
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-cal-calmo-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #E3E7F0;
    color: #3A4468;
    font-size: 1rem;
}
.central .ctl-cal-calmo:is(.is-prova, .is-revisao, .is-feriado, .is-recesso, .is-ferias, .is-reposicao, .is-aovivo, .is-formatura) {
    border-color: var(--ctl-tipo-borda);
    background: var(--ctl-tipo-claro);
    color: var(--ctl-tipo-tom, var(--ctl-tipo-tinta));
}
.central .ctl-cal-calmo:is(.is-prova, .is-revisao, .is-feriado, .is-recesso, .is-ferias, .is-reposicao, .is-aovivo, .is-formatura) .ctl-cal-calmo-icone {
    background: var(--ctl-tipo-fundo);
    color: var(--ctl-tipo-tinta);
}
/* O dia pedido: o anel na cor do curso acende e apaga uma vez (480ms). */
.central .ctl-cal .is-alvo::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--cur-a, #0059FB);
    border-radius: 14px;
    pointer-events: none;
    animation: ctl-alvo 480ms cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes ctl-alvo {
    0%   { opacity: 0; transform: scale(1.02); }
    35%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes ctl-alvo-calmo {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}

/* O Mês no desktop, no jeito do Google Agenda (23/10/2026): de domingo a
   sábado, com os dois mais estreitos, nas duas pontas (Marcelo, 23/10: "a
   semana começa no DOMINGO"); toda semana com a mesma altura, 128: o número
   (40), três lugares de 24 com 4 entre eles (as barras e as aulas, central.js
   CABE) e 8 no fim. A barra vai na linha 2, 4 ou 6 do grid; a lista das
   aulas desce 28 por faixa de barra que cobre o dia (--ctl-faixas). */
.central :is(.ctl-cal-mes-cab, .ctl-cal-mes-semana) {
    display: grid;
    grid-template-columns: minmax(0, .6fr) repeat(5, minmax(0, 1fr)) minmax(0, .6fr);
}
.central .ctl-cal-mes-semana {
    grid-template-rows: 40px 24px 4px 24px 4px 24px 8px;
}
.central .ctl-cal-mes-cab {
    margin: 0 0 8px;
}
.central .ctl-cal-mes-cab span {
    padding: 0 8px;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;                   /* em cima do número, que é centrado */
    text-transform: uppercase;
}
.central .ctl-cal-mes-semanas {
    overflow: hidden;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central .ctl-cal-mes-dia {
    display: flex;
    flex-direction: column;
    grid-row: 1 / -1;
    align-items: center;
    min-width: 0;
    padding: 0 4px;
    box-shadow: inset -1px 0 0 #E3E7F0;
    cursor: pointer;
}
.central .ctl-cal-mes-semana + .ctl-cal-mes-semana .ctl-cal-mes-dia {
    box-shadow: inset -1px 0 0 #E3E7F0, inset 0 1px 0 #E3E7F0;
}
.central .ctl-cal-mes-dia:nth-child(7) {
    box-shadow: none;
}
.central .ctl-cal-mes-semana + .ctl-cal-mes-semana .ctl-cal-mes-dia:nth-child(7) {
    box-shadow: inset 0 1px 0 #E3E7F0;
}
.central .ctl-cal-mes-dia.is-fora {
    background: #FAFBFD;
}
/* O dia sem aula: o fundo bem claro do tipo do evento que tirou a aula. */
.central .ctl-cal-mes-dia.is-sem-aula {
    background: var(--ctl-tipo-claro);
}
.central .ctl-cal-mes-semanas > .ctl-cal-mes-semana > .ctl-cal-mes-dia.is-hoje {
    box-shadow: inset 0 0 0 2px #0059FB;
}
/* O número: alvo de 40, com o círculo de 24 no meio (o azul cheio é hoje). */
.central .ctl-cal-mes-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.central .ctl-cal-mes-num span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #102770;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color 150ms ease;
}
.central :is(.is-fora, .is-passado) .ctl-cal-mes-num span {
    color: #646E92;
}
.central .ctl-cal-mes-dia.is-hoje .ctl-cal-mes-num span {
    background: #0059FB;
    color: #FFFFFF;
}
/* As aulas do dia, uma linha cada: o ponto, a hora e a disciplina, que se
   corta com reticências (o nome inteiro vai no title e no rótulo do número).
   A linha não é botão: o clique é da célula. Na semana de revisão, o ponto e
   a matéria no tom da Revisão. Em 12px, o nome em 500 e a hora em 700, com
   4 de respiro e 4 entre o ponto, a hora e o nome: em 13px/600, com 8 de
   respiro, o nome cortava cedo (Marcelo, 23/10/2026; as medidas estão no
   relatório do calendário). */
.central .ctl-cal-mes-aulas {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 4px;
    min-width: 0;
    margin: calc(var(--ctl-faixas, 0) * 28px) 0 0;
}
.central .ctl-cal-mes-aula {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 24px;
    padding: 0 4px;
    border-radius: 6px;
    color: #3A4468;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms ease;
}
.central .ctl-cal-mes-ponto {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0059FB;
}
.central .ctl-cal-mes-aula strong {
    flex: none;
    color: #102770;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.central .ctl-cal-mes-aula span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.central .ctl-cal-mes-aula.is-revisao span {
    color: var(--ctl-tipo-tinta);
}
.central .ctl-cal-mes-aula.is-revisao .ctl-cal-mes-ponto {
    background: var(--ctl-tipo-ponto, var(--ctl-tipo-tinta));
}
/* O dia que passou: a aula em cinza, ainda legível. Em 12px/500, o #5A668C
   (5,65:1, Lc 78 no branco), não o #646E92 dos 13px (Lc 75). */
.central .ctl-cal-mes-dia.is-passado .ctl-cal-mes-aula :is(strong, span) {
    color: #5A668C;
}
.central .ctl-cal-mes-dia.is-passado .ctl-cal-mes-ponto {
    background: #A3ABC4;
}
.central .ctl-cal-barra-ev,
.central .ctl-cal-mes-mais {
    position: relative;
    z-index: 1;                           /* por cima da célula, que responde no vazio */
    height: 24px;
    margin: 0 4px;
    padding: 0 8px;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-cal-barra-ev {
    overflow: hidden;
}
.central .ctl-cal-barra-ev .ctl-cal-ev-miolo {
    gap: 4px;
}
.central .ctl-cal-barra-ev.is-aviso {
    font-weight: 600;
}
/* A barra cortada pela virada da semana tem o canto reto desse lado. */
.central .ctl-cal-barra-ev.is-corta-ini {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.central .ctl-cal-barra-ev.is-corta-fim {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* "+n mais": o que não coube no dia; leva à Semana dele. */
.central .ctl-cal-mes-mais {
    justify-self: start;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #3A4468;
    white-space: nowrap;
    cursor: pointer;
}

/* O Mês no celular: um botão por dia, marcas no lugar das barras (o traço
   da aula e até dois pontos na cor do tipo), o dia sem aula no claro do
   tipo e o dia escolhido embaixo. */
.central .ctl-cal-mes.is-celular .ctl-cal-mes-cab,
.central .ctl-cal-mgrade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.central .ctl-cal-mes.is-celular .ctl-cal-mes-cab span {
    padding: 0;
    letter-spacing: .04em;
    text-align: center;
}
.central .ctl-cal-mdia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #102770;
    cursor: pointer;
}
.central .ctl-cal-mdia::after {           /* o escolhido: anel de 2px */
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #102770;
    border-radius: 8px;
    opacity: 0;
    transform: scale(.92);
    transition: opacity 150ms ease, transform 150ms cubic-bezier(.23, 1, .32, 1);
    pointer-events: none;
}
.central .ctl-cal-mdia.is-escolhido::after {
    opacity: 1;
    transform: none;
}
/* O dia sem aula: o fundo do tipo do evento que tirou a aula. Aqui a grade
   fica no fundo da página (#F5F7FB), não no branco do Mês do desktop, e o
   claro sumia nele; vai o fundo do chip (na Prova, que é sólida, o claro). */
.central .ctl-cal-mdia.is-sem-aula {
    background: var(--ctl-tipo-fundo);
}
.central .ctl-cal-mdia.is-sem-aula.is-prova {
    background: var(--ctl-tipo-claro);
}
.central .ctl-cal-mdia.is-fora {
    color: #646E92;
}
/* Fora do mês e sem aula: o #646E92 dava 4,4:1 no fundo do tipo; o #5A668C, 5:1. */
.central .ctl-cal-mdia.is-fora.is-sem-aula {
    color: #5A668C;
}
.central .ctl-cal-mdia-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.central .ctl-cal-mdia.is-hoje .ctl-cal-mdia-num {
    background: #0059FB;
    color: #FFFFFF;
}
.central .ctl-cal-mdia-marcas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 8px;
}
/* As marcas: o traço azul da aula e o ponto de 8 na cor do tipo (o Aviso
   é o anel, como o contorno do chip). */
.central :is(.ctl-cal-mdia-marcas, .ctl-cal-mini-leg) i {
    display: block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ctl-tipo-ponto, var(--ctl-tipo-tinta));
}
.central :is(.ctl-cal-mdia-marcas, .ctl-cal-mini-leg) .is-aula {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: #0059FB;
}
/* Com as três marcas (a aula e dois pontos: o sábado 30/01/2027), o traço da
   aula encolhe para 8: na célula de 45,6px o conjunto encostava na borda do
   dia escolhido (Claude, 23/10/2026). */
.central .ctl-cal-mdia-marcas .is-aula:nth-last-child(3) {
    width: 8px;
}
/* O anel: o Aviso (o contorno do chip) e a Revisão, que no ponto cheio
   não se separava da Prova (#7A4A00 ao lado do #A16100, semanas vizinhas). */
.central :is(.ctl-cal-mdia-marcas, .ctl-cal-mini-leg) :is(.is-aviso, .is-revisao) {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--ctl-tipo-ponto, var(--ctl-tipo-tinta));
}
.central .ctl-cal-mini-leg {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    margin: 8px 0 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1.5rem;
}
.central .ctl-cal-mini-leg span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.central .ctl-cal-dia-painel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 0;
}
.central .ctl-cal-dia-titulo {
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
}
.central .ctl-cal-dia-painel .ctl-cal-chips {
    flex-direction: column;
}
.central .ctl-cal-dia-painel .ctl-hor-dia-nome {
    display: none;                        /* o dia já está no título do painel */
}
.central .ctl-cal-dia-livre {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #E3E7F0;  /* no fundo da página, o cinza claro sumia */
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* O toque: o que se aperta cede 3% em 100ms. O hover escurece o fundo em
   150ms, só com mouse. */
.central :is(.ctl-cal-nav, .ctl-cal-vistas) button,
.central :is(.ctl-cal-ev, .ctl-cal-barra-ev, .ctl-cal-mes-mais, .ctl-cal-prox-ver, .ctl-cal-mdia) {
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.central :is(.ctl-cal-nav, .ctl-cal-vistas) button:active,
.central :is(.ctl-cal-ev, .ctl-cal-barra-ev, .ctl-cal-mes-mais, .ctl-cal-prox-ver, .ctl-cal-mdia):active {
    transform: scale(.97);
}
@media (hover: hover) and (pointer: fine) {
    .central .ctl-cal-nav button:hover {
        background-color: #F1F3F8;
    }
    .central .ctl-cal-vistas button[aria-pressed="false"]:hover {
        background-color: #EEF1F7;
        box-shadow: inset 0 0 0 4px #FFFFFF;     /* o fundo do hover do tamanho do indicador */
    }
    .central :is(.ctl-cal-ev, .ctl-cal-barra-ev):hover {
        background-color: var(--ctl-tipo-hover);
    }
    .central .ctl-cal-mes-mais:hover {
        background-color: #EEF1F7;
    }
    /* A aula do Mês não é botão, mas a célula é: o fundo leve diz onde o
       clique vai cair. */
    .central .ctl-cal-mes-aula:hover {
        background-color: #F1F3F8;
    }
    .central .ctl-cal-mes-dia:not(.is-hoje):hover .ctl-cal-mes-num span {
        background-color: #EEF1F7;
    }
    .central .ctl-cal-prox-ver:hover {
        background-color: rgba(255, 255, 255, .12);
    }
    .central .ctl-cal-prox-entrar.is-aceso:hover {
        background: #B42318;
    }
}
@media (prefers-reduced-motion: reduce) {
    .central .ctl-cal .is-alvo::after {
        animation-name: ctl-alvo-calmo;          /* o anel só acende e apaga, sem mudar de tamanho */
    }
    .central .ctl-cal-mdia::after {
        transform: none;
    }
}

/* Celular: a barra em duas linhas (o período em cima), os controles com 48
   e a faixa "Nesta semana" em coluna, de chips com a largura toda. */
@media (max-width: 767.98px) {
    .central .ctl-cal-prox {
        flex-wrap: wrap;
        align-items: flex-start;          /* o ícone na altura da primeira linha */
    }
    .central .ctl-cal-prox-texto {
        flex-basis: calc(100% - 56px);
        flex-direction: column;
        align-items: flex-start;
    }
    .central .ctl-cal-prox-acoes {
        width: 100%;
    }
    .central .ctl-cal-prox-acoes > * {
        flex: 1 1 0;
        height: 48px;
        justify-content: center;
    }
    .central .ctl-cal-barra {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        gap: 16px 8px;
    }
    .central .ctl-cal-titulo {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .central :is(.ctl-cal-nav, .ctl-cal-vistas),
    .central :is(.ctl-cal-nav, .ctl-cal-vistas) button {
        height: 48px;
    }
    .central .ctl-cal-seta {
        width: 48px;
    }
    .central .ctl-cal-vistas {
        grid-template-columns: repeat(2, 72px);
    }
    .central .ctl-cal-nesta {
        flex-direction: column;
        gap: 8px;
    }
    .central .ctl-cal-nesta-rotulo {
        line-height: 1.5rem;
    }
    .central .ctl-cal-chips {
        flex-direction: column;
        width: 100%;
    }
    .central .ctl-cal-ev {
        width: 100%;
        height: 48px;
    }
    .central .ctl-cal a.ctl-hor-prof {
        min-height: 48px;
    }
}


/* --------------------------------------------------------------------------
   6. CHIPS DA RÉGUA — as 5 categorias                                         
   -------------------------------------------------------------------------- */
.central .ctl-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
    white-space: nowrap;
}
.central .ctl-chip-info { background: #0092CB; }
.central .ctl-chip-cob  { background: #0054A6; }
.central .ctl-chip-inc  { background: #1E8E5A; }
.central .ctl-chip-emp  { background: #674EA7; }
.central .ctl-chip-rec  { background: #C96F00; }


/* --------------------------------------------------------------------------
   7. BOTÕES                                                                   
   Primário azul 40 (48 nos formulários), secundário contorno, "Entrar na
   aula" 32 dentro da aula, convite do WhatsApp verde 48.
   -------------------------------------------------------------------------- */
.central .ctl-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.central .ctl-botao .icon {
    margin: 0;
}
.central .ctl-botao:focus-visible {
    background: #0047C9;
    border-color: #0047C9;
    color: #FFFFFF;
}
.central .ctl-botao-sec {
    border-color: #D5D8E2;
    background: #FFFFFF;
    color: #102770;
}
.central .ctl-botao-sec:focus-visible {
    border-color: #0059FB;
    background: #FFFFFF;
    color: #0059FB;
}
.central .ctl-botao:disabled {
    opacity: .45;
    cursor: default;
}
@media (hover: hover) {
    .central .ctl-botao:not(:disabled):hover {
        background: #0047C9;
        border-color: #0047C9;
        color: #FFFFFF;
        text-decoration: none;
    }
    .central .ctl-botao-sec:not(:disabled):hover {
        background: #FFFFFF;
        border-color: #0059FB;
        color: #0059FB;
    }
}
.central .ctl-meet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.central .ctl-meet::before {
    content: "\f03d";                     /* video */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
}
@media (hover: hover) {
    .central .ctl-meet:hover {
        background: #0047C9;
        color: #FFFFFF;
        text-decoration: none;
    }
}
.central .ctl-botao-zap {
    height: 48px;
    padding: 0 24px;
    border-color: #1B8051;
    background: #1B8051;
    font-size: 1rem;
}
.central .ctl-botao-zap .icon {
    font-size: 1.25rem;
}
@media (hover: hover) {
    .central .ctl-botao-zap:hover {
        border-color: #136640;
        background: #136640;
    }
}
.central .ctl-pendente {
    display: flow-root;
    margin: 0;
    padding: 15px 23px;
    border: 1px solid #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
    line-height: 1.5rem;
}


/* --------------------------------------------------------------------------
   8. EMENTAS — por curso; cada disciplina abre o PDF em pop-up
   Três por linha no miolo de 1200, duas no tablet, uma no celular.
   -------------------------------------------------------------------------- */
.central .ctl-ementas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 1024px) {
    .central .ctl-ementas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.central .ctl-ementa {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "ic nome selo" "ic acao selo";
    align-items: center;
    column-gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 96px;
    margin: 0;
    padding: 23px;
    text-align: left;
    cursor: pointer;
}
.central .ctl-ementa::before {
    content: "\f1c1";                     /* file-pdf */
    grid-area: ic;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25rem;
}
.central .ctl-ementa strong {
    grid-area: nome;
    align-self: end;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-wrap: balance;
}
.central .ctl-ementa span {
    grid-area: acao;
    align-self: start;
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-ementa small {
    grid-area: selo;
    align-self: start;
    padding: 0 8px;
    border-radius: 999px;
    background: #FFF7EB;
    color: #7A4A00;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}
.central .ctl-ementa:focus-visible {
    border-color: #0059FB;
}


/* --------------------------------------------------------------------------
   9. DOCENTES — na ordem da hierarquia (refeita em 23/10/2026, no layout
   aprovado pelo Marcelo): direção e coordenação, os professores da turma,
   os outros professores do curso e a tutoria.
   Quem dá aula para a turma é crachá (faixa na cor do curso, foto,
   disciplina e dia da aula), na ordem da semana: é quem o aluno procura.
   O resto fica em linha compacta. Quem tem currículo abre o pop-up pelo
   cartão inteiro. O cargo em caixa normal (a caixa alta saiu em 20/10:
   lia como rótulo de sistema). Os grupos, a faixa, a foto e o botão do
   currículo saem do central.js (11. DOCENTES).
   -------------------------------------------------------------------------- */

/* ---- grupos (o título é o das seções, seção 4) -------------------------- */
.central #docentes .ctl-docs-grupo.is-primeiro > h3 {
    margin-top: 0;                        /* a cabeça da seção já deu os 32 */
}
.central #docentes .ctl-crachas,
.central #docentes .ctl-pessoas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
/* O que ainda falta não vai ao ar: o currículo a enviar (data-pendente) não
   aparece, e o cartão sem nome (o central.js marca .is-sem-nome) some. Um
   nível a mais que as regras de crachá e de linha compacta, que dão display
   ao cartão e ao currículo mais abaixo. */
.central #docentes .ctl-prof-cartao .ctl-prof-cv[data-pendente],
.central #docentes .ctl-docs-grupo .ctl-prof-cartao.is-sem-nome {
    display: none;
}

/* ---- o cartão: a superfície clara da seção 4, cargo, nome e foto -------- */
.central .ctl-prof-cartao {
    position: relative;
    transition:
        transform 200ms cubic-bezier(.23, 1, .32, 1),
        box-shadow 200ms cubic-bezier(.23, 1, .32, 1),
        border-color 200ms cubic-bezier(.23, 1, .32, 1);
}
.central .ctl-prof-cartao > div {
    min-width: 0;
}
.central .ctl-papel {
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-prof-cartao h4 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-prof-cv,
.central .ctl-prof-disc {
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-prof-disc {
    color: #5A668C;
}
/* A foto: a do arquivo por cima das iniciais (o central.js põe as duas;
   sem arquivo, a imagem some e ficam as iniciais). Sem script, o ícone. */
.central .ctl-foto {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
    object-fit: cover;
}
.central span.ctl-foto::before {
    content: "\f2c1";                     /* id-badge: ícone não desenha gente (regra da casa) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.125rem;
}
.central .ctl-foto.is-iniciais::before {
    content: none;
}
.central .ctl-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- a cor do curso (pedido do Marcelo, 23/10/2026) ----------------------
   O título da seção fica framboesa (a cor de Docentes); as pessoas levam a
   cor do curso, a do herói (--cur-a e --cur-b, que o central.js põe no body):
   faixa, disciplina, "Ler o currículo", iniciais e o pop-up. Texto na cor do
   curso sobre branco: SJ 8,6 · ADM 13,9 · MKT 5,2 · RH 5,5 · DS 7,1 ·
   II 5,9 (:1). */
.central #docentes .ctl-docs-grupo,
.central .ctl-dialogo.is-doc {
    --int-fundo: linear-gradient(160deg, var(--cur-a) 0%, var(--cur-b) 100%);
    --int-base: var(--cur-b);
    --int-tinta: var(--cur-a);
}

/* ---- a faixa do crachá: o degradê do curso, grade apagada e luz --------- */
.central #docentes .ctl-doc-faixa {
    display: none;                        /* na linha compacta não há faixa */
}
.central #docentes .ctl-crachas .ctl-doc-faixa,
.central .ctl-dialogo.is-doc .ctl-doc-faixa {
    display: block;
    align-self: stretch;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px),
        radial-gradient(80% 140% at 0% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ---- 1. o crachá: quem dá aula para a turma ----------------------------- */
.central #docentes .ctl-crachas > .ctl-prof-cartao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;                     /* a faixa acompanha o raio */
    padding: 0 23px 23px;                 /* 24 com o fio */
}
.central #docentes .ctl-crachas .ctl-doc-faixa {
    height: 55px;                         /* 56 com o fio de cima */
    margin: 0 -23px;
}
.central #docentes .ctl-crachas .ctl-foto {
    width: 72px;
    height: 72px;
    margin-top: -40px;                    /* 40 na faixa, 32 fora: o cartão fecha no grid de 8 */
    box-shadow: 0 0 0 4px #FFFFFF, 0 8px 16px -8px rgba(7, 31, 58, .48);
    font-size: 1.25rem;
}
.central #docentes .ctl-crachas .ctl-prof-cartao > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 16px;
}
.central #docentes .ctl-crachas :is(.ctl-doc-aulas, .ctl-prof-disc) {
    order: 1;                             /* o que ensina logo abaixo do nome */
}
.central #docentes .ctl-crachas .ctl-doc-mais {
    order: 3;                             /* o currículo (order 2) fica entre os dois */
}
.central #docentes .ctl-crachas h4 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-wrap: balance;
}
/* As aulas da turma com o docente: disciplina, dia e hora. */
.central #docentes .ctl-doc-aulas,
.central .ctl-dialogo.is-doc .ctl-doc-aulas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.central #docentes .ctl-doc-aulas li,
.central .ctl-dialogo.is-doc .ctl-doc-aulas li {
    display: flex;
    flex-direction: column;
}
.central .ctl-doc-aulas strong {
    color: var(--int-tinta);
    font-size: .9375rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-doc-aulas span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-variant-numeric: tabular-nums;
}
.central .ctl-doc-aulas .icon {
    width: 16px;
    font-size: .75rem;
}
/* Turma sem grade (formada): no lugar da aula, as disciplinas do curso. */
.central #docentes .ctl-crachas .ctl-prof-disc {
    margin-top: 8px;
    color: var(--int-tinta);
    font-weight: 700;
}
.central #docentes .ctl-crachas .ctl-doc-aulas ~ .ctl-prof-disc {
    display: none;
}
.central #docentes .ctl-crachas .ctl-prof-cv {
    order: 2;
    display: -webkit-box;
    overflow: hidden;
    margin-top: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #3A4468;
}

/* "Ler o currículo": o botão é o cartão inteiro (o ::after cobre tudo). */
.central #docentes .ctl-doc-mais {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 16px 0 0;
    border: 0;
    background: none;
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}
.central #docentes .ctl-doc-mais::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}
.central #docentes .ctl-doc-mais .icon {
    transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.central #docentes .ctl-doc-mais:focus-visible {
    outline: 0;
}
.central #docentes .ctl-prof-cartao:has(.ctl-doc-mais:focus-visible) {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central #docentes .ctl-prof-cartao.is-clicavel:hover {
        border-color: #C9D0E0;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central #docentes .ctl-prof-cartao.is-clicavel:hover {
        transform: translateY(-2px);
    }
    .central #docentes .ctl-prof-cartao.is-clicavel:hover .ctl-doc-mais .icon {
        transform: translateX(2px);
    }
}
.central #docentes .ctl-prof-cartao.is-clicavel:active {
    transform: translateY(0) scale(.99);
}
/* Quem chega pelo nome do professor em Horários (#prof-x). */
.central #docentes .ctl-prof-cartao:target {
    border-color: var(--int-tinta);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--int-tinta) 20%, transparent),
                0 12px 24px -16px rgba(16, 39, 112, .16);
    scroll-margin-top: 156px;             /* 60 da barra + 64 da fita + 32 */
}

/* ---- 2 e 3. a linha compacta (direção, outros professores, tutoria) ----- */
.central #docentes .ctl-pessoas > .ctl-prof-cartao {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 80px;
    padding: 15px;                        /* 16 com o fio */
}
.central #docentes .ctl-pessoas > .ctl-prof-cartao.is-clicavel {
    grid-template-columns: 48px minmax(0, 1fr) 24px;   /* a seta do currículo */
}
.central #docentes .ctl-pessoas .ctl-prof-cv {
    display: none;
}
/* Cargo longo na linha compacta: o resto ("da FAT") não cabe ao lado da
   seta e quebrava o cartão em duas linhas. O pop-up mostra o cargo inteiro. */
.central #docentes .ctl-pessoas .ctl-papel-resto {
    display: none;
}
.central #docentes .ctl-pessoas .ctl-prof-disc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.central #docentes .ctl-pessoas .ctl-doc-mais {
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    color: #5A668C;
}
.central #docentes .ctl-pessoas .ctl-doc-mais-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- o pop-up do currículo: o crachá aberto ----------------------------- */
/* Currículo longo: rola só o texto; foto, nome e o fechar ficam à vista. */
.central .ctl-dialogo.is-doc[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.central .ctl-dialogo.is-doc .ctl-dlg-caixa {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    padding: 0 32px 32px;
}
.central .ctl-dialogo.is-doc .ctl-dlg-caixa > * {
    flex: none;
}
.central .ctl-dialogo.is-doc .ctl-doc-faixa {
    height: 88px;
    margin: 0 -32px;
}
.central .ctl-dialogo.is-doc .ctl-dlg-fechar {
    z-index: 1;
    color: #FFFFFF;
}
@media (hover: hover) {
    .central .ctl-dialogo.is-doc .ctl-dlg-fechar:hover {
        background: rgba(255, 255, 255, .16);
    }
}
.central .ctl-dialogo.is-doc .ctl-foto {
    width: 96px;
    height: 96px;
    margin-top: -48px;
    box-shadow: 0 0 0 4px #FFFFFF, 0 8px 16px -8px rgba(7, 31, 58, .48);
    font-size: 1.5rem;
}
.central .ctl-dialogo.is-doc .ctl-papel {
    margin-top: 16px;
}
.central .ctl-dialogo.is-doc h3 {
    margin-top: 16px;
    padding-right: 0;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-dialogo.is-doc .ctl-papel + h3 {
    margin-top: 0;
}
.central .ctl-dialogo.is-doc .ctl-doc-disc {
    margin-top: 8px;
    color: var(--int-tinta);
    font-size: .9375rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-dialogo.is-doc .ctl-dlg-caixa > .ctl-dlg-texto {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.central .ctl-dialogo.is-doc .ctl-dlg-texto {
    max-width: 65ch;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E3E7F0;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}

/* ---- largura: a linha compacta cabe em 4; o crachá fica em 3 ------------ */
@media (min-width: 1200px) {
    .central #docentes .ctl-pessoas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 1023.98px) {
    .central #docentes .ctl-crachas,
    .central #docentes .ctl-pessoas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .central #docentes .ctl-crachas,
    .central #docentes .ctl-pessoas {
        grid-template-columns: minmax(0, 1fr);
    }
    .central #docentes .ctl-pessoas {
        gap: 8px;
    }
    .central #docentes .ctl-docs-grupo > h3 {
        margin-top: 40px;
    }
    .central #docentes .ctl-crachas > .ctl-prof-cartao {
        padding: 0 15px 15px;
    }
    .central #docentes .ctl-crachas .ctl-doc-faixa {
        height: 47px;                     /* 48 com o fio */
        margin: 0 -15px;
    }
    .central #docentes .ctl-crachas .ctl-foto {
        width: 64px;
        height: 64px;
        margin-top: -32px;
    }
    .central #docentes .ctl-crachas .ctl-prof-cartao > div {
        margin-top: 8px;
    }
    .central #docentes .ctl-crachas h4 {
        font-size: 1.125rem;
    }
    .central #docentes .ctl-pessoas > .ctl-prof-cartao.is-clicavel {
        grid-template-columns: 48px minmax(0, 1fr) 40px;
    }
    .central #docentes .ctl-pessoas .ctl-doc-mais {
        width: 40px;
        height: 40px;
    }
    .central #docentes .ctl-prof-cartao:target {
        scroll-margin-top: 132px;         /* 60 da barra + 48 da fita + 24 */
    }
    .central .ctl-dialogo.is-doc .ctl-dlg-caixa {
        padding: 0 24px 24px;
    }
    .central .ctl-dialogo.is-doc .ctl-doc-faixa {
        height: 72px;
        margin: 0 -24px;
    }
    .central .ctl-dialogo.is-doc .ctl-foto {
        width: 80px;
        height: 80px;
        margin-top: -40px;
    }
}


/* --------------------------------------------------------------------------
   10. COMUNICAÇÕES (26/10/2026) — os avisos do calendário, um por vez
   Um trilho com rolagem de lado e encaixe: um cartão por parada. No
   computador o cartão ocupa a caixa (784); no celular sobra a borda do
   próximo (16 depois do vão de 8), para mostrar que dá para passar. Os
   cartões ficam numa linha só da grade: todos com a altura do maior, e a
   navegação embaixo não pula. É texto corrido: o texto na linha de 720.
   -------------------------------------------------------------------------- */
.central .ctl-mensagens {
    max-width: 784px;
}
.central .ctl-msg-trilho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    padding-bottom: 8px;                  /* a sombra do cartão: o overflow cortava */
    overflow-x: auto;
    overscroll-behavior-x: contain;       /* a ponta do trilho não vira o "voltar" do navegador */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.central .ctl-msg-trilho::-webkit-scrollbar {
    display: none;
}
.central .ctl-msg-trilho:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 4px;
}
.central .ctl-msg {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 31px 31px;                 /* com o fio de 1: 32; em cima, a faixa */
    scroll-snap-align: start;
    scroll-snap-stop: always;             /* o dedo rápido não pula cartão */
}
/* A faixa do tipo (Marcelo, 26/10/2026): a cor e o ícone do tipo no
   Calendário, no topo do cartão. Cobre o fio de cima e os dos lados (margem
   de -1 e -32) e tem o raio de cima do cartão: 48 do topo de fora, e o
   cartão fica no grid de 8. Aviso e Sem aula têm fundo branco ou quase: a
   faixa usa o claro do tipo, para não sumir no cartão. */
.central .ctl-msg-faixa {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin: -1px -32px 32px;
    padding: 0 32px;
    border-bottom: 1px solid var(--ctl-tipo-borda);
    border-radius: 10px 10px 0 0;
    background: var(--ctl-tipo-fundo);
    color: var(--ctl-tipo-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-msg-faixa:is(.is-aviso, .is-sem) {
    background: var(--ctl-tipo-claro);
}
.central .ctl-msg-faixa .icon {
    margin: 0;
    color: inherit;
}
.central .ctl-msg-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
/* O selo ao lado do chip: Hoje (cheio), Próximo (o claro do antigo "Mais
   recente") e Já passou (apagado). Os demais futuros vão sem selo. */
.central .ctl-msg-selo {
    padding: 0 8px;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}
.central .ctl-msg-selo.is-hoje {
    background: #0059FB;
    color: #FFFFFF;
}
.central .ctl-msg-selo.is-proximo {
    background: #EAF1FF;
    color: #0059FB;
}
.central .ctl-msg-selo.is-passou {
    background: #EEF1F7;
    color: #5A668C;
}
.central .ctl-msg-data {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-msg h3 {
    margin: 0 0 8px;
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-msg-texto {
    max-width: 720px;
    font-size: 1.0625rem;
    line-height: 2rem;
}
/* O "Ver no calendário" no pé do cartão, na mesma altura em todos. */
.central .ctl-msg-acao {
    display: flex;                        /* o botão inline-flex somava 1px de linha de base */
    margin-top: auto;
    padding-top: 16px;
}
/* ‹ N de M › e, colado à direita do ›, o botão "Ir para hoje" (Marcelo,
   26/10/2026: parece botão e fica junto da navegação). Ele vem depois das
   setas: aparecer ou sumir não as tira do lugar. Onde não cabe (320), desce
   para a linha de baixo, alinhado à esquerda, com 8 de vão. */
.central .ctl-msg-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;                      /* com os 8 da sombra no trilho: 16 do cartão */
}
.central .ctl-msg-setas {
    display: flex;
    align-items: center;
    gap: 8px;
}
.central .ctl-msg-seta {
    width: 40px;
    padding: 0;
}
.central :is(.ctl-msg-seta, .ctl-msg-hoje, .ctl-msg-acao) .icon {
    font-size: .75rem;
}
.central .ctl-msg-conta {
    min-width: 72px;                      /* o número que cresce não empurra a seta da direita */
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* "Ir para hoje" e "Ver no calendário" (Marcelo, 26/10/2026): botões
   secundários de 40, como as setas, com o ícone a 8 do texto. */
.central :is(.ctl-msg-hoje, .ctl-msg-acao .ctl-botao) {
    padding: 0 16px;
}


/* --------------------------------------------------------------------------
   11. ATALHOS — Manual (base de conhecimento) e Suporte (chamado)
   Quatro por linha no miolo de 1200, três no tablet.
   -------------------------------------------------------------------------- */
.central .ctl-atalhos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 1024px) {
    .central .ctl-atalhos {
        grid-template-columns: repeat(4, minmax(0, 1fr));   /* 288 de largura: "Dispensa de disciplinas" cabe em duas linhas */
    }
}
.central .ctl-atalho {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    min-height: 80px;
    padding: 15px 23px 15px 15px;
    color: #102770;
    text-decoration: none;
}
.central .ctl-atalho .icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: 1.25rem;
}
.central .ctl-atalho strong {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-atalho::after {
    content: "\f35d";                     /* up-right-from-square: abre o suporte em outra aba */
    flex: none;
    color: #8E97B3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    transition: color 150ms ease;
}
.central .ctl-atalho:focus-visible {
    border-color: #0059FB;
}
@media (hover: hover) {
    .central .ctl-atalho:hover {
        text-decoration: none;
    }
    .central .ctl-atalho:hover::after {
        color: #0059FB;
    }
}
/* Os mais lidos (refeito de novo em 20/10: "tá muito seco"). Um ranking: o
   1º em destaque, no cartão escuro da casa (degradê, grade apagada, luz
   difusa e o número no vidro), e do 2º ao 5º num 2×2 ao lado. Cada artigo
   diz a categoria, o que ensina e quantos já leram. O cartão inteiro é o
   alvo; abre a base de conhecimento em outra aba. No tablet o destaque vai
   para cima; no celular, lista. */
.central .ctl-lidos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.central .ctl-lidos > li:first-child {
    grid-column: 1 / -1;
}
@media (min-width: 1024px) {
    .central .ctl-lidos {
        grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 4fr));
    }
    .central .ctl-lidos > li:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}
.central .ctl-lido {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 40px auto 1fr auto;
    column-gap: 16px;
    height: 100%;
    padding: 23px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    color: #102770;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease, border-color 150ms ease;
}
.central .ctl-lido-n {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.central .ctl-lido-cat {
    grid-area: 1 / 2;
    align-self: center;
    padding-right: 24px;                  /* a seta do canto */
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.central .ctl-lido strong {
    grid-column: 1 / -1;
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-wrap: balance;
}
.central .ctl-lido-resumo {
    grid-column: 1 / -1;
    margin-top: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    text-wrap: pretty;
}
.central .ctl-lido-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #6B7594;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-lido-meta .icon {
    font-size: .75rem;
}
.central .ctl-lido-ler {
    display: none;                        /* só no destaque */
}
.central .ctl-lido::after {
    content: "\f35d";                     /* up-right-from-square: abre a base de conhecimento em outra aba */
    position: absolute;
    top: 36px;                            /* centro do número (24 + 20) menos meia linha */
    right: 24px;
    color: #8E97B3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    line-height: 1rem;
    transition: color 150ms ease;
}
/* O 1º: o cartão escuro, na cor do Manual. */
.central .ctl-lidos > li:first-child .ctl-lido {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: 64px auto auto 1fr auto;
    padding: 32px;
    border: 0;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-lidos > li:first-child .ctl-lido-n {
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: 2rem;
    line-height: 2.5rem;
}
.central .ctl-lidos > li:first-child .ctl-lido-cat {
    color: rgba(255, 255, 255, .80);
}
.central .ctl-lidos > li:first-child .ctl-lido-cat::before {
    content: "O mais lido · ";
    color: #FFFFFF;
}
.central .ctl-lidos > li:first-child .ctl-lido strong {
    margin-top: 32px;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-lidos > li:first-child .ctl-lido-resumo {
    max-width: 40ch;
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
}
.central .ctl-lidos > li:first-child .ctl-lido-meta {
    grid-row: 5;
    margin-top: 24px;
    color: rgba(255, 255, 255, .80);
}
.central .ctl-lidos > li:first-child .ctl-lido-ler {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0 16px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 2.5rem;                  /* 40 de altura */
    font-weight: 700;
}
.central .ctl-lidos > li:first-child .ctl-lido-ler::after {
    content: "\f35d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
}
.central .ctl-lidos > li:first-child .ctl-lido::after {
    content: none;                        /* o botão já diz que abre fora */
}
.central .ctl-lido:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central .ctl-lido:hover {
        border-color: #C9D0E0;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
        color: #102770;
        text-decoration: none;
    }
    .central .ctl-lido:hover::after {
        color: #0059FB;
    }
    .central .ctl-lidos > li:first-child .ctl-lido:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 2px 4px rgba(7, 31, 58, .12),
            0 24px 48px -12px rgba(7, 31, 58, .40);
        color: #FFFFFF;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-lido:hover {
        transform: translateY(-2px);
    }
}
/* Todos os artigos (refeito em 22/10/2026: "mais organizado e dinâmico").
   Em cima, a busca e os filtros por categoria, cada um com a contagem; embaixo,
   os artigos em cartões, agrupados pelas categorias do suporte: o ícone do
   assunto, o título, o que o artigo ensina e, nos tutoriais, o selo do vídeo.
   O cartão inteiro abre o suporte em outra aba. Três por linha no miolo de
   1200, dois no tablet, um no celular. Sem o script, a barra some e a lista
   inteira aparece. O filtro esconde com data-fora (o hidden é do filtro de
   curso). */
.central:not(.ctl-js) :is(.ctl-manual-barra, .ctl-manual-status),
.central .ctl-manual-qtd:empty,
.central .ctl-manual-status:empty {
    display: none;
}
.central .ctl-manual [data-fora] {
    display: none !important;
}
.central .ctl-manual-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.central .ctl-manual-busca {
    position: relative;
    flex: 1 1 320px;
    margin: 0;
}
.central .ctl-manual-busca .icon {
    position: absolute;
    top: 16px;
    left: 16px;
    margin: 0;
    color: #6B7594;
    font-size: .875rem;
    line-height: 1rem;
    pointer-events: none;
}
.central .ctl-manual-busca input {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 15px 0 47px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.central .ctl-manual-busca input::placeholder {
    color: #6B7594;
    opacity: 1;
}
.central .ctl-manual-busca input:focus {
    border-color: #0059FB;
    box-shadow: 0 0 0 3px rgba(0, 89, 251, .20);
    outline: 0;
}
.central .ctl-manual-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.central .ctl-manual-filtros button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 7px 0 15px;
    border: 1px solid #D5D8E2;
    border-radius: 999px;
    background: #FFFFFF;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.central .ctl-manual-filtros button .icon {
    margin: 0;
    color: var(--int-tinta);
    font-size: .75rem;
    transition: color 150ms ease;
}
.central .ctl-manual-qtd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #EEF1F7;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 150ms ease, color 150ms ease;
}
.central .ctl-manual-filtros button[aria-pressed="true"] {
    border-color: var(--int-base);
    background: var(--int-base);
    color: #FFFFFF;
}
.central .ctl-manual-filtros button[aria-pressed="true"] .icon {
    color: #FFFFFF;
}
.central .ctl-manual-filtros button[aria-pressed="true"] .ctl-manual-qtd {
    background: rgba(255, 255, 255, .20);
    color: #FFFFFF;
}
@media (hover: hover) {
    .central .ctl-manual-filtros button[aria-pressed="false"]:hover {
        border-color: #0059FB;
        color: #102770;
    }
}
.central .ctl-manual-status {
    margin-top: 16px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-manual-grupo {
    margin-top: 32px;
}
.central .ctl-manual-grupo:not([data-fora]) ~ .ctl-manual-grupo {
    margin-top: 40px;                     /* entre grupos; o 1º que aparece fica a 32 da barra */
}
.central .ctl-manual-tema {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    color: #102770;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-manual-tema > .icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
}
.central .ctl-manual-tema .ctl-manual-qtd {
    margin-left: -8px;                    /* 8 do nome: a contagem é dele */
}
.central .ctl-manual-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.central .ctl-manual-artigo {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
    height: 100%;
    padding: 23px;
    color: #102770;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.central .ctl-manual-artigo > .icon {
    grid-area: 1 / 1 / 4 / 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: 1rem;
    transition: background-color 150ms ease, color 150ms ease;
}
.central .ctl-manual-artigo strong {
    grid-column: 2;
    margin-top: 8px;                      /* a 1ª linha no meio do ícone de 40 */
    padding-right: 24px;                  /* a seta do canto */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-wrap: balance;
}
.central .ctl-manual-artigo > span:not(.ctl-manual-video) {
    grid-column: 2;
    margin-top: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    text-wrap: pretty;
}
.central .ctl-manual-video {
    grid-column: 2;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    margin-top: 16px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--int-tinta) 8%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-manual-video .icon {
    margin: 0;
    font-size: .75rem;
}
.central .ctl-manual-artigo::after {
    content: "\f35d";                     /* up-right-from-square: abre o suporte em outra aba */
    position: absolute;
    top: 28px;                            /* centro da 1ª linha do título */
    right: 24px;
    color: #8E97B3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    line-height: 1rem;
    transition: color 150ms ease;
}
.central .ctl-manual-artigo:focus-visible {
    border-color: #0059FB;
}
@media (hover: hover) {
    .central .ctl-manual-artigo:hover {
        color: #102770;
        text-decoration: none;
    }
    .central .ctl-manual-artigo:hover > .icon {
        background: var(--int-tinta);
        color: #FFFFFF;
    }
    .central .ctl-manual-artigo:hover::after {
        color: #0059FB;
    }
}
/* Ao filtrar ou buscar, o que fica entra num sopro: 200ms, sem escada. */
@media (prefers-reduced-motion: no-preference) {
    .central .ctl-manual[data-anima] :is(.ctl-manual-lista > li, .ctl-manual-vazio) {
        animation: ctl-manual-entra 200ms cubic-bezier(.2, .8, .2, 1) both;
    }
}
@keyframes ctl-manual-entra {
    from { opacity: 0; transform: translateY(8px); }
}
/* Busca sem resultado: o que fazer em seguida, não um beco. */
.central .ctl-manual-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    padding: 39px 23px;
    border: 1px dashed #C9D0E0;
    border-radius: 10px;
    background: #FFFFFF;
    text-align: center;
}
.central .ctl-manual-vazio > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 0 16px;
    border-radius: 999px;
    background: #EEF1F7;
    color: #6B7594;
    font-size: 1.125rem;
}
.central .ctl-manual-vazio p {
    max-width: 480px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-manual-vazio strong {
    display: block;
    margin-bottom: 8px;
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.central .ctl-manual-vazio .ctl-manual-vazio-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: none;
    margin-top: 24px;
}
@media (max-width: 1023.98px) {
    .central .ctl-manual-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .central .ctl-manual-barra {
        gap: 16px;
    }
    .central .ctl-manual-busca {
        flex-basis: 100%;
    }
    /* Os dez filtros (26/10/2026: a base passou de 3 para 9 categorias) numa
       fileira só, que rola de lado de ponta a ponta da janela, como a fita:
       o primeiro alinha com o texto e o que não cabe fica cortado na borda,
       o sinal de que há mais. No 2×2 de antes seriam cinco linhas. */
    .central .ctl-manual-filtros {
        flex: 1 0 100%;
        flex-wrap: nowrap;
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .central .ctl-manual-filtros::-webkit-scrollbar {
        display: none;
    }
    .central .ctl-manual-filtros button {
        flex: none;
    }
    /* No celular, lista: sem o resumo (como os mais lidos), o título e o selo
       do vídeo. 72 sem o selo, 96 com. */
    .central .ctl-manual-lista {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central .ctl-manual-artigo {
        padding: 15px;
    }
    .central .ctl-manual-artigo > span:not(.ctl-manual-video) {
        display: none;
    }
    .central .ctl-manual-video {
        margin-top: 8px;
    }
    .central .ctl-manual-artigo::after {
        top: 20px;
        right: 16px;
    }
    .central .ctl-manual-vazio .ctl-manual-vazio-acoes > * {
        flex: 1 0 100%;
    }
}


/* --------------------------------------------------------------------------
   12. CENTRAL DE CARREIRAS (refeita em 22/10/2026)
   Seis blocos numa seção só, com o sumário no alto. O escuro, na cor da
   seção, fica para o que leva a outro site (o painel de vagas e os agentes);
   o resto é a superfície branca das listas. Os guias abrem no pop-up.
   Os agentes são cartões do portão: a porta de saída para outro site, como
   os atalhos do painel.
   -------------------------------------------------------------------------- */
.central .ctl-agentes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.central .ctl-agente {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "sigla nome" "sigla desc";
    column-gap: 16px;
    align-items: center;
    height: 100%;
    min-height: 112px;
    padding: 24px 48px 24px 24px;         /* 48 à direita: a seta */
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(70% 90% at 10% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}
.central .ctl-agente::after {
    content: "\f35d";                     /* up-right-from-square: abre em outra aba */
    position: absolute;
    top: 50%;
    right: 24px;
    margin-top: -8px;
    color: rgba(255, 255, 255, .72);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    line-height: 1rem;
}
.central .ctl-agente-sigla {
    grid-area: sigla;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .12),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.central .ctl-agente strong {
    grid-area: nome;
    align-self: end;
    color: #FFFFFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-agente > span:last-child {
    grid-area: desc;
    align-self: start;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-agente:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central .ctl-agente:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 2px 4px rgba(7, 31, 58, .12),
            0 24px 48px -12px rgba(7, 31, 58, .40);
        text-decoration: none;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-agente:hover {
        transform: translateY(-4px);
    }
}
@media (max-width: 1023.98px) {
    .central .ctl-agentes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Os títulos (24/10, revisão da página inteira: "hierarquia visual dos
   titulos e sub titulos"). O subtítulo de bloco (.ctl-sub) era um rótulo
   cinza de 16, menor que o título de dentro dos ladrilhos (18): a
   hierarquia ficava de cabeça para baixo. Agora são quatro degraus, um
   por nível: capítulo 32, bloco 20 (o peso dos subtítulos das outras
   seções), ladrilho 18 e texto 16. E três vãos: 16 dentro do bloco, 48
   entre um bloco e outro e 80 na borda do capítulo (no celular, 16, 32 e
   48). */
.central #carreiras .ctl-sub {
    margin: 48px 0 16px;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
/* O guia de IA é o sexto guia: cola na grade dos outros cinco. */
.central #carreiras .ctl-guias + .ctl-ia {
    margin-top: 16px;
}
.central #carreiras h3 + .ctl-sub {
    margin-top: 0;
}
/* Texto de apoio dos cartões sem palavra sozinha na última linha ("FAT."). */
.central #carreiras :is(li, .ctl-guia, .ctl-artigo) span {
    text-wrap: pretty;
}
.central #carreiras .ctl-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central #carreiras .ctl-nota .icon {
    margin: 0;
    color: var(--int-tinta);
    line-height: 1.5rem;
}
.central #carreiras .ctl-fonte {
    margin-top: 16px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* O sumário: pílulas brancas, uma por bloco. Levam para baixo, na mesma
   seção (a âncora é de dentro: a seção segue aberta). */
.central .ctl-sumario ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.central .ctl-sumario a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 19px 0 15px;
    border: 1px solid #E3E7F0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04);
    transition: border-color 150ms ease, color 150ms ease;
}
.central .ctl-sumario .icon {
    margin: 0;
    color: var(--int-tinta);
}
@media (hover: hover) {
    .central .ctl-sumario a:hover {
        border-color: var(--int-tinta);
        color: var(--int-tinta);
        text-decoration: none;
    }
}

/* 1. Vagas: o painel escuro do convite do WhatsApp, na cor da seção, com os
   botões de vidro embaixo do texto (são vários, e cada um sai do site). */
.central .ctl-vagas {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 24px;
    padding: 32px;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(50% 120% at 4% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-vagas > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: 1.5rem;
}
.central .ctl-vagas-texto {
    align-self: center;
}
.central .ctl-vagas-titulo {
    color: #FFFFFF;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-vagas-texto p:not(.ctl-vagas-titulo) {
    color: rgba(255, 255, 255, .88);
}
.central .ctl-vagas-botoes {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}
.central .ctl-vagas .ctl-botao {
    height: 48px;
    padding: 0 24px;
    border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 16px -8px rgba(0, 0, 0, .40);
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.central .ctl-vagas .ctl-botao::after {
    content: "\f35d";                     /* up-right-from-square: abre em outra aba */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    opacity: .72;
}
.central .ctl-vagas .ctl-botao:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, .12);
    border-color: #FFFFFF;
}
@media (hover: hover) {
    .central .ctl-vagas .ctl-botao:not(:disabled):hover {
        border-color: #FFFFFF;
        background-color: rgba(255, 255, 255, .12);
        color: #FFFFFF;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 16px 24px -8px rgba(0, 0, 0, .48);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-vagas .ctl-botao:not(:disabled):hover {
        transform: translateY(-2px);
    }
}

/* 2. Estágio. O passo a passo é o stepper clássico centrado (aprovado no
   portão em 20/10): círculo de 32 com o número, nome em negrito, linha de
   apoio, trilho fino entre os centros. Numa superfície branca, como a
   jornada do painel. Os degraus da trilha usam o mesmo desenho. */
.central .ctl-passos {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: 31px 15px;
}
.central .ctl-passos > li {
    position: relative;
    padding: 0 8px;
    text-align: center;
}
.central .ctl-passos > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    border-radius: 1px;
    background: color-mix(in oklab, var(--int-tinta) 24%, #FFFFFF);
}
.central .ctl-passo-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--int-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 4px color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 800;
}
.central .ctl-passos strong {
    display: block;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-passos > li > span:not(.ctl-passo-n) {
    display: block;
    max-width: 216px;
    margin: 0 auto;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* Os documentos: uma superfície só, em duas colunas de linhas (ícone,
   nome e o que é, e o botão quando há o que baixar ou pedir). Não é cartão
   clicável: o alvo é o botão. */
.central .ctl-docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    padding: 7px 31px;
}
.central .ctl-docs > li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    min-height: 96px;
    padding: 16px 0 15px;
    border-bottom: 1px solid #EEF1F7;
}
.central .ctl-docs > li:nth-last-child(-n + 2) {
    border-bottom: 0;
    padding-bottom: 16px;
}
.central .ctl-docs > li > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: 1.25rem;
}
.central .ctl-docs strong {
    display: block;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-docs li span {
    display: block;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* As dúvidas: quatro grupos por tema, em duas colunas, da mesma altura na
   linha. Cada pergunta é um <details>: a linha inteira abre (alvo de 56), a
   seta vira. */
.central .ctl-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.central .ctl-faq-grupo {
    padding: 7px 23px;
}
.central .ctl-faq-tema {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 800;
}
.central .ctl-faq-tema .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
}
.central .ctl-faq details {
    border-top: 1px solid #EEF1F7;
}
.central .ctl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 55px;                     /* com o fio de cima, 56 */
    padding: 15px 0 16px;
    color: #102770;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.central .ctl-faq summary::-webkit-details-marker {
    display: none;
}
.central .ctl-faq summary::after {
    content: "\f078";                     /* chevron-down */
    flex: none;
    color: #8E97B3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    transition: transform 200ms cubic-bezier(.23, 1, .32, 1), color 150ms ease;
}
.central .ctl-faq details[open] summary::after {
    transform: rotate(180deg);
    color: var(--int-tinta);
}
.central .ctl-faq details > p {
    max-width: 640px;
    padding-bottom: 16px;
    color: #3A4468;
}
@media (hover: hover) {
    .central .ctl-faq summary:hover {
        color: var(--int-tinta);
    }
    .central .ctl-faq summary:hover::after {
        color: var(--int-tinta);
    }
}
@media (prefers-reduced-motion: reduce) {
    .central .ctl-faq summary::after {
        transition: none;
    }
}

/* 3. Prepare-se: os guias, cinco numa linha no miolo de 1200. O cartão
   inteiro é o botão que abre o pop-up. */
.central .ctl-guias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 1200px) {
    .central .ctl-guias {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.central .ctl-guia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 23px;
    color: #102770;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 200ms ease, transform 200ms var(--ctl-ease);
}
.central .ctl-guia > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 0 16px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: 1.25rem;
}
.central .ctl-guia strong {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-guia > span:not(.ctl-guia-ler) {
    margin-top: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-guia-ler {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-guia-ler::after {
    content: "\f054";                     /* chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .625rem;
    transition: transform 150ms ease;
}
.central .ctl-guia:focus-visible {
    border-color: #0059FB;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-guia:hover .ctl-guia-ler::after {
        transform: translateX(2px);
    }
}

/* 4. A trilha do curso: os degraus (o mesmo stepper do passo a passo) e
   três blocos embaixo: onde trabalhar, competências, certificações. */
.central .ctl-degraus {
    margin-bottom: 16px;
}
.central .ctl-rumo-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.central .ctl-rumo-bloco {
    padding: 23px;
}
.central .ctl-rumo-bloco :is(h4, h5) {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-rumo-bloco :is(h4, h5) .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
}
.central .ctl-lista > li {
    padding: 8px 0 7px;
    border-bottom: 1px solid #EEF1F7;
}
.central .ctl-lista > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.central .ctl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.central .ctl-tags > li {
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--int-tinta) 8%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-certs > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    padding: 8px 0 7px;
    border-bottom: 1px solid #EEF1F7;
}
.central .ctl-certs > li:first-child {
    padding-top: 0;
}
.central .ctl-certs > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.central .ctl-certs strong {
    grid-column: 1;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
/* O código da prova não quebra no hífen ("AZ-" numa linha, "900)" na outra).
   Com #carreiras, para vencer o text-wrap: pretty dos cartões, que também
   desliga o nowrap. */
.central #carreiras .ctl-certs .ctl-junto {
    color: inherit;
    font-size: inherit;
    white-space: nowrap;
}
.central .ctl-certs span {
    grid-column: 1;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-certs small {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0 8px;
    border-radius: 4px;
    background: #E6F4EC;
    color: #136640;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* 5. Conteúdos. Os artigos vêm da base de conhecimento do Suporte, enquanto
   o blog não existe: cartão inteiro abre em outra aba. São 3 ou 4 conforme o
   curso, e a grade se ajusta sozinha. */
.central .ctl-artigos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
    gap: 16px;
}
.central .ctl-artigo {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 23px;
    color: #102770;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 200ms ease, transform 200ms var(--ctl-ease);
}
.central .ctl-artigo::after {
    content: "\f35d";                     /* up-right-from-square: abre em outra aba */
    position: absolute;
    top: 24px;
    right: 24px;
    color: #8E97B3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    line-height: 1rem;
}
.central .ctl-artigo-cat {
    padding-right: 24px;
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.central .ctl-artigo strong {
    margin-top: 16px;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-artigo > span:not(.ctl-artigo-cat) {
    margin-top: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-artigo:focus-visible {
    border-color: #0059FB;
}
@media (hover: hover) {
    .central .ctl-artigo:hover {
        text-decoration: none;
    }
    .central .ctl-artigo:hover::after {
        color: #0059FB;
    }
}

/* As faixas salariais: uma tabela por curso, com a fonte e o recorte
   embaixo. Valor alinhado à direita, em algarismos de mesma largura.
   Grid de 8: cabeça de 48 e linha de 72 contando o fio; a última linha
   cede os 2px da borda da caixa (padding-bottom 10), como os 23px dos
   cartões. Bordas separadas, para o fio não ser dividido entre linhas. */
.central .ctl-salarios {
    overflow: hidden;
}
.central .ctl-salarios table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.central .ctl-salarios th,
.central .ctl-salarios td {
    padding: 12px 24px 11px;
    border-bottom: 1px solid #EEF1F7;
    text-align: left;
    vertical-align: top;
}
.central .ctl-salarios tbody tr:last-child > * {
    padding-bottom: 10px;
}
.central .ctl-salarios thead th {
    padding-top: 15px;
    padding-bottom: 16px;
    white-space: nowrap;
    background: #F7F9FC;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.central .ctl-salarios tbody tr:last-child > * {
    border-bottom: 0;
}
.central .ctl-salarios tbody th {
    color: #102770;
    font-weight: 700;
}
.central .ctl-salarios td.ctl-valor {
    color: #102770;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.central .ctl-salarios thead th.ctl-valor {
    text-align: right;
}
.central .ctl-salarios :is(th, td) small {
    display: block;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 400;
}

/* As tendências: três números, cada um com a frase que o explica. */
.central .ctl-tendencias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.central .ctl-tendencias > li {
    padding: 23px;
}
.central .ctl-tendencias b {
    display: block;
    color: var(--int-tinta);
    font-size: 2.25rem;
    line-height: 3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.central .ctl-tendencias span {
    display: block;
    margin-top: 8px;
    color: #3A4468;
}
.central .ctl-competencias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* A IA: uma faixa branca, com o botão do guia. */
.central .ctl-ia {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    margin-top: 32px;
    padding: 23px;
}
.central .ctl-ia > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: 1.25rem;
}
.central .ctl-ia-titulo {
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-ia p:not(.ctl-ia-titulo) {
    color: #5A668C;
}

/* O guia no pop-up. O pop-up mora fora da seção, então a cor de Carreiras
   vem aqui de novo. Os passos são numerados pelo contador. */
.central .ctl-dialogo:has(.ctl-guia-lead) {
    --int-fundo: linear-gradient(160deg, #7354B8 0%, #5B3F99 55%, #2F1D5C 100%);
    --int-base: #5B3F99;
    --int-tinta: #5B3F99;
}
.central .ctl-dialogo:has(.ctl-guia-lead) .ctl-dlg-caixa {
    padding: 32px;
}
.central .ctl-guia-lead {
    color: #5A668C;
}
.central .ctl-guia-passos {
    counter-reset: guia;
    margin-top: 16px;
}
.central .ctl-guia-passos > li {
    position: relative;
    padding-left: 40px;
    counter-increment: guia;
}
.central .ctl-guia-passos > li + li {
    margin-top: 16px;
}
.central .ctl-guia-passos > li::before {
    content: counter(guia);
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--int-tinta) 12%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 800;
    text-align: center;
}
.central .ctl-guia-passos strong {
    color: #102770;
}
/* Os modelos de currículo: a folha desenhada em blocos (nome, linhas e os
   títulos na ordem certa), lado a lado no pop-up largo. */
.central .ctl-modelos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 16px;
}
.central .ctl-modelo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 23px;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #F7F9FC;
}
.central .ctl-modelo-nome {
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 800;
}
.central .ctl-folha {
    width: 100%;
    max-width: 320px;
    padding: 24px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .08), 0 12px 24px -12px rgba(16, 39, 112, .24);
}
.central .ctl-folha b,
.central .ctl-folha i {
    display: block;
    height: 8px;
    border-radius: 2px;
    background: #E3E7F0;
}
.central .ctl-folha b {
    width: 56%;
    height: 16px;
    background: #102770;
}
.central .ctl-folha i {
    margin-top: 8px;
}
.central .ctl-folha i + i {
    width: 72%;
}
.central .ctl-folha em {
    display: block;
    margin-top: 16px;
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Tablet: o que tem três ou mais colunas desce para duas. */
@media (max-width: 1023.98px) {
    .central .ctl-docs {
        grid-template-columns: minmax(0, 1fr);
    }
    .central .ctl-docs > li:nth-last-child(2) {
        border-bottom: 1px solid #EEF1F7;
        padding-bottom: 15px;
    }
}

/* Celular: tudo numa coluna. O passo a passo vira trilho vertical, com o
   círculo à esquerda; os guias, linhas como as do Suporte. */
@media (max-width: 767.98px) {
    .central #carreiras .ctl-sub {
        margin-top: 32px;
    }
    .central .ctl-agentes,
    .central .ctl-faq,
    .central .ctl-guias,
    .central .ctl-rumo-grade,
    .central .ctl-artigos,
    .central .ctl-tendencias,
    .central .ctl-competencias,
    .central .ctl-modelos {
        grid-template-columns: minmax(0, 1fr);
    }
    .central .ctl-vagas {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        padding: 24px;
    }
    .central .ctl-vagas > .icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    .central .ctl-vagas-botoes {
        grid-column: 1 / -1;
        flex-direction: column;
        gap: 8px;
    }
    .central .ctl-vagas .ctl-botao {
        width: 100%;
    }
    .central .ctl-passos {
        grid-auto-flow: row;
        padding: 23px;
    }
    .central .ctl-passos > li {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 16px;
        padding: 0 0 24px;
        text-align: left;
    }
    .central .ctl-passos > li:last-child {
        padding-bottom: 0;
    }
    .central .ctl-passos > li:not(:last-child)::after {
        top: 40px;
        bottom: 8px;
        left: 15px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .central .ctl-passo-n {
        grid-row: 1 / span 2;
        margin: 0;
    }
    .central .ctl-passos strong {
        grid-column: 2;
        line-height: 2rem;                /* a altura do círculo: o nome fica no eixo dele */
    }
    .central .ctl-passos > li > span:not(.ctl-passo-n) {
        grid-column: 2;
        max-width: none;
        margin: 0;
    }
    .central .ctl-docs {
        padding: 7px 23px;
    }
    .central .ctl-docs > li {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
    }
    .central .ctl-docs > li > .icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    .central .ctl-docs > li > .ctl-botao {
        grid-column: 2;
        justify-self: start;
        margin-top: 8px;
    }
    .central .ctl-guia {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 16px;
        align-items: center;
        column-gap: 16px;
        padding: 15px;
    }
    .central .ctl-guia > .icon {
        grid-row: 1 / span 2;
        margin: 0;
    }
    .central .ctl-guia > span:not(.ctl-guia-ler) {
        grid-column: 2;
        margin-top: 0;
    }
    .central .ctl-guia-ler {
        grid-column: 3;
        grid-row: 1 / span 2;
        margin: 0;                        /* o margin-top: auto do desktop desce a seta no grid */
        padding: 0;
        font-size: 0;                     /* só a seta: o cartão já diz o que abre */
    }
    .central .ctl-salarios th,
    .central .ctl-salarios td {
        padding: 12px 16px 11px;
    }
    .central .ctl-ia {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .central .ctl-ia > .ctl-botao {
        grid-column: 1 / -1;
        margin-top: 16px;
    }
    .central .ctl-dialogo:has(.ctl-guia-lead) .ctl-dlg-caixa {
        padding: 24px;
    }
}

/* A hierarquia (24/10/2026, pedido do Marcelo: "tudo igual, tudo card,
   tudo branco/roxo, sem hierarquia"). Três pesos de superfície, em vez de
   um cartão branco para tudo:
   - escuro: só o painel de Vagas (cor da seção) e os degraus da trilha,
     na cor do curso, a única cor da seção que não é roxa;
   - cartão branco: só o que se clica e leva a outro lugar (agentes, guias,
     artigos) e a tabela de salários;
   - sem caixa: o passo a passo, as dúvidas, os blocos da trilha e as
     tendências sentam no fundo da página, separados por fio e espaço.
   Os blocos viram capítulos (.ctl-capitulo), cada um numa faixa de ponta a
   ponta, com fundo próprio (pedido do Marcelo, 24/10: "tela sem
   continuidade"): Vagas no fundo da página, Estágio no branco, Prepare-se
   no lilás da seção, a trilha na cor do curso e Conteúdos no branco. A
   faixa vaza o miolo como a fita (50vw; a .pagina corta o excesso). */
.central #carreiras .ctl-capitulo {
    margin: 0 calc(50% - 50vw);
    padding: 80px calc(50vw - 50%);
}
.central #carreiras .ctl-capitulo[data-capitulo="vagas"] {
    padding-top: 48px;                    /* logo abaixo do sumário */
}
.central #carreiras .ctl-capitulo:is([data-capitulo="estagio"], [data-capitulo="conteudos"]) {
    background: #FFFFFF;
}
.central #carreiras .ctl-capitulo[data-capitulo="preparo"] {
    background: color-mix(in oklab, var(--int-tinta) 8%, #F4F7FB);
}
.central #carreiras .ctl-capitulo[data-capitulo="trilha"] {
    background: color-mix(in oklab, var(--cur-a) 8%, #F4F7FB);
}
.central #carreiras .ctl-capitulo > h3,
.central #carreiras .ctl-rumo > h3 {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.central #carreiras .ctl-capitulo > h3 + .ctl-sub {
    margin-top: 0;
}

/* Vagas, 4ª versão (24/10: Vagas e Estágio "parecem ser basicamente a
   mesma coisa": os mesmos agentes apareciam nos dois, uma vez para o
   cadastro e outra para as vagas). Agora cada site aparece uma vez só:
   - um cartão branco por site, com o logo, o que ele oferece e, no pé, os
     dois caminhos dele, Cadastro e Vagas, em outra aba (quem tem um portal
     só leva um link, "Cadastro e vagas"). O cartão não é clicável: os
     alvos são os dois botões do pé, de 40;
   - embaixo, os portais de emprego num ladrilho lilás, fichas brancas
     quatro por linha. */
.central #carreiras .ctl-sites {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.central #carreiras .ctl-site {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central #carreiras .ctl-site-logo {
    display: block;
    width: auto;
    max-width: calc(100% - 46px);
    height: 40px;
    margin: 23px 23px 0;                  /* com a borda, 24 */
    object-fit: contain;
    object-position: left center;
}
.central #carreiras .ctl-site-desc {
    margin: 16px 23px 24px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
/* Os dois caminhos de cada site em botões suaves (24/10: "deixa mais
   moderno esses botões"): fundo na tinta da seção a 8%, cantos de 8, o
   ícone do que o botão faz à esquerda (a caneta no cadastro, a maleta nas
   vagas; o último botão do cartão é sempre o das vagas) e a seta de outra
   aba à direita. No hover o botão enche de tinta e a seta sobe um pouco. */
.central #carreiras .ctl-site-links {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    margin: 0 23px 23px;                  /* com a borda, 24 */
}
.central #carreiras .ctl-site-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--int-tinta) 8%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.central #carreiras .ctl-site-links a::before,
.central #carreiras .ctl-site-links a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.central #carreiras .ctl-site-links a::before {
    content: "\f044";                     /* pen-to-square: o cadastro */
    font-size: .875rem;
}
.central #carreiras .ctl-site-links a:last-child::before {
    content: "\f0b1";                     /* briefcase: as vagas */
}
.central #carreiras .ctl-site-links a::after {
    content: "\f35d";                     /* up-right-from-square: abre em outra aba */
    font-size: .625rem;
    opacity: .64;
    transition: opacity 150ms ease, transform 200ms var(--ctl-ease);
}
.central #carreiras .ctl-site-links a:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central #carreiras .ctl-site-links a:hover {
        background: var(--int-tinta);
        color: #FFFFFF;
        text-decoration: none;
    }
    .central #carreiras .ctl-site-links a:hover::after {
        opacity: 1;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central #carreiras .ctl-site-links a:hover::after {
        transform: translate(2px, -2px);
    }
}

/* Os portais de emprego num ladrilho lilás, como as fases dos documentos
   (24/10: a lista solta de linhas com fio estava "bem crua"). À esquerda o
   nome do bloco, com o ícone no círculo, e para que servem; à direita as
   fichas brancas, quatro por linha, nome e seta de outra aba. O último
   portal tem o nome mais longo e ocupa duas fichas: as 7 fecham as duas
   linhas sem buraco. */
.central #carreiras .ctl-portais-painel {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    align-items: center;
    gap: 16px 32px;
    margin-top: 48px;                     /* um bloco: o vão entre blocos */
    padding: 24px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--int-tinta) 7%, #FFFFFF);
}
.central #carreiras .ctl-portais-titulo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    color: #102770;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 800;
}
.central #carreiras .ctl-portais-titulo .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: var(--int-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
    color: #FFFFFF;
    font-size: .875rem;
}
.central #carreiras .ctl-portais-cabeca > p {
    margin: 8px 0 0 48px;                 /* 48: debaixo do nome, não do ícone */
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central #carreiras .ctl-portais {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.central #carreiras .ctl-portais > li:last-child {
    grid-column: span 2;
}
.central #carreiras .ctl-portais a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 0 15px;                      /* com a borda, 16 */
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04);
    color: #102770;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.central #carreiras .ctl-portais a::after {
    content: "\f35d";                     /* up-right-from-square: abre em outra aba */
    flex: none;
    color: #8E97B3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    transition: color 150ms ease, transform 200ms var(--ctl-ease);
}
.central #carreiras .ctl-portais a:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central #carreiras .ctl-portais a:hover {
        border-color: color-mix(in oklab, var(--int-tinta) 40%, #FFFFFF);
        box-shadow: 0 8px 16px -8px rgba(16, 39, 112, .24);
        color: var(--int-tinta);
        text-decoration: none;
    }
    .central #carreiras .ctl-portais a:hover::after {
        color: var(--int-tinta);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central #carreiras .ctl-portais a:hover::after {
        transform: translate(2px, -2px);
    }
}
/* Abaixo de 1200 as fichas não cabem ao lado do nome: o nome vai em cima. */
@media (max-width: 1199.98px) {
    .central #carreiras .ctl-portais-painel {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A Lei do Estágio em números: quatro ladrilhos lilás, o número grande. */
.central #carreiras .ctl-numeros {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.central #carreiras .ctl-numeros > li {
    padding: 24px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--int-tinta) 7%, #FFFFFF);
}
.central #carreiras .ctl-numeros b {
    display: block;
    color: var(--int-tinta);
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.central #carreiras .ctl-numeros span {
    display: block;
    margin-top: 8px;
    color: #3A4468;
}

/* O passo a passo do estágio, sem caixa: o trilho já agrupa. O texto de
   cada passo na mesma medida (24/10: "num tamanho padronizado pra todos
   serem iguais"): duas linhas equilibradas em todos. */
.central #carreiras .ctl-capitulo > .ctl-passos {
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.central #carreiras .ctl-passos > li > span:not(.ctl-passo-n) {
    max-width: 224px;
    min-height: 48px;
    text-wrap: balance;
}

/* Os documentos por fase (24/10: "essa seção quero mais visual"): cada fase
   é um ladrilho lilás com o nome e o ícone, e cada documento uma folha
   branca de ponta dobrada. "Para começar" vem na largura toda, com as quatro
   folhas lado a lado; "Durante o estágio" e "No fim" dividem a linha de
   baixo, com a folha deitada. O alvo continua sendo o botão. */
.central #carreiras .ctl-fases {
    --fase-fundo: color-mix(in oklab, var(--int-tinta) 7%, #FFFFFF);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.central #carreiras .ctl-fase {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 10px;
    background: var(--fase-fundo);
}
.central #carreiras .ctl-fase.is-comeco {
    grid-column: 1 / -1;
}
.central #carreiras .ctl-fase-nome {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    color: #102770;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 800;
}
.central #carreiras .ctl-fase-nome .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--int-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
    color: #FFFFFF;
    font-size: .875rem;
}
.central #carreiras .ctl-fases .ctl-docs {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.central #carreiras .ctl-fase.is-comeco .ctl-docs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* A folha: ícone, nome e o que é, e o botão no pé. A ponta de cima, à
   direita, é a dobra: o canto reto, e um triângulo na cor da fase por cima
   da metade de fora; a de dentro, mais escura, é o verso da folha. */
.central #carreiras .ctl-fases .ctl-docs > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-height: 0;
    padding: 23px;                        /* com a borda, 24 */
    border: 1px solid #E3E7F0;
    border-radius: 8px 0 8px 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central #carreiras .ctl-fases .ctl-docs > li::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 24px;
    height: 24px;
    border-bottom-left-radius: 4px;
    background: linear-gradient(225deg, var(--fase-fundo) 50%, color-mix(in oklab, var(--int-tinta) 20%, #FFFFFF) 50%);
}
.central #carreiras .ctl-fases .ctl-docs > li > .icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
}
.central #carreiras .ctl-fases .ctl-docs > li > .ctl-botao {
    margin-top: auto;
}
.central #carreiras .ctl-fase:not(.is-comeco) .ctl-docs > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
}
.central #carreiras .ctl-fase:not(.is-comeco) .ctl-docs > li > .ctl-botao {
    margin-top: 0;
}
/* Documento com modelo ainda não aprovado (24/10/2026): o selo "Em breve"
   fica no lugar do botão, cinza e sem cara de clicável. O #carreiras vence o
   ".ctl-docs li span" (o texto de apoio) sem !important. */
.central #carreiras .ctl-fases .ctl-docs > li > .ctl-selo-breve {
    display: inline-block;
    margin-top: auto;
    margin-bottom: 8px;                   /* centra na linha dos botões de 40 das folhas vizinhas */
    padding: 0 8px;
    border-radius: 4px;
    background: #EEF1F7;
    color: #3A4468;
    font-size: .75rem;
    line-height: 1.5rem;                  /* 24px de altura: grid de 8 */
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.central #carreiras .ctl-fase:not(.is-comeco) .ctl-docs > li > .ctl-selo-breve {
    margin: 0;
}

/* As dúvidas (24/10, 2ª versão: o índice dos temas saiu, "não tem
   utilidade", e a lista ficou "menos alta"). Os quatro temas em duas
   colunas, dois em cada, com as perguntas divididas 5 e 5. Cada coluna é um
   bloco no HTML (.ctl-faq-coluna): a resposta que abre empurra só a coluna
   dela, sem os temas pularem de um lado para o outro. Linha de 56 com o
   botão redondo de abrir (o + vira ×); a resposta aberta mostra o artigo da
   lei que a sustenta. */
.central #carreiras .ctl-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 32px;
    align-items: start;
}
.central #carreiras .ctl-faq-coluna {
    display: grid;
    gap: 32px;
}
.central #carreiras .ctl-faq-grupo {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.central #carreiras .ctl-faq-tema {
    padding: 0 0 8px;
    font-size: 1.125rem;
    line-height: 2rem;
}
.central #carreiras .ctl-faq details {
    border-top-color: #E3E7F0;
}
.central #carreiras .ctl-faq summary {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central #carreiras .ctl-faq summary::after {
    content: "\f067";                     /* plus: aberto, gira e vira × */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1;
    transition: transform 200ms var(--ctl-ease), background-color 150ms ease, color 150ms ease;
}
.central #carreiras .ctl-faq details[open] summary::after {
    transform: rotate(45deg);
    background: var(--int-tinta);
    color: #FFFFFF;
}
.central #carreiras .ctl-faq details > p {
    max-width: none;
    margin: 0;
    padding: 0 40px 16px 0;               /* 40: a coluna do botão de abrir */
    font-size: 1rem;
    line-height: 1.5rem;
}
.central #carreiras .ctl-faq details > p:last-child {
    padding-bottom: 24px;
}
.central #carreiras .ctl-faq-art {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    margin: 0 0 24px;
    padding: 0 8px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--int-tinta) 8%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
    font-style: normal;
    vertical-align: top;
}
.central #carreiras .ctl-faq-art::before {
    content: "\f24e";                     /* scale-balanced */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
@media (hover: hover) {
    .central #carreiras .ctl-faq summary:hover::after {
        background: color-mix(in oklab, var(--int-tinta) 18%, #FFFFFF);
    }
    .central #carreiras .ctl-faq details[open] summary:hover::after {
        background: var(--int-tinta);
        color: #FFFFFF;
    }
}

/* A trilha na cor do curso: os degraus num painel escuro, e os ícones e as
   etiquetas dos blocos na mesma cor (a tinta da seção vira a do curso). */
.central #carreiras .ctl-rumo {
    --int-tinta: var(--cur-a);
}
.central #carreiras .ctl-degraus {
    margin-bottom: 0;
    padding: 32px 16px;
    border: 0;
    background-color: var(--cur-b);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(50% 120% at 4% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--cur-a) 0%, var(--cur-b) 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
}
.central #carreiras .ctl-degraus .ctl-passo-n {
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
    color: var(--cur-a);
}
.central #carreiras .ctl-degraus > li:not(:last-child)::after {
    background: rgba(255, 255, 255, .32);
}
.central #carreiras .ctl-degraus strong {
    color: #FFFFFF;
}
.central #carreiras .ctl-degraus > li > span:not(.ctl-passo-n) {
    color: rgba(255, 255, 255, .92);
}

/* Os degraus com ícone no lugar do número (24/10: "ao invés de números,
   ícones"): círculo de 48, trilho no eixo dele (top 23), e o texto de baixo
   em duas linhas equilibradas em todos, como no passo a passo. */
.central #carreiras .ctl-degraus .ctl-passo-n {
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
}
.central #carreiras .ctl-degraus .ctl-passo-n .icon {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}
.central #carreiras .ctl-degraus > li:not(:last-child)::after {
    top: 23px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
}
.central #carreiras .ctl-degraus > li > span:not(.ctl-passo-n) {
    max-width: 256px;
}

/* Os blocos da trilha e as competências, sem caixa própria. */
.central #carreiras .ctl-rumo-bloco {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
/* Na trilha, os degraus e os três blocos são um objeto só (24/10: "muito
   jogado nesse fundo sólido"): o painel escuro é a cabeça, e os blocos
   ficam no corpo branco logo abaixo, em colunas separadas por fio. */
.central #carreiras .ctl-rumo .ctl-degraus {
    border-radius: 10px 10px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.central #carreiras .ctl-rumo .ctl-rumo-grade {
    gap: 0;
    padding: 32px 0 31px;                 /* sem fio em cima; embaixo, com o fio, 32 */
    border: 1px solid #E3E7F0;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central #carreiras .ctl-rumo .ctl-rumo-bloco {
    padding: 0 31px;
}
.central #carreiras .ctl-rumo .ctl-rumo-bloco + .ctl-rumo-bloco {
    border-left: 1px solid #EEF1F7;
}
.central #carreiras .ctl-rumo-bloco :is(h4, h5) {
    font-size: 1rem;
    line-height: 2rem;
}
.central #carreiras .ctl-tags > li {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--int-tinta) 16%, #FFFFFF);
}

/* Prepare-se em bento: o guia do currículo é o ladrilho grande, escuro, com
   a folha desenhada (a mesma dos modelos) saindo pela borda de baixo; os
   outros quatro ficam num 2×2 ao lado. */
@media (min-width: 768px) {
    .central #carreiras .ctl-guias {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .central #carreiras .ctl-guias > li:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}
@media (min-width: 1024px) {
    .central #carreiras .ctl-guias {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.central #carreiras .ctl-guias > li:first-child .ctl-guia {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border: 0;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(60% 80% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central #carreiras .ctl-guias > li:first-child .ctl-guia > .icon {
    background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .24);
    color: #FFFFFF;
}
.central #carreiras .ctl-guias > li:first-child .ctl-guia strong {
    max-width: 50%;
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.central #carreiras .ctl-guias > li:first-child .ctl-guia > span:not(.ctl-guia-ler, .ctl-folha) {
    max-width: 50%;
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
}
.central #carreiras .ctl-guias > li:first-child .ctl-guia-ler {
    color: #FFFFFF;
    font-size: 1rem;
}
.central #carreiras .ctl-guia .ctl-folha {
    position: absolute;
    right: 40px;
    bottom: -64px;
    display: block;
    width: 224px;
    transform: rotate(5deg);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .48);
    transition: transform 300ms var(--ctl-ease);
}
.central #carreiras .ctl-guia .ctl-folha b {
    background: var(--int-tinta);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central #carreiras .ctl-guia:hover .ctl-folha {
        transform: rotate(2deg) translateY(-12px);
    }
}

/* As tendências em bento, cada número com o seu gráfico: os 78 milhões no
   ladrilho grande e escuro, com o saldo (surgem × deixam de existir) em
   barras; os 39% numa grade de 100 casas; os 7 em 10 numa régua de 10. */
.central #carreiras .ctl-tendencias {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.central #carreiras .ctl-tendencias > li {
    --ladrilho: color-mix(in oklab, var(--int-tinta) 7%, #FFFFFF);
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 0;
    border-radius: 10px;
    background: var(--ladrilho);
    box-shadow: none;
}
.central #carreiras .ctl-tendencias > li:first-child {
    grid-column: span 2;
    grid-row: span 2;
    padding: 32px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(60% 80% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
}
.central #carreiras .ctl-tendencias b {
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -.03em;
}
.central #carreiras .ctl-tendencias > li:first-child b {
    color: #FFFFFF;
    font-size: 4rem;
    line-height: 4.5rem;
}
.central #carreiras .ctl-tendencias > li:first-child > span {
    max-width: 480px;
    color: rgba(255, 255, 255, .88);
    font-size: 1.125rem;
    line-height: 2rem;
}
/* Grade de 100 casas, 20 por linha, casa de 14 com vão de 2 (o vão é a cor
   do ladrilho por cima). 39 = a 1ª linha inteira e 19 casas da 2ª. */
.central #carreiras .ctl-waffle {
    width: 320px;
    max-width: 100%;
    height: 80px;
    margin-top: auto;
    background:
        linear-gradient(to right, transparent 14px, var(--ladrilho) 14px) 0 0 / 16px 16px,
        linear-gradient(to bottom, transparent 14px, var(--ladrilho) 14px) 0 0 / 16px 16px,
        linear-gradient(var(--int-tinta), var(--int-tinta)) 0 0 / 100% 16px no-repeat,
        linear-gradient(var(--int-tinta), var(--int-tinta)) 0 16px / 304px 16px no-repeat,
        color-mix(in oklab, var(--int-tinta) 20%, #FFFFFF);
}
/* Régua de 10, 7 cheias; o vão de 4 é a cor do ladrilho por cima. */
.central #carreiras .ctl-dez {
    height: 24px;
    margin-top: auto;
    border-radius: 4px;
    background:
        repeating-linear-gradient(to right, transparent 0 calc(10% - 4px), var(--ladrilho) calc(10% - 4px) 10%),
        linear-gradient(to right, var(--int-tinta) 0 70%, transparent 70%),
        color-mix(in oklab, var(--int-tinta) 20%, #FFFFFF);
}
.central #carreiras .ctl-tendencias > li:not(:first-child) > span {
    margin-bottom: 24px;
}
.central #carreiras .ctl-competencias {
    gap: 48px;
    margin-top: 48px;
}

/* Os 78 milhões (24/10, 2ª versão: "os buracos" da cascata em pé e da
   coluna do texto incomodaram). O número e a frase em cima, na largura
   toda; embaixo, a cascata deitada, uma linha por barra na mesma régua (170
   é o fim): surgem 170; deixam de existir 92, de 78 até 170; e o saldo, 78,
   a única cheia de branco. Cada barra corre num trilho claro, que fecha o
   vão da que começa no meio, e o fio tracejado liga o fim de uma ao começo
   da seguinte. Nome e valor em colunas fixas: as três barras começam e
   acabam no mesmo lugar. O <i> some (display: contents) para a barra e o
   valor caírem direto na grade da linha. */
.central #carreiras .ctl-tendencias > li:first-child > span {
    max-width: 640px;
}
/* A cascata ocupa a altura que sobra no ladrilho (24/10: "preenche melhor
   esse gap abaixo do texto"). O ladrilho tem a altura dos dois da direita,
   e o que passa do texto vai para as três linhas, por igual: metade engrossa
   a barra (48 + 50% da sobra) e metade abre o vão entre elas, com o fio
   tracejado esticando junto. Sem sobra, tudo volta a 48 e 24. */
.central #carreiras .ctl-cascata {
    display: grid;
    flex: 1 0 auto;
    grid-template-rows: repeat(3, minmax(48px, 1fr));
    gap: 24px;
    padding-top: 32px;
}
.central #carreiras .ctl-cascata p {
    position: relative;
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr) 88px;
    grid-template-areas: "nome barra valor";
    align-items: center;
    column-gap: 16px;
    margin: 0;
}
.central #carreiras .ctl-cascata .is-ganho { --de: 0;    --ate: 1;    --liga: 1; }
.central #carreiras .ctl-cascata .is-perda { --de: .459; --ate: 1;    --liga: .459; }
.central #carreiras .ctl-cascata .is-saldo { --de: 0;    --ate: .459; }
.central #carreiras .ctl-cascata p::before {
    content: "";
    grid-area: barra;
    align-self: center;
    height: calc(24px + 50%);
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
}
.central #carreiras .ctl-cascata i {
    display: contents;
    font-style: normal;
}
.central #carreiras .ctl-cascata i::before {
    content: "";
    grid-area: barra;
    align-self: center;
    height: calc(24px + 50%);
    width: calc((var(--ate) - var(--de)) * 100%);
    margin-left: calc(var(--de) * 100%);
    border-radius: 4px;
    background: rgba(255, 255, 255, .56);
}
.central #carreiras .ctl-cascata .is-perda i::before {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .32) 0 2px, transparent 2px 8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .56);
}
.central #carreiras .ctl-cascata .is-saldo i::before {
    background: #FFFFFF;
}
.central #carreiras .ctl-cascata :is(.is-ganho, .is-perda) i::after {
    content: "";
    position: absolute;
    grid-area: barra;
    top: calc(75% + 12px);                /* o pé da barra */
    left: calc(var(--liga) * 100% - 1px);
    height: 50%;                          /* até o topo da barra de baixo */
    border-left: 1px dashed rgba(255, 255, 255, .56);
}
.central #carreiras .ctl-cascata strong {
    grid-area: valor;
    color: #FFFFFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.central #carreiras .ctl-cascata em {
    grid-area: nome;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
    font-style: normal;
}
.central #carreiras .ctl-cascata .is-saldo em {
    color: #FFFFFF;
    font-weight: 700;
}

/* Os salários, do zero (24/10: "a barra não chega até o final, não tem
   sensação de comparação"): à esquerda, quantas vezes o salário do cargo
   vale a bolsa, grande, num ladrilho na cor do curso; à direita, a tabela
   com o gráfico no meio. Cada barra tem o trilho inteiro (o fim é o maior
   valor da tabela): a do cargo chega ao fim, a da bolsa para onde ela vale.
   Grid de 8: cabeça de 48, linha de 80 contando o fio; a última cede os 2px
   da borda da tabela (padding-bottom 14). */
.central #carreiras .ctl-salarios {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px;
    align-items: start;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.central #carreiras .ctl-salto {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;              /* número e frase juntos, no meio da altura da tabela */
    gap: 8px;
    margin: 0;
    padding: 24px;
    border-radius: 10px;
    background-color: var(--cur-b);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(60% 80% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--cur-a) 0%, var(--cur-b) 100%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central #carreiras .ctl-salto b {
    display: block;
    font-size: 4rem;
    line-height: 4.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.central #carreiras .ctl-salto span {
    display: block;
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
    line-height: 1.5rem;
}
.central #carreiras .ctl-salarios table {
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central #carreiras .ctl-salarios th,
.central #carreiras .ctl-salarios td {
    padding: 16px 24px 15px;
    vertical-align: middle;
}
.central #carreiras .ctl-salarios thead :is(th, td) {
    padding: 15px 24px 16px;
    background: transparent;
}
.central #carreiras .ctl-salarios tbody tr:last-child > * {
    padding-bottom: 14px;
}
.central #carreiras .ctl-salarios tbody th {
    width: 40%;
}
.central #carreiras .ctl-salarios .ctl-grafico {
    padding-left: 0;
    padding-right: 0;
}
.central #carreiras .ctl-salarios td.ctl-valor {
    width: 1%;
}
.central #carreiras .ctl-barra {
    --v: 100%;
    --cor: var(--cur-a);
    position: relative;
    display: block;
    height: 24px;
    border-radius: 4px;
    background: #EEF1F7;
}
.central #carreiras .ctl-barra::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--v);
    border-radius: 4px;
    background: var(--cor);
}
.central #carreiras .ctl-salarios tbody tr:first-child .ctl-barra {
    --cor: color-mix(in oklab, var(--cur-a) 40%, #FFFFFF);    /* a bolsa: outra coisa, mesmo tom */
}
.central #carreiras .ctl-barra[data-v="18"] { --v: 18%; }
.central #carreiras .ctl-barra[data-v="20"] { --v: 20%; }
.central #carreiras .ctl-barra[data-v="35"] { --v: 35%; }
.central #carreiras .ctl-barra[data-v="44"] { --v: 44%; }
.central #carreiras .ctl-barra[data-v="46"] { --v: 46%; }
.central #carreiras .ctl-barra[data-v="85"] { --v: 85%; }

/* O passo a passo anda com a rolagem (24/10: "faz o stepper animado"): o
   círculo de cada passo enche e o trilho até o próximo corre, um depois do
   outro, enquanto o stepper sobe na tela. As faixas contam em px a partir
   da entrada dele por baixo (cover): o 1º passo enche aos 64, e cada um
   56 depois do anterior (96 abaixo de 1200, onde os passos ficam em pé, para
   cada um encher quando chega). Só onde o navegador tem a linha do tempo
   da rolagem e ninguém pediu menos movimento; nos outros, ele já aparece
   pronto. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .central #carreiras .ctl-passos {
            --p0: 64px;
            --dp: 56px;
            view-timeline: --passos block;
        }
        .central #carreiras .ctl-passos > li:nth-child(2) { --i: 1; }
        .central #carreiras .ctl-passos > li:nth-child(3) { --i: 2; }
        .central #carreiras .ctl-passos > li:nth-child(4) { --i: 3; }
        .central #carreiras .ctl-passos > li:nth-child(5) { --i: 4; }
        .central #carreiras .ctl-passo-n {
            position: relative;
            isolation: isolate;
            background: #FFFFFF;
            box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--int-tinta) 32%, #FFFFFF), 0 0 0 4px color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
            animation: ctl-passo-tinta linear both;
            animation-timeline: --passos;
            animation-range: cover calc(var(--p0) + var(--dp) * var(--i, 0)) cover calc(var(--p0) + 40px + var(--dp) * var(--i, 0));
        }
        .central #carreiras .ctl-passo-n::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 50%;
            background: var(--int-fundo);
            animation: ctl-passo-enche linear both;
            animation-timeline: --passos;
            animation-range: inherit;
        }
        .central #carreiras .ctl-passos > li:not(:last-child)::after {
            background:
                linear-gradient(var(--int-tinta), var(--int-tinta)) 0 0 / 0% 100% no-repeat,
                color-mix(in oklab, var(--int-tinta) 24%, #FFFFFF);
            animation: ctl-trilho-corre linear both;
            animation-timeline: --passos;
            animation-range: cover calc(var(--p0) + 32px + var(--dp) * var(--i, 0)) cover calc(var(--p0) + var(--dp) + var(--dp) * var(--i, 0));
        }
        /* Na trilha, o painel é escuro: o círculo apagado é só o contorno
           branco, e enche de branco, com o ícone na cor do curso. */
        .central #carreiras .ctl-degraus .ctl-passo-n {
            background: transparent;
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .48), 0 0 0 4px rgba(255, 255, 255, .08);
            animation-name: ctl-degrau-tinta;
        }
        .central #carreiras .ctl-degraus .ctl-passo-n::before {
            background: #FFFFFF;
        }
        .central #carreiras .ctl-degraus > li:not(:last-child)::after {
            background:
                linear-gradient(#FFFFFF, #FFFFFF) 0 0 / 0% 100% no-repeat,
                rgba(255, 255, 255, .24);
        }
    }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (max-width: 1199.98px) {
        .central #carreiras .ctl-passos {
            --p0: 160px;
            --dp: 96px;
        }
        .central #carreiras .ctl-passos > li:not(:last-child)::after {
            background-size: 100% 0%, auto;
            animation-name: ctl-trilho-desce;
        }
    }
}
@keyframes ctl-passo-enche {
    from { scale: 0; }
    to { scale: 1; }
}
@keyframes ctl-passo-tinta {
    from { color: var(--int-tinta); }
    to { color: #FFFFFF; }
}
@keyframes ctl-degrau-tinta {
    from { color: #FFFFFF; }
    to { color: var(--cur-a); }
}
@keyframes ctl-trilho-corre {
    from { background-size: 0% 100%, auto; }
    to { background-size: 100% 100%, auto; }
}
@keyframes ctl-trilho-desce {
    from { background-size: 100% 0%, auto; }
    to { background-size: 100% 100%, auto; }
}

/* Tablet: as fases empilham (a folha deitada não cabe em meia linha), e o
   "Para começar" fica em duas colunas. */
@media (max-width: 1023.98px) {
    .central #carreiras .ctl-fases {
        grid-template-columns: minmax(0, 1fr);
    }
    .central #carreiras .ctl-fase.is-comeco .ctl-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Abaixo de 1200, o passo a passo e os degraus ficam em pé (24/10: "quero
   todos sempre com 2 linhas no max"). Deitados, a coluna de cada passo
   estreita e o texto passa de duas linhas já em 1100. Em pé: o círculo à
   esquerda, o nome no eixo dele e o texto ao lado, com o trilho descendo
   entre os círculos, como no celular. */
@media (max-width: 1199.98px) {
    .central #carreiras .ctl-passos {
        grid-auto-flow: row;
    }
    .central #carreiras .ctl-capitulo > .ctl-passos {
        padding: 0;
    }
    .central #carreiras .ctl-degraus {
        padding: 32px;
    }
    .central #carreiras .ctl-passos > li {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 16px;
        padding: 0 0 24px;
        text-align: left;
    }
    .central #carreiras .ctl-passos > li:last-child {
        padding-bottom: 0;
    }
    .central #carreiras .ctl-passos > li:not(:last-child)::after {
        top: 40px;
        bottom: 8px;
        left: 15px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .central #carreiras .ctl-passo-n {
        grid-row: 1 / span 2;
        margin: 0;
    }
    .central #carreiras .ctl-passos strong {
        grid-column: 2;
        line-height: 2rem;                /* a altura do círculo: o nome fica no eixo dele */
    }
    .central #carreiras .ctl-passos > li > span:not(.ctl-passo-n) {
        grid-column: 2;
        max-width: none;
        min-height: 0;
        margin: 0;
    }
    .central #carreiras .ctl-degraus > li {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .central #carreiras .ctl-degraus > li:not(:last-child)::after {
        top: 56px;
        left: 23px;
    }
    .central #carreiras .ctl-degraus strong {
        line-height: 3rem;                /* a altura do círculo */
    }
}

/* Tablet, na trilha (24/10, browser-qa em 768): três colunas de 200
   quebravam as etiquetas das competências em duas linhas dentro da
   pílula. Onde trabalhar e competências ficam lado a lado; as
   certificações descem para a largura toda, uma ao lado da outra, com o
   selo "Gratuito" embaixo do emissor. E os salários empilham como no
   celular: com um terço de 704, a tabela quebrava o cargo em cinco
   linhas. O multiplicador deita, com o número em 48. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .central #carreiras .ctl-rumo .ctl-rumo-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .central #carreiras .ctl-rumo .ctl-rumo-bloco:nth-child(3) {
        grid-column: 1 / -1;
        margin-top: 32px;
        padding-top: 31px;                /* com o fio, 32 */
        border-left: 0;
        border-top: 1px solid #EEF1F7;
    }
    .central #carreiras .ctl-rumo .ctl-certs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
        gap: 16px 32px;
    }
    .central #carreiras .ctl-rumo .ctl-certs > li {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        padding: 0;
        border-bottom: 0;
    }
    .central #carreiras .ctl-rumo .ctl-certs small {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 8px;
    }
    .central #carreiras .ctl-salarios {
        grid-template-columns: minmax(0, 1fr);
    }
    .central #carreiras .ctl-salto {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
    }
    .central #carreiras .ctl-salto b {
        flex: none;
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

/* Tablet: os sites e os portais em duas colunas, os números da lei dois a
   dois (quatro em 736 apertam "30 dias" no ladrilho), e o ladrilho dos 78
   milhões na largura toda, com os outros dois embaixo. */
@media (max-width: 1023.98px) {
    .central #carreiras .ctl-sites,
    .central #carreiras .ctl-portais {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .central #carreiras .ctl-numeros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .central #carreiras .ctl-tendencias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .central #carreiras .ctl-tendencias > li:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 767.98px) {
    .central #carreiras .ctl-capitulo {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .central #carreiras .ctl-capitulo[data-capitulo="vagas"] {
        padding-top: 32px;
    }
    /* Os sites em linha: o logo à esquerda e o que oferece à direita, o pé
       com os dois caminhos embaixo. Os portais numa coluna. */
    .central #carreiras .ctl-sites,
    .central #carreiras .ctl-portais {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central #carreiras .ctl-portais > li:last-child {
        grid-column: auto;
    }
    .central #carreiras .ctl-portais-painel {
        margin-top: 32px;
        padding: 16px;
    }
    .central #carreiras .ctl-site {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 16px;
    }
    .central #carreiras .ctl-site-logo {
        max-width: 96px;
        height: 32px;
        margin: 15px 0 16px 15px;         /* com o fio de cima, 16 */
    }
    .central #carreiras .ctl-site-desc {
        margin: 15px 15px 16px 0;         /* a linha do cartão fecha em 8: 120, 136 */
    }
    .central #carreiras .ctl-site-links {
        grid-column: 1 / -1;
        margin: 0 15px 15px;              /* com a borda, 16 */
    }
    .central #carreiras .ctl-capitulo > h3,
    .central #carreiras .ctl-rumo > h3 {
        margin-bottom: 24px;
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: -.01em;
    }
    /* Os ladrilhos no celular numa medida só (24/10: "deixa tudo
       padrao"): vão de 16, número de 32 (só a manchete dos 78 milhões, de
       40) e texto de 16. Os números da lei viram linhas: o número numa
       coluna de 112, a frase ao lado. */
    .central #carreiras .ctl-numeros {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central #carreiras .ctl-numeros > li {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        padding: 16px;
    }
    .central #carreiras .ctl-numeros span {
        margin-top: 0;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .central #carreiras .ctl-numeros b {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .central #carreiras .ctl-guias > li:first-child .ctl-guia {
        padding: 16px;
    }
    .central #carreiras .ctl-guias > li:first-child .ctl-guia strong {
        max-width: none;
        font-size: 1.125rem;
        line-height: 1.5rem;
        font-weight: 700;
        letter-spacing: 0;
    }
    .central #carreiras .ctl-guias > li:first-child .ctl-guia > span:not(.ctl-guia-ler, .ctl-folha) {
        max-width: none;
        font-size: .875rem;
    }
    .central #carreiras .ctl-guias > li:first-child .ctl-guia-ler {
        font-size: 0;
    }
    .central #carreiras .ctl-guia .ctl-folha {
        display: none;
    }
    .central #carreiras .ctl-tendencias {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central #carreiras .ctl-tendencias > li {
        padding: 16px;
    }
    .central #carreiras .ctl-tendencias > li:first-child {
        grid-column: auto;
        grid-row: auto;
        padding: 16px;
    }
    .central #carreiras .ctl-tendencias > li:first-child b {
        font-size: 2.5rem;
        line-height: 3rem;
    }
    .central #carreiras .ctl-tendencias > li:first-child > span {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .central #carreiras .ctl-waffle {          /* 20 casas de 14 não cabem em 295: casa de 12 */
        width: 280px;
        height: 72px;
        background:
            linear-gradient(to right, transparent 12px, var(--ladrilho) 12px) 0 0 / 14px 14px,
            linear-gradient(to bottom, transparent 12px, var(--ladrilho) 12px) 0 0 / 14px 14px,
            linear-gradient(var(--int-tinta), var(--int-tinta)) 0 0 / 100% 14px no-repeat,
            linear-gradient(var(--int-tinta), var(--int-tinta)) 0 14px / 266px 14px no-repeat,
            linear-gradient(var(--ladrilho), var(--ladrilho)) 0 70px / 100% 2px no-repeat,
            color-mix(in oklab, var(--int-tinta) 20%, #FFFFFF);
    }
    .central #carreiras .ctl-degraus {
        padding: 24px;
    }
    .central #carreiras .ctl-faq,
    .central #carreiras .ctl-rumo-grade,
    .central #carreiras .ctl-competencias {
        gap: 32px;
    }
    .central #carreiras .ctl-rumo .ctl-rumo-grade {
        gap: 0;
        padding: 24px 0 23px;             /* sem fio em cima; embaixo, com o fio, 24 */
    }
    .central #carreiras .ctl-rumo .ctl-rumo-bloco {
        padding: 0 23px;
    }
    .central #carreiras .ctl-rumo .ctl-rumo-bloco + .ctl-rumo-bloco {
        margin-top: 24px;
        padding-top: 23px;                /* com o fio, 24 */
        border-left: 0;
        border-top: 1px solid #EEF1F7;
    }
    .central #carreiras .ctl-competencias {
        margin-top: 32px;
    }
    .central #carreiras .ctl-tendencias b {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .central #carreiras .ctl-fase {
        padding: 16px;
    }
    .central #carreiras .ctl-fases,
    .central #carreiras .ctl-fases .ctl-docs {
        gap: 8px;
    }
    .central #carreiras .ctl-fase.is-comeco .ctl-docs {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;             /* uma por linha: cada folha na altura dela */
    }
    .central #carreiras .ctl-fases .ctl-docs > li,
    .central #carreiras .ctl-fase:not(.is-comeco) .ctl-docs > li {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 16px;
        padding: 15px;
    }
    .central #carreiras .ctl-fases .ctl-docs > li > .ctl-botao,
    .central #carreiras .ctl-fase:not(.is-comeco) .ctl-docs > li > .ctl-botao {
        grid-column: 2;
        justify-self: start;
        margin-top: 0;
    }
    .central #carreiras .ctl-fases .ctl-docs > li > .ctl-selo-breve {
        grid-column: 2;
        justify-self: start;
        margin: 0;
    }
    .central #carreiras .ctl-faq {
        grid-template-columns: minmax(0, 1fr);
    }
    .central #carreiras .ctl-faq details > p {
        padding-right: 0;
    }
    .central #carreiras .ctl-cascata {
        grid-template-rows: none;
        gap: 16px;
        padding-top: 24px;
    }
    .central #carreiras .ctl-cascata p {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "nome valor" "barra barra";
        grid-template-rows: 24px 24px;
        row-gap: 8px;
    }
    .central #carreiras .ctl-cascata p::before,
    .central #carreiras .ctl-cascata i::before {
        align-self: stretch;
        height: auto;
    }
    .central #carreiras .ctl-cascata i::after {
        display: none;
    }
    /* Os salários empilham: o multiplicador deitado, e cada linha da tabela
       com o nome e o valor em cima e a barra inteira embaixo. */
    .central #carreiras .ctl-salarios {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central #carreiras .ctl-salto {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 16px;
    }
    .central #carreiras .ctl-salto b {
        flex: none;
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .central #carreiras .ctl-salarios :is(table, thead, tbody) {
        display: block;
    }
    .central #carreiras .ctl-salarios tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        row-gap: 8px;
        padding: 16px 16px 15px;
        border-bottom: 1px solid #EEF1F7;
    }
    .central #carreiras .ctl-salarios thead tr {
        padding: 15px 16px 16px;
    }
    .central #carreiras .ctl-salarios tbody tr:last-child {
        padding-bottom: 14px;
        border-bottom: 0;
    }
    .central #carreiras .ctl-salarios :is(th, td),
    .central #carreiras .ctl-salarios tbody th,
    .central #carreiras .ctl-salarios thead :is(th, td),
    .central #carreiras .ctl-salarios tbody tr:last-child > * {
        width: auto;
        padding: 0;
        border: 0;
    }
    .central #carreiras .ctl-salarios thead td {
        display: none;
    }
    .central #carreiras .ctl-salarios .ctl-grafico {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .central #carreiras .ctl-salarios td.ctl-valor {
        align-self: start;
    }
}


/* O movimento da Central de Carreiras (24/10: "aplique animações no que
   for necessário, scroll, botões, sanfona, hover"). Cada um tem um motivo:
   - rolagem: os blocos sobem 16 e acendem ao entrar na tela, para a
     página longa ter ritmo; nas grades de 3 e 4 colunas, cada coluna um
     pouco depois da anterior. As barras dos 78 milhões e dos salários
     crescem quando chegam: o comprimento é o dado, e vê-lo crescer é a
     leitura. A que some (os 92 milhões) cresce da direita para a
     esquerda, do 170 de volta ao 78. Tudo preso à rolagem
     (animation-timeline), sem JavaScript;
   - aperto: o que se clica cede 3% (botão e ficha) ou 1% (cartão) em
     160 ms, e volta no mesmo tempo;
   - sanfona: a resposta abre em 280 ms e fecha em 200 ms (sair é mais
     rápido que entrar);
   - hover: as fichas dos portais sobem 2 px com a sombra, e a pergunta
     das dúvidas toma a cor da seção.
   Só onde o navegador tem a linha do tempo da rolagem (ou o
   ::details-content) e ninguém pediu menos movimento; nos outros, tudo
   aparece pronto. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .central #carreiras :is(.ctl-site, .ctl-portais-painel, .ctl-guias > li, .ctl-ia, .ctl-fase, .ctl-numeros > li, .ctl-faq-grupo, .ctl-rumo-grade, .ctl-salarios > *, .ctl-tendencias > li, .ctl-artigos > li) {
            animation: ctl-surge linear both;
            animation-timeline: view();
            animation-range: entry calc(var(--col, 0) * 8%) entry calc(64% + var(--col, 0) * 8%);
        }
        /* As barras: a cascata e cada barra de salário têm a própria
           linha do tempo; a 2ª e a 3ª linha da cascata vêm 48 px depois da
           anterior, e o fio tracejado acende quando as duas pontas que ele
           liga já estão no lugar. */
        .central #carreiras .ctl-cascata {
            view-timeline: --cascata block;
        }
        .central #carreiras .ctl-cascata .is-perda { --linha: 1; }
        .central #carreiras .ctl-cascata .is-saldo { --linha: 2; }
        .central #carreiras .ctl-cascata i::before {
            transform-origin: left center;
            animation: ctl-barra-cresce linear both;
            animation-timeline: --cascata;
            animation-range: cover calc(48px + var(--linha, 0) * 48px) cover calc(208px + var(--linha, 0) * 48px);
        }
        .central #carreiras .ctl-cascata .is-perda i::before {
            transform-origin: right center;
        }
        .central #carreiras .ctl-cascata i::after {
            animation: ctl-acende linear both;
            animation-timeline: --cascata;
            animation-range: cover calc(208px + var(--linha, 0) * 48px) cover calc(256px + var(--linha, 0) * 48px);
        }
        .central #carreiras .ctl-barra {
            view-timeline: --barra block;
        }
        .central #carreiras .ctl-barra::before {
            transform-origin: left center;
            animation: ctl-barra-cresce linear both;
            animation-timeline: --barra;
            animation-range: cover 48px cover 208px;
        }
    }
    /* A coluna de cada item, onde a grade tem mais de uma. */
    @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
        .central #carreiras :is(.ctl-sites > li:nth-child(3n + 2), .ctl-numeros > li:nth-child(4n + 2), .ctl-artigos > li:nth-child(3n + 2)) {
            --col: 1;
        }
        .central #carreiras :is(.ctl-sites > li:nth-child(3n + 3), .ctl-numeros > li:nth-child(4n + 3), .ctl-artigos > li:nth-child(3n + 3)) {
            --col: 2;
        }
        .central #carreiras .ctl-numeros > li:nth-child(4n + 4) {
            --col: 3;
        }
    }
}
@keyframes ctl-surge {
    from { opacity: 0; transform: translateY(16px); }
}
@keyframes ctl-barra-cresce {
    from { transform: scaleX(0); }
}
@keyframes ctl-acende {
    from { opacity: 0; }
}

/* O aperto: o que se clica cede e volta em 160 ms. */
.central #carreiras :is(.ctl-site-links a, .ctl-portais a, .ctl-sumario a) {
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 160ms var(--ctl-ease);
}
.central #carreiras :is(.ctl-site-links a, .ctl-portais a, .ctl-sumario a):active {
    transform: scale(.97);
}
.central #carreiras :is(.ctl-guia, .ctl-artigo):active {
    transform: scale(.99);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central #carreiras .ctl-portais a:hover {
        transform: translateY(-2px);
    }
    .central #carreiras .ctl-portais a:active {
        transform: scale(.97);
    }
}

/* A sanfona das dúvidas: a resposta abre e fecha em altura e opacidade. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    @media (prefers-reduced-motion: no-preference) {
        .central #carreiras .ctl-faq details {
            interpolate-size: allow-keywords;
        }
        .central #carreiras .ctl-faq details::details-content {
            block-size: 0;
            opacity: 0;
            overflow: clip;
            transition: block-size 200ms var(--ctl-ease), opacity 150ms ease, content-visibility 200ms allow-discrete;
        }
        .central #carreiras .ctl-faq details[open]::details-content {
            block-size: auto;
            opacity: 1;
            transition: block-size 280ms var(--ctl-ease), opacity 200ms ease 60ms, content-visibility 280ms allow-discrete;
        }
    }
}
@media (hover: hover) {
    .central #carreiras .ctl-faq summary {
        transition: color 150ms ease;
    }
    .central #carreiras .ctl-faq summary:hover {
        color: var(--int-tinta);
    }
}


/* --------------------------------------------------------------------------
   13. GRUPO DO WHATSAPP — regras e convite
   As duas colunas cabem na linha de 720 (a maior tem 712 no miolo de 1200).
   -------------------------------------------------------------------------- */
.central .ctl-regras-grupo {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
}
.central .ctl-regras-bloco {
    padding: 31px;
}
.central .ctl-regras-bloco h3 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-regras-bloco h3 .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: #E6F4EC;
    color: #1B8051;
    font-size: .875rem;
}
.central .ctl-regras-nao h3 .icon {
    background: #FDECEA;
    color: #B42318;
}
.central .ctl-regras li {
    padding: 12px 0 11px;
    border-bottom: 1px solid #EEF1F7;
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .ctl-regras li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.central .ctl-regras strong {
    color: #102770;
}
/* O convite vem primeiro, em destaque (pedido do Marcelo, 20/10): o painel
   escuro da Formatura no verde do WhatsApp, com o botão de vidro. Turma sem
   convite e sem aviso não mostra o painel. */
.central .ctl-convites {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    margin-bottom: 32px;
    padding: 32px;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(50% 120% at 4% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-convites:not(:has(.ctl-convites-botoes > :not([hidden]))) {
    display: none;
}
.central .ctl-convites > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-size: 1.75rem;
}
.central .ctl-convites h3 {
    margin: 0;
    color: #FFFFFF;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-convites-texto p {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .ctl-convites-botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 16px;
}
/* O botão de vidro do Liberar (CTA em fundo escuro não é botão branco). */
.central .ctl-convites .ctl-botao-zap {
    height: 48px;
    padding: 0 24px;
    border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 16px -8px rgba(0, 0, 0, .40);
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.central .ctl-convites .ctl-botao-zap:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    color: #FFFFFF;
}
@media (hover: hover) {
    .central .ctl-convites .ctl-botao-zap:hover {
        border-color: #FFFFFF;
        background-color: rgba(255, 255, 255, .12);
        color: #FFFFFF;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 16px 24px -8px rgba(0, 0, 0, .48);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-convites .ctl-botao-zap:hover {
        transform: translateY(-2px);
    }
}
.central .ctl-convites .ctl-pendente {
    padding: 11px 15px;
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .10);
    box-shadow: none;
    color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   14. FORMATURA — código, depois o formulário
   O painel do RA do portão (aprovado em 20/10), no azul da marca: grade
   fina, luz difusa no alto, o capelo no quadro de vidro, campo de vidro e
   o Validar como botão de vidro. O liberado é o mesmo painel.
   -------------------------------------------------------------------------- */
.central :is(.ctl-cartao-form, .ctl-liberado) {
    max-width: 720px;
    padding: 32px;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(70% 90% at 10% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-cartao-form {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 24px;
}
.central .ctl-cartao-form::before {
    content: "\f19d";                     /* graduation-cap: o capelo */
    grid-row: 1 / span 4;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;                         /* a altura do rótulo com o campo */
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2rem;
}
.central .ctl-cartao-form > * {
    grid-column: 2;
}
.central .ctl-cartao-form label {
    color: rgba(255, 255, 255, .88);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.central .ctl-cartao-form input {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.central .ctl-cartao-form input:focus {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, .16);
    box-shadow: none;
    outline: 2px solid #FFFFFF;           /* o anel azul sumia no painel */
    outline-offset: 2px;
}
.central .ctl-cartao-form input[aria-invalid="true"] {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 180, 168, .48);
}
/* Validar e o botão do liberado: vidro fino, borda branca (o Liberar). */
.central :is(.ctl-cartao-form, .ctl-liberado) .ctl-botao {
    min-width: 136px;
    padding: 0 32px;
    border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 16px -8px rgba(0, 0, 0, .40);
}
.central .ctl-liberado .ctl-botao {
    height: 48px;
    font-size: 1rem;
}
.central :is(.ctl-cartao-form, .ctl-liberado) .ctl-botao:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    color: #FFFFFF;
}
@media (hover: hover) {
    .central :is(.ctl-cartao-form, .ctl-liberado) .ctl-botao:not(:disabled):hover {
        border-color: #FFFFFF;
        background-color: rgba(255, 255, 255, .12);
        color: #FFFFFF;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 16px 24px -8px rgba(0, 0, 0, .48);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central :is(.ctl-cartao-form, .ctl-liberado) .ctl-botao:not(:disabled):hover {
        transform: translateY(-2px);
    }
}
.central .ctl-cartao-form .ctl-form-ajuda {
    color: rgba(255, 255, 255, .88);
}
.central .ctl-cartao-form .ctl-form-erro {
    margin-top: 16px;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 6px;
    background: #FFFFFF;
    color: #B42318;
}
.central .ctl-liberado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.central .ctl-liberado-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-liberado-selo .icon {
    margin: 0;
}
.central .ctl-liberado a:not(.ctl-botao) {
    color: #FFFFFF;
    font-weight: 600;
}
/* O aviso que o servidor põe no liberado (turma sem formulário, no lugar
   do botão) vinha no cinza do portão. Branco: o .88 do cartão do código
   dá 4,1:1 no ponto mais claro do degradê; o branco, 4,8:1. */
.central .ctl-liberado .ctl-form-ajuda {
    color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   15. AMBIENTAÇÃO — vídeos com título em cima e texto embaixo
   O quadro do vídeo (enquanto não chega) é um cartão do portão: azul da
   marca, grade fina, luz no alto e o play no quadro de vidro.
   -------------------------------------------------------------------------- */
.central .ctl-videos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 24px;
}
.central .ctl-videos h3 {
    margin-bottom: 16px;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
}
.central .ctl-video {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(60% 60% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-video .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        0 12px 24px -10px rgba(0, 0, 0, .45);
    font-size: 2rem;
}
.central .ctl-video iframe,
.central .ctl-video video {
    width: 100%;
    height: 100%;
    border: 0;
}
.central .ctl-videos p {
    max-width: 720px;
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.5rem;
}


/* --------------------------------------------------------------------------
   16. O POP-UP — mensagem do dia e ementa em PDF                              
   -------------------------------------------------------------------------- */
.central .ctl-dialogo {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #FFFFFF;
    color: #3A4468;
    box-shadow: 0 24px 64px rgba(16, 39, 112, .28);
}
.central .ctl-dialogo.is-largo {
    width: min(960px, calc(100vw - 32px));
}
.central .ctl-dialogo::backdrop {
    background: rgba(16, 39, 112, .48);
}
.central .ctl-dialogo[open] {
    animation: ctl-dlg-entra 200ms cubic-bezier(.23, 1, .32, 1);
}
@keyframes ctl-dlg-entra {               /* nome próprio: com o mesmo nome, apagava a entrada do portão */
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.central .ctl-dlg-caixa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 24px 24px;
}
.central .ctl-dlg-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3A4468;
    cursor: pointer;
}
.central .ctl-dlg-fechar .icon {
    margin: 0;
}
@media (hover: hover) {
    .central .ctl-dlg-fechar:hover {
        background: #EEF1F7;
    }
}
.central .ctl-dialogo h3 {
    padding-right: 48px;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}
.central .ctl-dlg-data {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-dlg-data .icon {
    margin: 0;
    color: #0059FB;
}
.central .ctl-dlg-texto {
    margin-top: 8px;
}
.central .ctl-dlg-pdf {
    width: 100%;
    height: min(70vh, 720px);
    margin-top: 8px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
}
.central .ctl-dlg-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}


/* --------------------------------------------------------------------------
   17. RESPOSTA AO TOQUE                                                       
   Cor e borda trocam em 150ms; o que se aperta cede 3% (1% nos cartões).
   -------------------------------------------------------------------------- */
.central :is(.ctl-escolha, .ctl-cartao, .ctl-inicio, .ctl-meet, .ctl-botao, .ctl-atalho, .ctl-agente, .ctl-ementa) {
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease, filter 150ms ease, transform 120ms ease-out;
}
.central :is(.ctl-meet, .ctl-botao):active:not(:disabled) {
    transform: scale(.97);
}
.central :is(.ctl-escolha, .ctl-atalho, .ctl-agente, .ctl-ementa):active,
.central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao:active {
    transform: scale(.99);
}
@media (prefers-reduced-motion: reduce) {
    .central * {
        transition: none !important;
        animation: none !important;
    }
    .central :active {
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   18. CELULAR (até 767)                                                       
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .central [id] {
        scroll-margin-top: 132px;         /* 60 da barra + 48 da fita + 24 */
    }

    /* Portão */
    .central .ctl-escolhas,
    .central [data-etapa="curso"] .ctl-escolhas,
    .central .ctl-escolhas-turma {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central .ctl-escolha {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 16px;
        min-height: 72px;
        padding: 15px;
    }
    .central .ctl-escolha .icon {
        margin: 0;
    }
    .central .ctl-escolha span {
        flex-basis: 100%;
    }
    .central .ctl-escolha::after {
        content: "\f054";                 /* chevron-right: a linha inteira é o alvo */
        margin-left: auto;
        color: #8E97B3;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .75rem;
    }
    .central .ctl-escolha:has(span)::after {
        order: -1;
        position: absolute;
        right: 15px;
    }
    .central .ctl-escolha:has(span) {
        position: relative;
        padding-right: 40px;
    }
    .central .ctl-form-linha {
        flex-direction: column;
    }
    .central .ctl-form input {
        flex: none;                       /* na coluna, flex:1 zerava a altura */
    }
    .central .ctl-form .ctl-botao {
        width: 100%;
    }
    .central .ctl-link {
        min-height: 40px;
    }

    /* Linha do tempo: vertical, trilho à esquerda */
    .central .ctl-linha {
        padding: 15px;
    }
    .central .ctl-metro {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
    }
    .central .ctl-metro::before,
    .central .ctl-metro::after {
        top: var(--trilho-ini, 0);
        left: var(--trilho-eixo, 0);
        width: 4px;
        margin: 0 0 0 -2px;
    }
    .central .ctl-metro::before {
        height: calc(var(--trilho-fim, 0px) - var(--trilho-ini, 0px));
    }
    .central .ctl-metro::after {
        width: 4px;
        height: calc(var(--trilho-ate, 0px) - var(--trilho-ini, 0px));
    }
    .central .ctl-metro-sem {
        padding: 8px;
    }
    .central .ctl-metro-rotulo {
        order: -1;
        margin: 0 0 8px 40px;
        text-align: left;
    }
    .central .ctl-metro-sem > ol {
        flex-direction: column;
        gap: 8px;
    }
    .central .ctl-parada {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas: "ponto nome" "ponto sub";
        column-gap: 16px;
        align-items: center;
        min-height: 40px;
        text-align: left;
    }
    .central .ctl-metro > .ctl-parada {
        margin: 0;
        padding: 0 8px;
    }
    .central .ctl-parada-ponto {
        grid-area: ponto;
    }
    .central .ctl-parada-nome {
        grid-area: nome;
        margin: 0;
        font-size: .875rem;
        line-height: 1.5rem;
    }
    .central .ctl-parada-av {
        grid-area: sub;
    }
    .central .ctl-parada:not(:has(.ctl-parada-av)) .ctl-parada-nome {
        grid-row: 1 / 3;
    }
    .central .ctl-parada-formatura {
        grid-template-columns: 24px minmax(0, 1fr);
    }
    .central .ctl-parada-formatura .ctl-parada-ponto {
        margin: 0 0 0 -8px;
    }
    .central .ctl-aqui,
    .central .ctl-parada-formatura .ctl-aqui {
        position: static;
        grid-area: nome;
        justify-self: end;
        transform: none;
    }
    .central .ctl-aqui::after {
        display: none;
    }

    /* O painel no celular: os cartões vivos vêm antes da jornada, que em pé
       mede uns 420 e empurrava a próxima aula para baixo da dobra. */
    .central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-hub {
        display: flex;
        flex-direction: column;
    }
    .central .ctl-linha {
        order: 1;
        margin: 32px 0 0;
    }
    .central .ctl-vivos {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 32px;
    }
    .central .ctl-vivo {
        min-height: 0;
        padding: 15px;
    }
    .central .ctl-vivo-titulo {
        font-size: 1.25rem;
    }
    .central .ctl-vivo-aulas li {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px 16px;
    }
    .central .ctl-vivo-aulas .ctl-meet {
        grid-column: 2;
        justify-self: start;
        height: 40px;
    }

    /* Atalhos: 2 colunas, ícone em cima e nome; a descrição sai. O nome tem
       duas linhas reservadas: os cartões ficam com a mesma altura; o 9º
       (a Declaração, no Técnico) fica sozinho no meio da última linha. */
    .central .ctl-cartoes {
        --ctl-vao: 8px;
    }
    .central .ctl-cartao {
        min-height: 136px;                /* 16 + ícone 40 + 16 + nome 48 + 16 */
        padding: 16px;
    }
    .central .ctl-cartao .icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    .central .ctl-cartao strong {
        display: block;                   /* flex partia o .ctl-longo em outro item e comia o espaço */
        min-height: 48px;
        margin-top: 16px;
        font-size: 1rem;
    }
    .central .ctl-cartao > span {
        display: none;
    }
    .central .ctl-cartao .ctl-so-celular {
        display: inline;
    }
    .central:not(:has(.ctl-secao:target, .ctl-secao :target)) .ctl-cartao::after {
        top: 28px;                        /* centro do quadro de 40 */
        right: 16px;
    }

    /* Cartões em lista */
    .central .ctl-ementas,
    .central .ctl-atalhos,
    .central .ctl-agentes,
    .central .ctl-regras-grupo,
    .central .ctl-videos {
        grid-template-columns: minmax(0, 1fr);
    }
    .central .ctl-ementas,
    .central .ctl-atalhos {
        gap: 8px;
    }
    .central .ctl-atalho {
        min-height: 56px;
        padding: 7px 15px;
    }
    .central .ctl-regras-bloco,
    .central .ctl-pendente {
        padding: 15px;
    }
    .central .ctl-ementa {
        min-height: 80px;
        padding: 15px;
    }
    /* Comunicações: o cartão com 24 a menos, e a borda do próximo aparece. */
    .central .ctl-msg-trilho {
        grid-auto-columns: calc(100% - 24px);
        column-gap: 8px;
    }
    .central .ctl-msg {
        padding: 0 15px 15px;
    }
    .central .ctl-msg-faixa {
        margin: -1px -16px 16px;
        padding: 0 16px;
    }
    .central .ctl-msg h3 {
        font-size: 1.375rem;
        line-height: 2rem;
    }
    .central .ctl-msg-texto {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .central .ctl-agente {
        min-height: 96px;
        padding: 16px 40px 16px 16px;
    }
    .central .ctl-agente::after {
        right: 16px;
    }
    /* Formatura: o painel do RA no celular, com o capelo ao lado do rótulo. */
    .central :is(.ctl-cartao-form, .ctl-liberado) {
        padding: 16px;
    }
    .central .ctl-cartao-form {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
    }
    .central .ctl-cartao-form::before {
        grid-row: 1;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 1.125rem;
    }
    .central .ctl-cartao-form label {
        grid-column: 2;
        margin: 0;
    }
    .central .ctl-cartao-form > :not(label) {
        grid-column: 1 / -1;
    }
    .central .ctl-cartao-form .ctl-form-linha {
        margin-top: 16px;
    }
    .central :is(.ctl-cartao-form, .ctl-liberado) .ctl-botao {
        width: 100%;
    }
    .central .ctl-videos {
        row-gap: 32px;
    }

    /* A fita no celular: 48 de altura, rola de lado (o script traz a aba
       acesa para a vista). */
    .central:has(.ctl-secao:target, .ctl-secao :target) .ctl-hub {
        height: 48px;
        margin-bottom: 24px;
    }
    /* O nome do atalho no painel reserva duas linhas (min-height 48); na fita
       isso subia o rótulo para o topo da aba, colado no herói. */
    .central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartao strong {
        min-height: 0;
    }

    /* Os mais lidos no celular: o destaque em cima, mais baixo; os outros
       em lista, número e categoria na linha de cima, sem o resumo. */
    .central .ctl-lidos {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .central .ctl-lido {
        grid-template-rows: 40px auto auto;
        padding: 15px;
    }
    .central .ctl-lido strong {
        margin-top: 8px;
    }
    .central .ctl-lidos > li:not(:first-child) .ctl-lido-resumo {
        display: none;
    }
    .central .ctl-lido-meta {
        margin-top: 0;
    }
    .central .ctl-lido::after {
        top: 28px;                        /* centro do número de 40 */
        right: 16px;
    }
    .central .ctl-lidos > li:first-child .ctl-lido {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: 48px auto auto auto;
        padding: 24px;
    }
    .central .ctl-lidos > li:first-child .ctl-lido-n {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .central .ctl-lidos > li:first-child .ctl-lido strong {
        margin-top: 24px;
        font-size: 1.25rem;
        line-height: 2rem;
    }
    .central .ctl-lidos > li:first-child .ctl-lido-meta {
        grid-row: auto;
        flex-wrap: wrap;
        row-gap: 16px;
        margin-top: 16px;
    }
    .central .ctl-lidos > li:first-child .ctl-lido-ler {
        flex: 1 0 100%;
        justify-content: center;
        margin-left: 0;
    }

    /* O convite: o ícone e o texto numa linha, o botão embaixo, inteiro. */
    .central .ctl-convites {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 24px;
        padding: 24px;
    }
    .central .ctl-convites > .icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
    .central .ctl-convites-botoes {
        grid-column: 1 / -1;
    }
    .central .ctl-convites .ctl-botao-zap {
        width: 100%;
    }

    .central .ctl-dlg-caixa {
        padding: 16px;
    }
    .central .ctl-dialogo h3 {
        font-size: 1.25rem;
        line-height: 2rem;
    }
}

/* ==========================================================================
   EM BREVE — entrega parcial (pedido do Marcelo, 20/10/2026). O que ainda não
   está pronto fica à vista, apagado, com o selo, e não abre: no portão, o
   botão leva `disabled data-em-breve` e um <span class="ctl-selo-breve">.
   Quando ficar pronto: apagar os dois atributos e o selo.
   ========================================================================== */
.central .ctl-escolha[data-em-breve] {
    position: relative;
    cursor: not-allowed;
}
.central [data-etapa="tipo"] .ctl-escolha[data-em-breve] {
    filter: saturate(.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: none;
}
.central [data-etapa="tipo"] .ctl-escolha[data-em-breve] .icon {
    opacity: .4;
    transform: none;
}
.central [data-etapa="tipo"] .ctl-escolha[data-em-breve] strong {
    color: rgba(255, 255, 255, .72);
}
.central .ctl-escolha .ctl-selo-breve {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 0 8px;
    border-radius: 4px;
    background: #FFFFFF;
    color: #102770;
    font-size: .75rem;
    line-height: 1.5rem;                  /* 24px de altura: grid de 8 */
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* No painel: o cartão travado. O [aria-disabled] sobe o peso acima do
   :not(:has(...)):hover dos cartões, que levantava o cartão no mouse. */
.central .ctl-cartao[data-em-breve][aria-disabled="true"] {
    cursor: not-allowed;
    filter: saturate(.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: none;
}
.central .ctl-cartao[data-em-breve][aria-disabled="true"] .icon {
    opacity: .4;
    transform: none;
}
.central .ctl-cartao[data-em-breve][aria-disabled="true"] strong {
    color: rgba(255, 255, 255, .72);
}
.central .ctl-cartao[data-em-breve][aria-disabled="true"] > span:not(.ctl-selo-breve) {
    color: rgba(255, 255, 255, .6);
}
.central .ctl-cartao[data-em-breve][aria-disabled="true"]::after {
    content: none;                        /* sem a seta: não leva a lugar nenhum */
}
.central .ctl-cartao .ctl-selo-breve {
    display: block;                       /* no celular o apoio (> span) some; o selo, não */
    position: absolute;
    top: 36px;                            /* no eixo do ícone: 24 + 24 − 12 */
    right: 24px;
    padding: 0 8px;
    border-radius: 4px;
    background: #FFFFFF;
    color: #102770;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* Na fita: a aba só fica cinza-clara, sem traço e sem selo (pedido do
   Marcelo, 20/10: com o selo a fita passava da tela e cortava a última). */
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartao[data-em-breve][aria-disabled="true"] {
    filter: none;
    color: #8A93B0;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartao[data-em-breve][aria-disabled="true"] strong {
    color: inherit;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartao[data-em-breve][aria-disabled="true"]::after {
    content: none;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartao > .ctl-selo-breve {
    display: none;
}
/* Link de dentro que levaria a seção travada (o professor no calendário):
   vira texto. */
.central a[data-em-breve][aria-disabled="true"]:not(.ctl-cartao) {
    color: inherit;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}
.central .ctl-vivos[hidden] {
    display: none;
}
/* AVISO DA VOLTA ÀS AULAS (21/10/2026): o cartão vivo, sozinho e na largura
   toda, enquanto os vivos estão Em breve. Sem link, não sobe no hover. */
.central .ctl-avisos {
    display: grid;
    margin: 0 0 48px;
}
.central .ctl-avisos[hidden],
.central .ctl-aviso[hidden] {
    display: none;
}
.central .ctl-aviso {
    min-height: 0;
}
.central .ctl-aviso:not(:has(.ctl-meet)):hover {
    border-color: #E3E7F0;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    transform: none;
}
.central .ctl-aviso .ctl-vivo-texto {
    -webkit-line-clamp: unset;
}
.central .ctl-aviso-link {
    margin: 16px 0 0;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-style: italic;
}
.central .ctl-aviso .ctl-meet {
    height: 40px;
    margin-top: 16px;
    padding: 0 16px;
    font-size: .875rem;
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-avisos {
    display: none;
}
@media (max-width: 767.98px) {
    .central .ctl-avisos {
        margin-bottom: 32px;
    }
    .central .ctl-aviso {
        padding: 15px;
    }
}
@media (max-width: 767.98px) {
    .central .ctl-cartao .ctl-selo-breve {
        top: 24px;                        /* no eixo do ícone de 40: 16 + 20 − 12 */
        right: 16px;
    }
}


/* --------------------------------------------------------------------------
   19. HORÁRIOS (22/10/2026)
   A faixa da aula no painel (fina, logo abaixo da jornada) e a seção: a
   aula no ar ou a próxima (escuro, na estética dos cartões), as
   100% EaD (no âmbar da faixa do calendário, que já dizia "obrigatórias,
   valem nota") e a semana. Tudo desenhado pelo script.
   -------------------------------------------------------------------------- */

/* A faixa da aula, logo abaixo da jornada (Marcelo, 22/10: o quadro da
   aula saiu do cartão de Horários e virou um cartão próprio, fino, para não
   competir com a jornada). Clara como os cartões vivos, numa linha só: ícone,
   quando e o quê, a semana e o Entrar. O cartão inteiro
   leva aos Horários (o ::after do link); o Entrar fica por cima dele. */
.central .ctl-faixa-aula {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 48px;
    padding: 15px 31px;                   /* 16 e 32 com a borda: no eixo da jornada */
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    transition: border-color 150ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.central .ctl-faixa-aula[hidden] {
    display: none;
}
.central .ctl-linha:has(+ .ctl-faixa-aula:not([hidden])) {
    margin-bottom: 16px;                  /* a faixa pertence à jornada: fica colada nela */
}
.central .ctl-faixa-aula:has(.ctl-fa-link:focus-visible) {
    border-color: #0059FB;
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    .central .ctl-faixa-aula:hover {
        border-color: #C9D0E0;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .central .ctl-faixa-aula:hover {
        transform: translateY(-2px);
    }
}
.central .ctl-fa-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--int-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 16px -8px rgba(7, 31, 58, .40);
    color: #FFFFFF;
    font-size: 1rem;
}
.central .ctl-fa-texto {
    flex: 1 1 auto;
    min-width: 0;
}
.central .ctl-fa-texto :where(p) {
    margin: 0;
}
.central .ctl-fa-rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-faixa-aula.is-no-ar .ctl-fa-rotulo {
    color: #B42318;
}
.central .ctl-fa-falta {                  /* "Começa em": a pílula cabe na linha de 24 */
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #EEF2FB;
    color: #3A4468;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-fa-falta.is-aberta {        /* a sala abriu: o vermelho do botão */
    background: #FEECEB;
    color: #B42318;
}
.central .ctl-fa-link {
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    text-decoration: none;
}
.central .ctl-fa-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}
.central .ctl-fa-link:focus-visible {
    outline: 0;                           /* o anel vai no cartão inteiro */
}
.central .ctl-fa-quando {
    font-weight: 800;
}
.central .ctl-fa-ponto {
    margin: 0 8px;
    color: #8089A6;
}
.central .ctl-fa-disc {
    font-weight: 600;
}
.central .ctl-fa-semana {
    display: flex;
    flex: none;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.central .ctl-fa-semana li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #F1F3F8;
    color: #8089A6;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-fa-semana li.tem-aula {
    background: #E6EEFF;
    color: #0047C9;
}
.central .ctl-fa-semana li.is-hoje {
    background: #0059FB;
    color: #FFFFFF;
}
.central .ctl-fa-entrar {
    position: relative;
    z-index: 1;                           /* acima do ::after do link */
    flex: none;
    height: 40px;
    padding: 0 16px;
    background: #CDD3DF;                  /* cinza, mas clicável, até 15 minutos antes (como no painel) */
    color: #2E3A5C;
    font-size: .875rem;
}
.central .ctl-fa-entrar.is-aceso {        /* a sala abriu: 15 minutos antes e no ar */
    background: #D92D20;
    color: #FFFFFF;
}
@media (hover: hover) {
    .central .ctl-fa-entrar:hover {
        background: #BEC6D6;              /* no branco o cinza escurece (no azul do painel, clareia) */
        color: #2E3A5C;
    }
    .central .ctl-fa-entrar.is-aceso:hover {
        background: #B42318;
        color: #FFFFFF;
    }
}
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-faixa-aula {
    display: none;
}
/* Abaixo de 1024 a semana sai: a faixa continua numa linha (a semana
   inteira está na seção). */
@media (max-width: 1023.98px) {
    .central .ctl-fa-semana {
        display: none;
    }
}

/* O ponto do "ao vivo": vermelho, com a onda (some com menos movimento). */
.central .ctl-hor-pulso {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF4D4F;
}
.central .ctl-hor-pulso::after {          /* a onda é um disco que cresce e some: só transform e opacity */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #FF4D4F;
    animation: ctl-pulso 1.6s cubic-bezier(.23, 1, .32, 1) infinite;
}
@keyframes ctl-pulso {
    from { opacity: .64; transform: scale(1); }
    to   { opacity: 0; transform: scale(2.33); }      /* 12 + 8 de cada lado */
}

/* A seção: a aula no ar ou a próxima e as 100% EaD lado a lado (as duas
   formas de estudar), a semana embaixo. */
.central .ctl-hor :where(p) {
    margin: 0;                            /* :where: as classes abaixo dizem a margem delas */
}
.central .ctl-hor-topo {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}
.central .ctl-hor-topo.is-so {
    grid-template-columns: minmax(0, 1fr);
}
.central .ctl-hor-rotulo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-hor-rotulo .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 1rem;
}

.central .ctl-hor-prox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    border-radius: 10px;
    background-color: var(--int-base);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(70% 60% at 0% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        var(--int-fundo);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    background-position: -1px -1px, -1px -1px, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 2px 4px rgba(7, 31, 58, .12),
        0 12px 24px -8px rgba(7, 31, 58, .32);
    color: #FFFFFF;
}
.central .ctl-hor-prox .ctl-hor-rotulo {
    color: #FFFFFF;
}
.central .ctl-hor-prox .ctl-hor-rotulo .icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .24);
    color: #FFFFFF;
}
.central .ctl-hor-pulso-caixa {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.central .ctl-hor-prox-quando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    color: #FFFFFF;                       /* a .88 dava 4,3:1 no alto do degradê */
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-hor-falta {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-hor-prox-disc {
    margin: 8px 0 16px;
    color: #FFFFFF;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.central .ctl-hor-prox.is-calmo .ctl-hor-prox-disc {
    font-size: 1.5rem;
    line-height: 2rem;
}
.central .ctl-hor-prox-texto {
    max-width: 560px;
    color: rgba(255, 255, 255, .80);
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .ctl-hor-prox-prof {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    color: #FFFFFF;
    text-decoration: none;
}
.central .ctl-hor-prox-prof .ctl-hor-ini {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .88), 0 8px 16px -4px rgba(7, 31, 58, .48);
    color: #FFFFFF;
    font-size: .875rem;
}
.central .ctl-hor-prof-nome {
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-hor-prof-nome span {
    color: rgba(255, 255, 255, .80);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
@media (hover: hover) {
    .central a.ctl-hor-prox-prof:hover .ctl-hor-prof-nome {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}
.central a.ctl-hor-prox-prof:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
    border-radius: 8px;
}
.central .ctl-hor-prox-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding-top: 24px;                    /* colado no docente: quando o cartão da EaD é mais alto, a sobra fica embaixo */
}
.central .ctl-hor-entrar {               /* cinza, mas clicável, até 15 minutos antes */
    height: 48px;
    padding: 0 24px;
    background: #CDD3DF;
    color: #2E3A5C;
    font-size: 1rem;
    font-weight: 700;
}
.central .ctl-hor-entrar.is-aceso {      /* a sala abriu: 15 minutos antes e no ar */
    background: #D92D20;
    color: #FFFFFF;
}
@media (hover: hover) {
    .central .ctl-hor-entrar:hover {
        background: #E3E7F0;
        color: #2E3A5C;
    }
    .central .ctl-hor-entrar.is-aceso:hover {
        background: #B42318;
        color: #FFFFFF;
    }
}
.central .ctl-hor-entrar:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}
.central .ctl-hor-sem-link {              /* aula sem sala no Meet ainda: no lugar do Entrar, com a altura dele */
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: rgba(255, 255, 255, .80);
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-hor-depois {
    color: rgba(255, 255, 255, .80);
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-hor-depois strong {
    color: #FFFFFF;
}

/* As 100% EaD: o âmbar da faixa do calendário. */
.central .ctl-hor-ead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 31px;
    border: 1px solid #F2D4A6;
    border-radius: 10px;
    background: #FFF7EB;
}
.central .ctl-hor-ead .ctl-hor-rotulo {
    margin-bottom: 16px;
    color: #102770;
}
.central .ctl-hor-ead .ctl-hor-rotulo .icon {
    background: #A16100;
    color: #FFFFFF;
}
.central .ctl-hor-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.central .ctl-hor-selos span {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #102770;
    color: #FFFFFF;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-hor-selos span + span {
    background: #7A4A00;
}
.central .ctl-hor-ead-lista {
    width: 100%;
}
.central .ctl-hor-ead-lista li {
    padding: 8px 0;
    box-shadow: inset 0 1px 0 #F2D4A6;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-hor-ead-texto {
    margin: 8px 0 24px;
    color: #7A4A00;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-hor-ead-ir {
    gap: 8px;
}
.central .ctl-hor-ead-ir .icon {
    font-size: .75rem;
}

/* A semana. */
.central .ctl-hor-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 16px;
    margin: 0 0 16px;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .ctl-hor-titulo span {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
}
.central .ctl-hor-semana {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* As colunas (72 do dia, o que cabe "Segunda", + uma por hora) vêm do script, no style da lista,
   e cada dia herda as mesmas: a aula das 20h fica embaixo da das 20h, e
   as aulas de um dia têm a mesma largura. Subgrid não serve aqui: ele
   desconta o respiro da borda só da última coluna. */
.central .ctl-hor-dia {
    display: grid;
    grid-template-columns: inherit;
    column-gap: 16px;
    align-items: center;
    padding: 7px 7px 7px 15px;            /* 8 e 16 com a borda */
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central .ctl-hor-dia.is-hoje {
    border-color: #0059FB;
    box-shadow: 0 0 0 1px #0059FB, 0 16px 32px -16px rgba(0, 89, 251, .40);
}
.central .ctl-hor-dia.is-passado {
    background: #F8F9FC;
    box-shadow: none;
}
/* O dia: o nome e a data embaixo. Hoje se marca pela borda azul. */
.central .ctl-hor-dia-nome {
    display: flex;
    flex-direction: column;
}
.central .ctl-hor-dia-nome strong {
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
}
.central .ctl-hor-dia-nome span {
    color: #5A668C;
    font-size: .8125rem;
    line-height: 1.5rem;
}
/* A aula: a hora num selo à esquerda (o que se procura primeiro), a
   disciplina e quem dá a aula com a foto. O Entrar fica só no painel. */
.central .ctl-hor-aula {
    display: grid;
    align-self: stretch;                  /* as aulas do mesmo dia com a mesma altura */
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "hora disc" "hora quem";
    align-items: center;
    gap: 8px 16px;
    padding: 16px;
    border-radius: 8px;
    background: #F5F7FB;
}
.central .ctl-hor-hora {
    display: flex;
    flex-direction: column;
    grid-area: hora;
    align-self: stretch;                  /* acompanha a altura da aula: a vizinha de duas linhas estica as duas */
    align-items: center;
    justify-content: center;
    width: 64px;
    min-height: 56px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #E3E7F0;
    font-variant-numeric: tabular-nums;
}
.central .ctl-hor-hora strong {
    color: #102770;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 800;
}
.central .ctl-hor-hora span {
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
}
.central .ctl-hor-disc {
    grid-area: disc;
    align-self: end;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
/* Aula de revisão (22/10/2026): "– <matéria>" não se parte do travessão;
   se não cabe na linha, desce inteira (central.js, discHtml). */
.central .ctl-rev-disc {
    display: inline-block;
}
.central .ctl-hor-aula:not(:has(.ctl-hor-quem)) .ctl-hor-disc {
    grid-row: 1 / 3;
    align-self: center;
}
.central .ctl-hor-quem {
    display: flex;
    flex-wrap: wrap;
    grid-area: quem;
    align-self: start;
    align-items: center;
    gap: 4px 16px;
}
.central .ctl-hor-onde {                 /* aula especial: onde ela passa, no lugar do docente */
    display: inline-flex;
    align-items: center;
    min-height: 32px;                     /* a altura da foto do docente: a aula especial tem o tamanho das outras */
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .ctl-hor-prof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none;
}
@media (hover: hover) {
    .central a.ctl-hor-prof:hover {
        color: #102770;
        text-decoration: underline;
    }
}
.central .ctl-hor-noar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #FDECEC;
    color: #B42318;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 800;
}
.central .ctl-hor-noar .ctl-hor-pulso {
    width: 8px;
    height: 8px;
}
/* A foto por cima das iniciais (sem foto, ficam as iniciais). */
.central .ctl-hor-ini {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EAF1FF;
    color: #0047C9;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.central .ctl-hor-ini img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.central .ctl-hor-aula.is-no-ar {
    background: #FFF1F0;
    box-shadow: inset 0 0 0 1px #F7C9C4;
}
.central .ctl-hor-aula.is-no-ar .ctl-hor-hora strong {
    color: #B42318;
}
/* O que já passou fica cinza, ainda legível (4,6:1 no fundo da aula). */
.central :is(.ctl-hor-dia.is-passado, .ctl-hor-aula.is-acabou) :is(.ctl-hor-dia-nome strong, .ctl-hor-hora strong, .ctl-hor-disc, .ctl-hor-prof) {
    color: #646E92;
}
/* A foto do que passou fica cinza, sem transparência: com ela, as iniciais
   de baixo apareciam através da foto (Marcelo, 22/10/2026). */
.central :is(.ctl-hor-dia.is-passado, .ctl-hor-aula.is-acabou) .ctl-hor-ini img {
    filter: grayscale(1);
}
/* Dia sem aula: uma linha fina. Hora vaga num dia com aula: a vaga. */
.central .ctl-hor-livre {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / -1;
    align-items: center;
    gap: 0 8px;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #F5F7FB;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-hor-livre strong {
    color: #3A4468;
}
.central .ctl-hor-livre span::before {
    content: "·";
    margin-right: 8px;
}
.central .ctl-hor-vaga {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px dashed #D5D8E2;
    border-radius: 8px;
    color: #646E92;                       /* 5:1 no branco */
    font-size: .8125rem;
    line-height: 1.5rem;
}
.central .ctl-hor-vazio {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 720px;
    padding: 23px;
    border: 1px dashed #C9D0E0;
    border-radius: 10px;
    background: #FFFFFF;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .ctl-hor-vazio .icon {
    margin-top: 4px;
    color: #0047C9;
}
.central .ctl-hor-vazio strong {
    color: #102770;
}

/* Abaixo de 1024 o dia empilha: o nome em cima, as aulas embaixo. */
@media (max-width: 1023.98px) {
    .central .ctl-hor-topo {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 32px;
    }
    .central .ctl-hor-semana {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .central .ctl-hor-dia {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 15px;
    }
    .central .ctl-hor-dia-nome {
        flex-direction: row;
        align-items: center;              /* baseline com dois corpos dá 25px e sai do grid */
        gap: 8px;
    }
    .central .ctl-hor-vaga {
        min-height: 40px;
    }
    .central a.ctl-hor-prof {
        min-height: 40px;                 /* quando Docentes abrir, o nome vira link: 40 no toque */
    }
    /* Empilhado, não há vizinha para acompanhar: o selo fica do tamanho
       dele, na altura do título (esticado, virava uma coluna vazia). */
    .central .ctl-hor-hora {
        align-self: start;
        height: 56px;
    }
}
@media (max-width: 767.98px) {
    /* A faixa no celular: a primeira coisa do painel (a jornada desce, ver
       a seção 3); o Entrar vai para a linha de baixo, no eixo do texto. */
    .central .ctl-faixa-aula {
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 32px;
        padding: 15px;
    }
    .central .ctl-linha:has(+ .ctl-faixa-aula:not([hidden])) {
        margin-bottom: 0;
    }
    .central .ctl-fa-texto {
        flex-basis: calc(100% - 56px);
    }
    .central .ctl-fa-ponto {
        display: none;
    }
    .central .ctl-fa-disc {
        display: block;                   /* o nome da disciplina na linha dele, sem quebrar no meio */
    }
    .central .ctl-fa-entrar {
        margin-left: 56px;                /* ícone 40 + 16 */
    }
    .central .ctl-hor-prox {
        padding: 16px;
    }
    .central .ctl-hor-prox-disc {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .central .ctl-hor-prox-acoes {
        width: 100%;
    }
    .central .ctl-hor-entrar {
        width: 100%;
    }
    .central .ctl-hor-ead {
        padding: 15px;
    }
    .central .ctl-hor-ead-ir {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   20. AMBIENTAÇÃO (refeita em 26/10/2026) — a lista dos vídeos e o palco
   À esquerda, a lista dos vídeos, numa superfície só, agrupada pelo que o
   aluno vai fazer (entrar, estudar, se organizar), com o progresso no alto.
   À direita, o palco: o vídeo vertical (9:16, como foi gravado) e, ao lado,
   o passo a passo escrito, com a dica e o botão para o próximo. Medidas na
   grade de 8 (o 4 só na barra do progresso). Fica no fim do arquivo, depois
   do celular e dos Horários, na mesma ordem em que foi aprovada. As regras
   .ctl-videos da seção 15 eram do quadro provisório e não têm mais uso.
   -------------------------------------------------------------------------- */
.central .amb {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* ---------- A lista ---------- */
/* Gruda abaixo da fita (que termina em 124 no desktop) só quando cabe
   inteira na janela; numa tela baixa, rola com a página. */
@media (min-width: 1100px) and (min-height: 800px) {
    .central .amb-lista {
        position: sticky;
        top: 140px;
    }
}
.central .amb-lista {
    padding: 15px 7px 7px;                   /* 16/8 menos o fio de 1 */
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
.central .amb-progresso {
    margin: 0 8px 8px;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .amb-progresso strong {
    color: #102770;
    font-weight: 700;
}
.central .amb-progresso .icon {
    margin-right: 8px;
    color: #0047C9;
}
.central .amb-barra {
    display: block;
    height: 4px;
    margin-top: 4px;                         /* texto 24 + 4 + barra 4 = 32 */
    border-radius: 2px;
    background: #E8ECF5;
    overflow: hidden;
}
.central .amb-barra > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: var(--int-fundo);
    transform: scaleX(0);                    /* o JS põe a fração; transform não refaz o layout */
    transform-origin: left center;
    transition: transform .4s var(--ctl-ease);
}
.central .amb-grupo {
    margin: 16px 8px 8px;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.central .amb-itens {
    margin: 0;
    padding: 0;
    list-style: none;
}
.central :is(.amb-item, .amb-breve) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    padding: 8px;
    border-radius: 8px;
    color: #102770;
    text-decoration: none;
    transition: background-color .2s ease;
}
.central .amb-item strong,
.central .amb-breve strong {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .amb-dur {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.central .amb-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--int-tinta) 24%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 800;
}
@media (hover: hover) {
    .central :is(.amb-item, .amb-breve):hover {
        background: #F3F6FD;
    }
}
.central :is(.amb-item, .amb-breve):focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
/* O aberto: fundo azul-claro e o número no azul da marca. */
.central .amb-item[aria-current="true"] {
    background: #EAF0FF;
}
.central .amb-item[aria-current="true"] .amb-n {
    background: var(--int-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 4px color-mix(in oklab, var(--int-tinta) 12%, #FFFFFF);
    color: #FFFFFF;
}
/* Assistido: o número vira o visto. */
.central .amb-item.is-visto .amb-n {
    font-size: 0;
}
.central .amb-item.is-visto .amb-n::before {
    content: "\f00c";
    font: var(--fa-font-solid);
    font-size: .875rem;
}
.central .amb-item.is-visto:not([aria-current="true"]) .amb-n {
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    box-shadow: none;
}
/* O que ainda não tem vídeo: leva ao tutorial escrito, num tom abaixo. */
.central .amb-breve {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 0;
    margin-top: 8px;
    padding-top: 15px;                       /* 16 menos o fio */
    border-top: 1px solid #EEF1F6;
    border-radius: 0 0 8px 8px;
}
.central .amb-breve .amb-n {
    grid-row: span 2;
    box-shadow: inset 0 0 0 2px #D5D8E2;
    color: #8790AE;
}
.central .amb-breve strong {
    color: #3A4468;
}
.central .amb-breve .amb-dur {
    grid-column: 2;
    color: #0047C9;
    white-space: normal;
}
.central .amb-breve .amb-dur .fa {
    margin-left: 8px;
    font-size: .75rem;
}

/* ---------- O palco ---------- */
.central .amb-tut {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 23px;                           /* 24 menos o fio */
    border: 1px solid #E3E7F0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
    scroll-margin-top: 140px;                /* fita (124) + 16 */
}
.central .amb-tut + .amb-tut {
    margin-top: 24px;                        /* sem JS, um embaixo do outro */
}
.central .amb-js .amb-tut {
    display: none;
}
.central .amb-js .amb-tut.is-aberto {
    display: grid;
    margin-top: 0;
}
/* Trocar de vídeo acontece várias vezes seguidas: entrada curta, 200. Com
   movimento reduzido, só a opacidade, para a troca não ser seca. */
.central .amb-js .amb-tut.is-aberto {
    animation: amb-surge .2s ease-out;
}
@media (prefers-reduced-motion: no-preference) {
    .central .amb-js .amb-tut.is-aberto {
        animation-name: amb-entra;
        animation-timing-function: var(--ctl-ease);
    }
}
@keyframes amb-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes amb-surge {
    from { opacity: 0; }
    to { opacity: 1; }
}
.central .amb-tela {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    background: #071F3A;
    box-shadow: 0 0 0 1px rgba(16, 39, 112, .08), 0 24px 40px -24px rgba(7, 31, 58, .56);
    overflow: hidden;
}
.central .amb-tela video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #071F3A;
}
/* Antes do primeiro play, a capa inteira é o botão (sem os controles do
   navegador por cima do título); depois, os controles de sempre. */
.central .amb-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    padding: 0 0 48px;
    border: 0;
    background: linear-gradient(180deg, rgba(7, 31, 58, 0) 55%, rgba(7, 31, 58, .56) 100%);
    color: #FFFFFF;
    font: inherit;
    cursor: pointer;
}
.central .amb-play-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 0 0 1px rgba(255, 255, 255, .32), 0 16px 32px -16px rgba(0, 0, 0, .64);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 1.5rem;
    transition: transform .16s var(--ctl-ease), background-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .central .amb-play-icone {
        transition: background-color .2s ease;   /* sem crescer nem afundar */
    }
    .central .amb-play:is(:hover, :active) .amb-play-icone {
        transform: none;
    }
}
.central .amb-play-icone .fa {
    margin-left: 4px;                        /* o triângulo pesa à esquerda */
}
.central .amb-play-rotulo {
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
@media (hover: hover) {
    .central .amb-play:hover .amb-play-icone {
        background: #0059FB;
        transform: scale(1.06);
    }
}
.central .amb-play:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -6px;
    border-radius: 10px;
}
.central .amb-play:active .amb-play-icone {
    transform: scale(.96);
}
.central .amb-falha {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(160deg, #0D2C55 0%, #071F3A 100%);
    color: #FFFFFF;
    text-align: center;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .amb-falha .icon {
    font-size: 1.5rem;
    color: #FFC857;
}
.central .amb-falha strong {
    display: block;
}

/* O texto. */
.central .amb-texto {
    max-width: 560px;
    padding-top: 8px;
}
.central .amb-meta {
    margin: 0;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.central .amb-tut.is-visto .amb-meta::after {
    content: "Assistido";
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .amb-texto h3 {
    margin: 8px 0 0;
    color: #102770;
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.central .amb-texto h3:focus {
    outline: none;
}
.central .amb-lead {
    margin: 8px 0 0;
    color: #3A4468;
    font-size: 1.125rem;
    line-height: 2rem;
}
.central .amb-texto h4 {
    margin: 24px 0 16px;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .amb-passos {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: amb;
}
.central .amb-passos > li {
    position: relative;
    padding-left: 40px;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
    counter-increment: amb;
}
.central .amb-passos > li + li {
    margin-top: 16px;
}
.central .amb-passos > li::before {
    content: counter(amb);
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--int-tinta) 12%, #FFFFFF);
    color: var(--int-tinta);
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 800;
    text-align: center;
}
.central .amb-passos strong {
    color: #102770;
    font-weight: 700;
}
.central .amb-passos a {
    color: inherit;
}
.central .amb-dica {
    display: flex;
    gap: 16px;
    margin: 24px 0 0;
    padding: 16px;
    border-radius: 8px;
    background: #F3F6FD;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .amb-dica .icon {
    flex: none;
    margin-top: 4px;
    color: #0047C9;
}
.central .amb-dica strong {
    color: #102770;
}
.central .amb-acoes {
    margin: 24px 0 0;
}
.central .amb-prox .icon {
    font-size: .875rem;
}
@media (prefers-reduced-motion: no-preference) {
    .central .amb-prox {
        transition: transform .16s ease-out;
    }
    .central .amb-prox:active {
        transform: scale(.97);
    }
    .central .amb-prox .fa-arrow-right {
        transition: transform .2s var(--ctl-ease);
    }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .central .amb-prox:hover .fa-arrow-right {
        transform: translateX(4px);
    }
}
/* Acabou o vídeo: o "Próximo" ganha o anel, que é a próxima coisa a fazer. */
.central .amb-tut.is-fim .amb-prox {
    box-shadow: 0 0 0 4px color-mix(in oklab, #0059FB 24%, #FFFFFF);
}

/* ---------- Tela média: a lista sobe, o palco fica com a largura toda ---------- */
@media (max-width: 1099.98px) {
    .central .amb {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .central .amb-lista {
        position: static;
    }
    .central .amb-palco {
        order: -1;                           /* o vídeo primeiro; a lista vira "os outros" */
    }
    .central .amb-tut {
        gap: 24px;
    }
}

/* ---------- Celular: a lista em cima, o palco embaixo ---------- */
@media (max-width: 767.98px) {
    .central .amb-tut {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 15px;
        scroll-margin-top: 124px;            /* fita do celular (108) + 16 */
    }
    .central .amb-tela {
        width: min(100%, 288px);             /* 288 x 512, na grade */
        margin: 0 auto;
    }
    .central .amb-texto {
        padding-top: 0;
    }
    .central .amb-texto h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .central .amb-lead {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .central .amb-acoes .ctl-botao {
        width: 100%;
        height: 48px;
    }
}