/* ==========================================================================
   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 {
        align-items: flex-start;          /* curso de duas linhas: o ícone fica na primeira */
    }
    body[data-etapa="painel"] .heroi h1 .icon {
        width: 40px;
        height: 40px;
        margin-top: -4px;                 /* centro do quadro (20) no centro da primeira linha (16) */
        font-size: 1.125rem;
    }
    .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; }
@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 {
    display: inline-block;
    margin: -8px 0;
    padding: 8px 0;                       /* alvo de 40 sem mexer na linha */
    color: #FFFFFF;
    font-weight: 600;
}
.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 {
        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 Calendário
   e Comunicações seguem no HTML com .ctl-so-fita: na fita são pílulas.
   -------------------------------------------------------------------------- */
.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;
}
.central .ctl-cartoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 1024px) {
    .central .ctl-cartoes {
        grid-template-columns: repeat(4, minmax(0, 1fr));   /* 4 + 4 no miolo de 1200 */
    }
}
.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 de duas linhas cresce para
   baixo. 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: 192px;                    /* 24 + ícone 48 + 24 + nome 24 + frase 48 + 24 */
    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 :is(.ctl-cartao[href="#suporte"], #suporte) {          /* laranja de socorro: o pedido de ajuda */
    --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: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);
    }
}
.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, Suporte, WhatsApp, Ambientação) e o depois (Carreiras,
   Formatura). 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) :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: antes do Calendário, do Manual e das Carreiras. */
.central:has(.ctl-secao:target, .ctl-secao :target) .ctl-cartoes > li:has(> :is([href="#calendario"], [href="#manual"], [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(#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(#suporte:target, #suporte :target) .ctl-cartao[href="#suporte"],
.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(#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(#suporte:target, #suporte :target) .ctl-cartao[href="#suporte"]::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ção: Ambientação.
   -------------------------------------------------------------------------- */
.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 (Direção, 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) {
    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) {
    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):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):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 — estilo Google Agenda: Dia, Semana e Mês                     
   O script monta .ctl-cal; a lista de datas e as tabelas de grade são a
   fonte e só aparecem sem o script.
   -------------------------------------------------------------------------- */
.central.ctl-js .ctl-meses,
.central.ctl-js .ctl-grades {
    display: none;
}
.central .ctl-cal-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}
.central .ctl-cal-setas {
    display: inline-flex;
    gap: 4px;
}
.central .ctl-cal-seta {
    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-cal-seta .icon {
    margin: 0;
    font-size: .875rem;
}
@media (hover: hover) {
    .central .ctl-cal-seta:hover {
        background: #EEF1F7;
    }
}
.central .ctl-cal-titulo {
    flex: 1;
    min-width: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
}
.central .ctl-cal-titulo::first-letter,
.central .ctl-agenda-dia h4::first-letter,
.central .ctl-msg-data::first-letter,
.central .ctl-dlg-data::first-letter {
    text-transform: uppercase;
}
.central .ctl-cal-vista select {
    height: 40px;
    margin: 0;
    padding: 0 40px 0 15px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%233A4468' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
}
.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 li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.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 faixa das disciplinas 100% EaD: obrigatórias, valem nota. */
.central .ctl-cal-ead {
    display: flex;
    gap: 16px;
    margin: 16px 0 0;                     /* embaixo da grade: as 100% EaD não têm hora */
    padding: 15px 23px;
    border: 1px solid #F2D4A6;
    border-radius: 8px;
    background: #FFF7EB;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-cal-ead > .icon {
    flex: none;
    margin: 4px 0 0;
    color: #A16100;
}
.central .ctl-cal-ead strong {
    color: #102770;
}
.central .ctl-cal-ead-aviso {
    display: block;
    color: #7A4A00;
    font-weight: 600;
}
.central .ctl-cal-legenda-aula {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 8px;
    color: #5A668C;
    font-size: .8125rem;
    line-height: 1.5rem;
}
.central .ctl-cal-legenda-aula strong {
    color: #102770;
}
.central .ctl-cal-legenda-aula .icon {
    margin-right: 4px;
    color: #0059FB;
}
.central .ctl-cal-vazio {
    margin-top: 16px;
    padding: 15px 23px;
    border: 1px dashed #B5BBCF;
    border-radius: 8px;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* Semana e Dia (desktop): colunas por dia; Avisos no topo; aulas por hora. */
.central .ctl-sem {
    display: grid;
    border: 1px solid #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
}
.central .ctl-sem > div {
    min-width: 0;
    border-top: 1px solid #EEF1F7;
    border-left: 1px solid #EEF1F7;
}
.central .ctl-sem > .ctl-sem-canto,
.central .ctl-sem > .ctl-sem-dia {
    border-top: 0;
}
.central .ctl-sem > .ctl-sem-canto,
.central .ctl-sem > .ctl-sem-rotulo {
    border-left: 0;
}
.central .ctl-sem-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
}
.central .ctl-sem-dia > span {
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.central .ctl-sem-num,
.central .ctl-mes-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #102770;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 600;
    cursor: pointer;
}
.central .is-hoje > .ctl-sem-num,
.central .is-hoje > .ctl-mes-num,
.central .is-hoje .ctl-agenda-num {
    background: #0059FB;
    color: #FFFFFF;
}
@media (hover: hover) {
    .central :not(.is-hoje) > :is(.ctl-sem-num, .ctl-mes-num):hover {
        background: #EEF1F7;
    }
}
.central .ctl-sem-rotulo {
    padding: 8px 8px 0 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    text-align: right;
}
.central .ctl-sem-hora {
    color: #102770;
    font-weight: 700;
}
.central .ctl-sem-avisos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 40px;
    padding: 7px 4px 8px;                 /* 7 + 1 da linha de cima */
}
.central .ctl-sem-celula {
    display: flex;
    flex-direction: column;
    padding: 8px 4px;
}
.central .ctl-sem-celula > .ctl-aula {
    flex: 1;                              /* as aulas da mesma hora com a mesma altura: o "Entrar" fica na mesma linha */
}
.central .ctl-sem-celula .ctl-meet {
    margin-top: auto;
}
.central .ctl-ev {
    display: block;
    width: 100%;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
@media (hover: hover) {
    .central .ctl-ev:hover {
        filter: brightness(.9);
    }
}
.central .ctl-aula {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 8px 8px 9px;
    border-left: 3px solid #0059FB;
    border-radius: 6px;
    background: #EAF1FF;
}
.central .ctl-aula + .ctl-aula {
    margin-top: 8px;
}
.central .ctl-aula-hora,
.central .ctl-aula-prof {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    font-size: .75rem;
    line-height: 1rem;
}
.central .ctl-aula-hora {
    color: #3A4468;
}
.central .ctl-aula :is(.ctl-aula-hora, .ctl-aula-prof) .icon {
    margin: 0;
    padding-top: 2px;
    font-size: .625rem;
    color: #0059FB;
}
.central .ctl-aula-disc {
    color: #102770;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: 700;
}
.central .ctl-aula-prof {
    min-height: 24px;
    align-items: center;
    color: #102770;
    text-decoration: underline;
    text-decoration-color: #B5BBCF;
    text-underline-offset: 3px;
}
.central .ctl-aula .ctl-meet {
    margin-top: 4px;
}

/* Mês (desktop): seis semanas no máximo; até dois avisos por dia. */
.central .ctl-mes-grade {
    border: 1px solid #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
}
.central .ctl-mes-cab,
.central .ctl-mes-linha {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.central .ctl-mes-cab span {
    padding: 8px 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}
.central .ctl-mes-dia {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    min-height: 120px;
    padding: 4px 4px 8px;
    border-top: 1px solid #EEF1F7;
    border-left: 1px solid #EEF1F7;
}
.central .ctl-mes-dia:nth-child(7n + 1) {
    border-left: 0;
}
.central .ctl-mes-dia > .ctl-mes-num {
    align-self: center;
    width: 32px;
    height: 32px;
    font-size: .875rem;
}
.central .ctl-mes-dia.is-fora {
    background: #FAFBFD;
}
.central .ctl-mes-dia.is-fora > .ctl-mes-num {
    color: #8E97B3;
}
.central .ctl-mes-aula {
    align-self: center;
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: #0059FB;
    opacity: .4;
}
.central .ctl-legenda .ctl-legenda-aula {
    display: none;
    align-items: center;
    gap: 8px;
}
.central .ctl-cal[data-vista="mes"] .ctl-legenda .ctl-legenda-aula {
    display: flex;                        /* o traço só aparece na visão Mês */
}
.central .ctl-mes-mais {
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #3A4468;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
@media (hover: hover) {
    .central .ctl-mes-mais:hover {
        background: #EEF1F7;
    }
}

/* Agenda em lista (celular; e o dia escolhido no mês). */
.central .ctl-agenda {
    border: 1px solid #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
}
.central .ctl-agenda-dia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px 15px 16px;
    border-top: 1px solid #EEF1F7;
}
.central .ctl-agenda-dia:first-child {
    padding-top: 16px;
    border-top: 0;
}
.central .ctl-agenda-dia h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.5rem;
}
.central .ctl-agenda-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EEF1F7;
    color: #102770;
    font-size: .875rem;
    font-weight: 700;
}
.central .ctl-agenda-hoje {
    padding: 0 8px;
    border-radius: 999px;
    background: #EAF1FF;
    color: #0059FB;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-agenda-nada {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-agenda-msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 7px 12px;                    /* 7 + 1 da borda */
    border: 1px solid #EEF1F7;
    border-left-width: 4px;
    border-radius: 6px;
}
.central .ctl-agenda-msg strong {
    color: #102770;
}
.central .ctl-agenda-msg p {
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-agenda .ctl-aula-disc {
    font-size: .875rem;
    line-height: 1.5rem;
}
.central .ctl-agenda .ctl-aula + .ctl-aula {
    margin-top: 0;
}
.central .ctl-borda-info { border-left-color: #00AEEF; }
.central .ctl-borda-cob  { border-left-color: #0054A6; }
.central .ctl-borda-inc  { border-left-color: #34A853; }
.central .ctl-borda-emp  { border-left-color: #674EA7; }
.central .ctl-borda-rec  { border-left-color: #ED8500; }


/* --------------------------------------------------------------------------
   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 — Direção, Coordenação, Professores, Tutoria
   Três por linha no miolo de 1200. O cargo em caixa normal (a caixa alta
   saiu em 20/10: lia como rótulo de sistema).
   -------------------------------------------------------------------------- */
.central .ctl-profs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 1024px) {
    .central .ctl-profs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.central .ctl-prof-cartao {
    display: flex;
    gap: 16px;
    padding: 23px;
}
.central .ctl-prof-cartao:target {
    border-color: #0059FB;
    box-shadow: 0 0 0 4px rgba(0, 89, 251, .16);
}
.central .ctl-prof-cartao > div {
    min-width: 0;
}
.central .ctl-papel {
    margin-bottom: 4px;
    color: var(--int-tinta);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.central .ctl-prof-cartao h4 {
    font-size: 1.125rem;
    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-cv {
    margin-top: 8px;
}
.central .ctl-prof-disc {
    margin-top: 8px;
    color: #5A668C;
}
.central .ctl-foto {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--int-tinta) 10%, #FFFFFF);
    color: var(--int-tinta);
    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.5rem;
}


/* --------------------------------------------------------------------------
   10. COMUNICAÇÕES — uma mensagem por vez, com setas
   É texto corrido: a mensagem fica na linha de 720 (o cartão, 784).
   -------------------------------------------------------------------------- */
.central .ctl-mensagens {
    max-width: 784px;
}
.central .ctl-msg {
    padding: 31px 31px 31px 32px;
    border-left-width: 8px;
}
.central .ctl-msg-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.central .ctl-msg-nova {
    padding: 0 8px;
    border-radius: 999px;
    background: #EAF1FF;
    color: #0059FB;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.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;
    margin-bottom: 16px;
    font-size: 1.0625rem;
    line-height: 2rem;
}
.central .ctl-msg-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.central .ctl-msg > p:last-child {
    display: flex;                        /* o botão inline-flex somava 1px de linha de base */
}
.central .ctl-msg-conta {
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}


/* --------------------------------------------------------------------------
   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);
    }
}


/* --------------------------------------------------------------------------
   12. CENTRAL DE CARREIRAS — agentes de integração
   Os agentes são cartões do portão, no azul da marca: sã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);
    }
}


/* --------------------------------------------------------------------------
   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;
}


/* --------------------------------------------------------------------------
   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, .ctl-ev, .ctl-cal-seta, .ctl-sem-num, .ctl-mes-num) {
    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, .ctl-ev, .ctl-cal-seta, .ctl-sem-num, .ctl-mes-num):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 oito cartões ficam com a mesma altura. */
    .central .ctl-cartoes {
        gap: 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: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-profs,
    .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-prof-cartao,
    .central .ctl-regras-bloco,
    .central .ctl-pendente {
        padding: 15px;
    }
    .central .ctl-ementa {
        min-height: 80px;
        padding: 15px;
    }
    .central .ctl-msg {
        padding: 15px 15px 15px 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;
    }
    .central .ctl-msg-nav .ctl-botao {
        padding: 0 12px;
    }

    /* 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%;
    }

    /* Calendário */
    .central .ctl-cal-barra {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 8px;
    }
    .central .ctl-cal-titulo {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 1rem;
    }
    .central .ctl-cal-vista {
        justify-self: end;
    }
    .central .ctl-legenda {
        gap: 0 16px;
    }
    .central .ctl-cal-ead {
        gap: 8px;
        padding: 15px;
    }
    .central .ctl-aula {
        align-self: stretch;
    }
    .central .ctl-agenda .ctl-meet {
        height: 40px;
        padding: 0 16px;
        font-size: .875rem;
    }
    .central .ctl-aula-prof {
        min-height: 40px;
    }
    .central .ctl-mes-grade {
        margin-bottom: 16px;
    }
    .central .ctl-mes-dia {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        min-height: 0;
        height: 48px;
        margin: 0;
        padding: 4px 0 0;
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: #EEF1F7;
        border-radius: 0;
        background: transparent;
        color: #102770;
        cursor: pointer;
    }
    .central .ctl-mes-dia .ctl-mes-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: .875rem;
        line-height: 1rem;
        font-weight: 600;
    }
    .central .ctl-mes-dia.is-hoje .ctl-mes-num {
        background: #0059FB;
        color: #FFFFFF;
    }
    .central .ctl-mes-dia.is-escolhido {
        background: #EAF1FF;
    }
    .central .ctl-mes-dia.is-fora .ctl-mes-num {
        color: #8E97B3;
    }
    .central .ctl-mes-pontos {
        display: flex;
        gap: 2px;
        height: 8px;
        align-items: center;
    }
    .central .ctl-mes-pontos .ctl-ponto {
        width: 6px;
        height: 6px;
    }
    .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;
}
@media (max-width: 767.98px) {
    .central .ctl-cartao .ctl-selo-breve {
        top: 24px;                        /* no eixo do ícone de 40: 16 + 20 − 12 */
        right: 16px;
    }
}