/* ==========================================================================
   SUPORTE · ESCOLA TÉCNICA FAT — o visual das telas do aluno do
   suporte-ava.com (HESK 3.4.3), com a cara da Central do Aluno.
   22/10/2026. Decidido com o Marcelo (spec 2026-10-22-suporte-ava-rebranding).
   Adaptado ao HESK 3.7.13 em 2026-10-25 (https://fat.estudar.life/suporte/):
   os ajustes estão marcados com [3.7] e ficam junto da regra que corrigem.
   Versão atual: ?v=20261026.
   [3.7-hotfix 2026-10-25] v20261025b, depois da validação em produção
   (Fase 3c): as regras do "chamado enviado" valem só para o aviso verde
   (o 3.7 também põe em .notice-flash o aviso vermelho do erro do
   formulário e o azul da categoria vazia do manual), o aviso não verde de
   um .notice-flash solto vai para o miolo, e no celular a linha
   "Respondido por … » há…" do Ver chamado quebra em vez de alargar a tela.
   [v20261026, 26/10/2026] Em 25/10 o ar recebeu a v20261025c, com a
   escolha de assunto do Eduardo em cartões (a seção 9A de lá, montada pela
   parte "ASSUNTO EM CARTÕES" do estudar.js dele). Esta versão a substitui
   pela escolha em dois passos deste repositório (seção 7), decisão do
   Marcelo. Merge de três vias em 26/10/2026: base v20261025b, nossa esta
   fonte, deles a v20261025c. De b para c só mudaram a seção 9A e as linhas
   dela neste cabeçalho (a "Versão atual" e o parágrafo da 9A): saíram
   todas, por serem a escolha dele. Nenhuma outra regra mudou no ar, então
   nada mais entrou nem se perdeu.

   No servidor mora em /var/www/hesk/theme/hesk3/customer/css/estudar.css
   (caminho do HESK: theme/hesk3/customer/css/estudar.css) e entra pelo
   gancho do <head> do HESK (/var/www/hesk/head.txt, uma linha; cópia
   versionada em scripts/hesk/tema/ganchos/head.txt). O ?v= da linha troca a
   cada versão, para furar o cache. Nenhum PHP nem JS do HESK é tocado: o que
   não se resolve aqui fica dito em suporte/RELATO-css.md e em
   scripts/hesk/tema/README.md.

   [3.7] COR PRIMÁRIA: o HESK passa a ter theme_overrides['--primary'] =
   #0059FB (antes #0055a4), o mesmo azul deste arquivo. Nada aqui depende do
   valor antigo nem de var(--primary): a troca só deixa coerente o que o
   HESK pinta sozinho e este arquivo não cobre.

   ESCOPO: toda regra começa em body.cust-help. Só as telas do aluno têm essa
   classe, e assim nada vaza para o painel da equipe. O teste
   tools/suporte/tests/escopo-css.test.mjs cobra isso a cada rodada.

   COMO VENCE A app.min.css: pelo escopo (body.cust-help soma um elemento e
   uma classe a cada seletor), nunca por !important. As exceções são três, e
   cada uma está anotada onde aparece: a app.min.css usa !important na mesma
   propriedade; o HESK escreve estilo em linha no HTML (style="..."), que só
   cede a !important; e o "sem movimento" do fim, que precisa calar todas as
   transições do HESK de uma vez.

   TOKENS (copiados de central/central.css):
       navy #102770   azul #0059FB (hover #0047C9)   tinta #3A4468 / #5A668C
       meta #6B7594   linha #D5D8E2   linha de campo #B5BBCF
       linha de cartão #E3E7F0   linha fraca #EEF1F7   superfície #F5F7FB
       tint #EAF1FF   fundo #F4F8FB   barra #0A2445   erro #B42318
       r-sm 8 / r-md 10 / r-lg 16, fonte do sistema.
   A mesa usa os padrões do body da Central, sem cor de curso:
       --cur-a #0D2C55   --cur-b #071F3A

   GRID DE 8: toda altura de linha e espaço é múltiplo de 8 (4 só em vão
   apertado). Linhas de texto: 16 (12px), 24 (14–18px), 32 (22–24px),
   40 (32–36px). A barra fica em 60, como no Moodle e na Central.
   ALVO: 24 no mínimo no desktop, 40 no celular; o que parece clicável
   responde na área inteira.
   MIOLO: 1200, laterais de 32 (16 no celular); texto corrido até 720.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. A BASE — fonte, cores, foco e o esqueleto da página
   -------------------------------------------------------------------------- */
body.cust-help {
    background: #F4F8FB;
}
/* [3.7] Duas cores de hover que o 3.7 escreve com !important a partir de
   variáveis do tema (core/0_00_default_theme_vars.css):
       .breadcrumbs__inner a:hover { color: var(--breadcrumbs__a-hover-clr) !important }
       .preview:hover { color: var(--article_preview__hover-clr) !important }
   Em vez de responder com outro !important, a variável muda aqui: migalha
   branca sobre a mesa e cartão em navy (as cores das regras da seção 3 e 4).
   Redefinida no body, vale só nas telas do aluno. */
body.cust-help {
    --breadcrumbs__a-hover-clr: #FFFFFF;
    --article_preview__hover-clr: #102770;
}
body.cust-help .wrapper {
    background: #F4F8FB;                  /* a app.min.css pinta de branco */
    color: #3A4468;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
}
/* A Lato e o .1px de espaçamento estão escritos em dezenas de regras do HESK
   (descrição do artigo, campos, avisos). Em vez de caçar uma a uma, tudo
   herda da .wrapper; o que precisa de outro valor diz o seu adiante. */
body.cust-help .wrapper * {
    font-family: inherit;
    letter-spacing: inherit;
}
body.cust-help :focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}

/* O ESQUELETO. O HESK empilha barra, migalhas e conteúdo em caixas
   separadas, e a busca (ou o título) mora dentro do conteúdo: não existe
   uma caixa que abrace "migalhas + busca" para pintar a mesa de uma vez.
   Então a .main vira uma grade e o miolo do conteúdo some como caixa
   (display: contents): migalhas, busca, título e listas viram linhas da
   mesma grade. A mesa é um ::before posicionado sobre as linhas dela: uma
   pintura só, sem emenda no degradê nem na grade de 32.
   Nenhum JS do HESK procura .main__content ou .contr (conferido no
   app.min.js e no hesk_functions.js em 22/10). */
body.cust-help .main {
    --lado: 32px;
    position: relative;
    isolation: isolate;                   /* a mesa (z-index -1) fica atrás das linhas, não atrás da página */
    display: grid;
    grid-template-columns:
        [tela-start] minmax(var(--lado), 1fr)
        [miolo-start] minmax(0, 1200px)
        [miolo-end] minmax(var(--lado), 1fr)
        [tela-end];
    align-content: start;
    min-width: 0;
}
body.cust-help .main__content,
body.cust-help .main__content > .contr {
    display: contents;
}
body.cust-help .main > *,
body.cust-help .main__content > .contr > * {
    grid-column: miolo;
    min-width: 0;
    margin: 40px 0 0;                     /* o conteúdo claro: 40 entre um bloco e outro */
}
/* [3.7] O "Enviando…" do formulário (#loading-overlay, position: fixed na
   tela toda) mora agora na .main: sem isto ele ganharia os 40 de cima e
   deixaria uma faixa sem véu no topo. */
body.cust-help .main > .loading-overlay {
    margin: 0;
}
/* O "Enviando, aguarde..." entra (25/10/2026): o HESK acende o véu com
   style.display = 'block' no envio (hesk_showLoadingMessage, em
   js/hesk_functions.js), e o @starting-style dá o ponto de partida da
   transição: o véu acende em 200 ms e a caixa da mensagem cresce 4% junto,
   na curva de entrada da Central. O translate(-50%, -50%) é o do HESK, que
   centra a caixa: a escala vai junto dele. Com menos movimento, a seção 12
   cala a transição e o véu aparece de uma vez. */
body.cust-help .loading-overlay {
    transition: opacity 200ms ease;
}
body.cust-help .loading-overlay .loading-message {
    transition: opacity 200ms ease, transform 200ms cubic-bezier(.23, 1, .32, 1);
}
@starting-style {
    body.cust-help .loading-overlay {
        opacity: 0;
    }
    body.cust-help .loading-overlay .loading-message {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.96);
    }
}
/* A ordem das linhas. A grade segue o HTML, com três ajustes: o título que
   vai para a mesa sobe para logo depois das migalhas (na Categoria ele vem
   antes da busca, como no herói da Central); o aviso de erro do topo do
   formulário desce para o conteúdo claro; e o rodapé fica por último. */
body.cust-help .header {
    order: -3;
}
body.cust-help .breadcrumbs {
    order: -2;
}
body.cust-help .content:has(.kb--folder),
body.cust-help .main__content .article__heading--form,
body.cust-help .main__content .article-heading-tip,
body.cust-help .main__content .select__title {
    order: -1;
}
body.cust-help .footer {
    order: 1;
}
/* [3.7] No Início o 3.7 abre o conteúdo com o <div style="margin-bottom:
   20px;"> dos avisos (vazio) antes da busca. Ele vira uma linha de 0 da
   grade e empurra a busca para a 4ª linha, fora da mesa (que pinta só a 2ª
   e a 3ª). A busca sobe para antes dele. Só quando o div vem logo antes
   dela: na Categoria a busca vem antes do título, e um order: -1 geral a
   poria em cima do título (os dois em -1 seguem a ordem do HTML). Com aviso
   no div, o aviso fica no conteúdo claro, embaixo da mesa, como no resto. */
body.cust-help .main__content > .contr > div[style]:first-child + .help-search {
    order: -1;
}
/* O <div style="margin-bottom: 20px"> antes do título, onde o HESK escreve
   os avisos. Vazio, não ocupa nada; com aviso, abre o conteúdo claro.
   O margin-bottom vem em linha no HTML: só cede a !important. */
body.cust-help .main__content > .contr > div[style]:first-child {
    margin-top: 0;
    margin-bottom: 0 !important;
}
body.cust-help .main__content > .contr > div[style]:first-child:has(> *) {
    margin-top: 40px;
}
body.cust-help .main__content > .contr:has(> div[style]:first-child > *) > form {
    margin-top: 24px;
}
/* O traço vazio do fim do artigo não tem função na tela nova. */
body.cust-help .main__content > .contr > .divider {
    display: none;
}
/* A lista da Categoria vem com margin-top: -20px em linha. */
body.cust-help .main__content > .contr > article[style] {
    margin-top: 40px !important;
}


/* --------------------------------------------------------------------------
   2. A BARRA — a do AVA e da Central: #0A2445, 60 de altura
   -------------------------------------------------------------------------- */
body.cust-help .header {
    grid-column: tela;
    margin: 0;
    border: 0;
    background: #0A2445;
}
body.cust-help .header .contr {
    max-width: none;
    padding: 0 12px;                      /* o mesmo canto da marca na Central */
}
body.cust-help .header__inner {
    height: 60px;
    padding: 0;
}
/* A marca da FAT no lugar do título (pedido do Marcelo, 23/10), com
   "Suporte" ao lado depois de um fio. O título do help desk continua no
   link, fora da vista, e é ele que o leitor de tela lê; o "Suporte" do CSS
   não é lido (o "/ ''" do content), para não repetir. */
body.cust-help .header__logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 40px;
    color: transparent;
    font-size: 0;
    line-height: 0;
}
body.cust-help .header__logo::before {
    content: "";
    flex: none;
    width: 92px;                          /* 447 × 156 do arquivo, em 32 de altura */
    height: 32px;
    background: url("../img/fat-branco.png") left center / contain no-repeat;
}
body.cust-help .header__logo::after {
    content: "Suporte";
    content: "Suporte" / "";
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .32);
    color: #F4F8FB;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
}
body.cust-help .header__logo:hover::after {
    color: #FFFFFF;
}
/* "Voltar ao AVA" na ponta direita da barra (Marcelo, 23/10): o mesmo
   botão da barra da Central (.barra-ava). O link vem do gancho header.txt,
   que o HESK põe logo depois do <body>, fora da .header: por isso ele é
   posto na barra por posição (10 + 40 + 10 = os 60 da barra). */
body.cust-help .estudar-ava {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;                          /* o mesmo canto do logo, do outro lado */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(244, 248, 251, .32);
    border-radius: 999px;
    color: #F4F8FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 150ms ease, background-color 150ms ease, transform 120ms ease-out;
}
body.cust-help .estudar-ava::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3M7 4L3 8l4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3M7 4L3 8l4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.cust-help .estudar-ava:focus-visible {
    outline-color: #FFFFFF;
}
body.cust-help .estudar-ava:active {
    transform: scale(.97);
}
/* No celular "Voltar ao AVA" encostava no "Suporte": fica "AVA" com a
   seta. O texto do link continua lá, e é ele que o leitor de tela lê. */
@media (max-width: 768px) {
    body.cust-help .estudar-ava {
        gap: 4px;                         /* o texto escondido é um item de 0: 4 + 4 = 8 entre seta e "AVA" */
        padding: 0 15px 0 11px;
        font-size: 0;
    }
    body.cust-help .estudar-ava::after {
        content: "AVA";
        content: "AVA" / "";
        font-size: .875rem;
        line-height: 1.5rem;
    }
}
@media (hover: hover) {
    body.cust-help .estudar-ava:hover {
        border-color: rgba(244, 248, 251, .56);
        background-color: rgba(255, 255, 255, .08);
        color: #FFFFFF;
    }
}
body.cust-help .header :focus-visible {
    outline-color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   3. A MESA — a faixa escura do herói da Central (central.css, .heroi),
   de ponta a ponta, embaixo da barra. Recebe as migalhas e, conforme a
   tela, a busca ou o título da página.
   -------------------------------------------------------------------------- */
body.cust-help .main::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    grid-column: tela;
    grid-row: 2 / 4;                      /* migalhas e busca (ou título) */
    background-color: #04152A;            /* para navegador sem color-mix */
    background-color: color-mix(in oklab, #071F3A, #000 40%);
    background-image:                     /* a mesma mesa em hex, para navegador sem color-mix */
        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, #0A2547 0%, #04152A 100%);
    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, #0D2C55, #000 15%) 0%, color-mix(in oklab, #071F3A, #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;
}
/* Categoria (título e busca) e formulário (título e aviso dos campos
   obrigatórios): a mesa cobre uma linha a mais. */
body.cust-help .main:has(.kb--folder)::before,
body.cust-help .main:has(.article-heading-tip)::before {
    grid-row: 2 / 5;
}
/* O que fica sobre a mesa não tem o respiro do conteúdo claro. */
body.cust-help .main > .breadcrumbs,
body.cust-help .main__content > .contr > .help-search,
body.cust-help .main__content > .contr > .content:has(.kb--folder),
body.cust-help .main__content > .contr > .article__heading--form,
body.cust-help .main__content > .contr > .article-heading-tip,
body.cust-help .main__content > .contr > .select__title {
    margin: 0;
}
/* Sobre a barra e a mesa o anel é branco; no claro vale o azul da base. */
body.cust-help .breadcrumbs :focus-visible,
body.cust-help .help-search #search-button:focus-visible,
body.cust-help .help-search .search__submit:focus-visible {
    outline-color: #FFFFFF;               /* azul sobre o navy some; a Central usa branco no escuro */
}

/* As migalhas: a trilha do herói (.heroi-trilha). 48 de mesa em cima e 24
   até o título: com 40 e 8 a hierarquia ficava colada (Marcelo, 23/10). */
body.cust-help .breadcrumbs {
    padding: 48px 0 0;
    background: none;
}
body.cust-help .breadcrumbs .contr {
    max-width: none;
    padding: 0;
}
body.cust-help .breadcrumbs__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 24px;
    margin: 0 0 24px;
    padding: 0;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .breadcrumbs__inner a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #FFFFFF;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}
body.cust-help .breadcrumbs__inner a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
body.cust-help .breadcrumbs__inner .icon {
    flex: none;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    fill: currentColor;
    opacity: .72;
}
body.cust-help .breadcrumbs__inner .last {
    min-width: 0;
}
/* Na Categoria e no Artigo o último item repete o título que vem logo
   abaixo: fica numa linha só, com reticências, em vez de dobrar a trilha. */
body.cust-help .main:has(.kb--folder, .ticket--article) .breadcrumbs__inner .last {
    flex: 1 1 0;
    min-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O título da página sobre a mesa: o h1 do herói (36/40, 800). Vale para o
   "Olá" do Início, a Categoria, o Enviar um Chamado, o Ver chamado e a
   escolha de assunto. */
body.cust-help .search__title,
body.cust-help .select__title,
body.cust-help .article__heading--form,
body.cust-help .kb--folder {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    margin: 0;
    color: #FFFFFF;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: left;
    text-wrap: balance;
}
/* A .kb--folder tem tamanho e peso com !important na app.min.css. */
body.cust-help .content .block__head .kb--folder {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
}
/* O título é o último da mesa no Ver chamado e na escolha de assunto: os 48
   de baixo da mesa vão nele. No formulário, vão no aviso que vem embaixo. */
body.cust-help .select__title,
body.cust-help .article__heading--form {
    padding-bottom: 48px;
}
body.cust-help .article__heading--form:has(+ .article-heading-tip) {
    padding-bottom: 0;
}
/* O ícone ao lado do título: o quadro da cabeça das seções da Central
   (.ctl-secao-cabeca h2 .icon), no azul da marca. */
body.cust-help .article__heading--form .icon-in-circle,
body.cust-help .kb--folder > .icon-folder {
    flex: none;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 8px;
    background-color: #0047C9;
    background-image:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    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);
}
body.cust-help .article__heading--form .icon-in-circle .icon {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
}
body.cust-help .kb--folder > .icon-folder {
    padding: 14px;                        /* o desenho de 20 no quadro de 48 */
    fill: #FFFFFF;
    vertical-align: middle;
}
body.cust-help .article__heading--form .ml-1 {
    margin: 0;
}
/* Na Categoria, o "Manual do aluno >" da frente do título repete as
   migalhas: some, e fica só o nome da categoria. */
body.cust-help .kb--folder > .icon-knowledge,
body.cust-help .kb--folder > a,
body.cust-help .kb--folder > .icon-chevron-right {
    display: none;
}
/* A caixa do título da Categoria vem com padding e alinhamento em linha. */
body.cust-help .content:has(.kb--folder) .block__head {
    display: block;
    padding: 0 !important;
    text-align: left;
}
body.cust-help .content .kb--folder {
    margin: 0 0 24px;                     /* a busca vem 24 abaixo do título */
}

/* O aviso dos campos obrigatórios, embaixo do título do formulário: 16 do
   título (é o apoio dele) e 48 de mesa embaixo. O seletor tem o peso do
   "margin: 0" da mesa, que vem antes, para a margem valer. */
body.cust-help .main__content > .contr > .article-heading-tip {
    justify-content: flex-start;
    gap: 4px;
    margin: 16px 0 0;
    padding-bottom: 48px;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    line-height: 1.5rem;
    text-align: left;
}
body.cust-help .article-heading-tip .label.required::after {
    margin-left: 0;                       /* o gap de 4 do aviso já separa */
    color: #FDA29B;                       /* o vermelho do HESK não lê no navy */
}

/* A busca: campo branco de 48 e o botão no azul da marca, na largura de
   uma linha de texto (720). 24 do título e 48 de mesa embaixo. */
body.cust-help .help-search {
    padding-bottom: 48px;
}
body.cust-help .search__title {
    margin: 0 0 24px;
}
body.cust-help .help-search form {
    display: block !important;            /* o form vem com display: inline em linha */
}
body.cust-help .search__form {
    padding: 0;
    background: none;
}
body.cust-help .search__form .form-group {
    display: flex;
    gap: 8px;
    max-width: 720px;
    margin: 0;
}
/* [3.7] No celular o 3.7 põe flex-wrap: wrap no .form-group da busca, e em
   375 o botão Pesquisar caía para a linha de baixo do campo. Fica na mesma
   linha, como no 3.4.3. */
body.cust-help .search__form .form-group {
    flex-wrap: nowrap;
}
/* A app.min.css e o <style> da própria página (que nos artigos vem depois
   deste arquivo) dão largura e margem em % pelo id: vence-se pelo id. */
body.cust-help .help-search #kb_search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 16px 0 48px;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .help-search #kb_search::placeholder {
    color: #6B7594;
}
body.cust-help .help-search #kb_search:focus {
    border-color: #0059FB;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .40);
    outline: 0;
}
/* A lupa é um botão dentro do campo: o alvo é o quadrado de 48 inteiro. */
body.cust-help .search__form .search__submit {
    top: 0;
    bottom: auto;
    left: 0;
    z-index: 1;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 6px 0 0 6px;
}
body.cust-help .search__form .search__submit .icon-search {
    width: 20px;
    height: 20px;
    fill: #5A668C;
}
/* A app.min.css força 32 de altura nos .btn-full até 900px com !important:
   o botão da busca precisa de 48 em qualquer largura. */
body.cust-help .help-search #search-button {
    flex: none;
    width: auto;
    min-width: 0;
    height: 48px !important;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* As sugestões que o HESK abre enquanto se digita: um painel branco
   embaixo do campo, ainda dentro da mesa. */
body.cust-help .kb-suggestions.boxed {
    max-width: 720px;
    margin: 8px 0 0;
    padding: 8px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 12px 24px -12px rgba(7, 31, 58, .48);
}
/* [3.7] No formulário o 3.7 trocou o <h6> das sugestões por <h2> (na busca
   continua <h6>). */
body.cust-help .kb-suggestions :is(h2, h6) {
    padding: 0 8px 8px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
body.cust-help .suggest-preview {
    padding: 8px;
    border-radius: 6px;
    border-bottom: 0;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .suggest-preview .icon-in-circle {
    display: none;
}
body.cust-help .suggest-preview .suggest-preview__title {
    margin: 0;
    color: #102770;
    font-weight: 700;
    line-height: 1.5rem;
}
body.cust-help .suggest-preview__text p {
    margin: 0;
}
body.cust-help a.suggest-preview:hover {
    background: #F5F7FB;
}


/* --------------------------------------------------------------------------
   4. AS LISTAS DE ARTIGOS — Categoria, Início, Pesquisa e Raiz. Cada artigo
   é o cartão claro dos "Mais lidos" da Central (.ctl-lido), sem o número:
   título navy, o que o artigo ensina em tinta suave, a seta no canto, e o
   cartão inteiro é o alvo. Estrelas e visualizações saem da lista.
   -------------------------------------------------------------------------- */
body.cust-help .article:has(> .block__head),
body.cust-help .tabbed__tabs .tabbed__tabs_tab.is-visible {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 0;
    background: none;
    box-shadow: none;
}
/* "Artigos nesta categoria:" e "Resultados da pesquisa": rótulo discreto.
   A app.min.css pinta o bloco de azul e põe color: #fff !important tanto no
   .article .block__head quanto no .h-3 dele: os dois !important abaixo são
   a resposta a esses. */
body.cust-help .article > .block__head {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #5A668C !important;
}
body.cust-help .article > .block__head .h-3 {
    margin: 0;
    color: #5A668C !important;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
}
body.cust-help .article > .block__head .icon-in-circle {
    display: none;
}
body.cust-help .preview {
    position: relative;
    display: block;
    width: auto;
    padding: 23px 55px 23px 23px;         /* 24 com o fio; à direita, a seta (16) e 16 de folga */
    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;
}
body.cust-help .preview::after {
    content: "";
    position: absolute;
    top: 28px;                            /* centro da 1ª linha do título (24 + 12) menos meia seta */
    right: 24px;
    width: 16px;
    height: 16px;
    background-color: #8E97B3;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.cust-help .preview .icon-in-circle,
body.cust-help .preview .rate {
    display: none;
}
body.cust-help .preview .preview__text {
    display: flex;
    flex-direction: column;
    max-width: none;
}
/* Todos os cartões do mesmo tamanho (Marcelo, 23/10): título em até 2
   linhas e resumo em até 2, e a altura de 2 + 2 vale para todos. Título
   curto ou resumo curto deixam folga embaixo, não um cartão menor.
   24 + 48 + 8 + 48 + 24 = 152; com o rótulo de categoria do Início, 176. */
body.cust-help .preview {
    min-height: 152px;
}
body.cust-help .preview:has(.preview__text > p:not(.navlink__descr)) {
    min-height: 176px;
}
body.cust-help .preview .preview__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
body.cust-help .preview .navlink__descr {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-wrap: pretty;
}
/* No Início cada artigo diz a categoria: sobe para cima do título, no
   rótulo de categoria da Central (.ctl-lido-cat); o "Categoria:" sai. */
body.cust-help .preview .preview__text > p:not(.navlink__descr) {
    order: -1;
    margin: 0 0 8px;
    color: #0047C9;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.cust-help .preview .preview__text > p:not(.navlink__descr) .lightgrey {
    display: none;
}
body.cust-help .preview .preview__text > p:not(.navlink__descr) .ml-1 {
    margin: 0;
}
body.cust-help .preview:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .preview:hover {
        border-color: #C9D0E0;
        background: #FFFFFF;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
        color: #102770;
    }
    body.cust-help .preview:hover::after {
        background-color: #0059FB;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .preview {
        transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease, border-color 150ms ease;
    }
    body.cust-help .preview:hover {
        transform: translateY(-2px);
    }
}
/* Categoria sem artigos: o aviso numa caixa tracejada, no lugar da lista. */
body.cust-help .article > p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 23px;
    border: 1px dashed #D5D8E2;
    border-radius: 10px;
    background: #FFFFFF;
    color: #5A668C;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}
/* Duas colunas a partir de 1024, como as listas da Central. */
@media (min-width: 1024px) {
    body.cust-help .article:has(> .block__head),
    body.cust-help .tabbed__tabs .tabbed__tabs_tab.is-visible {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A raiz do manual (knowledgebase.php) só herda: o título como subtítulo
   da Central e as pastas num cartão branco. */
body.cust-help .content:not(:has(.kb--folder)) > .block__head {
    justify-content: flex-start;
    gap: 16px;
}
body.cust-help .content > .block__head .icon-in-circle {
    display: none;
}
body.cust-help .content:not(:has(.kb--folder)) > .block__head .h-3 {
    margin: 0;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
body.cust-help .topics {
    margin-top: 16px;
    padding: 23px 23px 7px;
    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);
    column-gap: 32px;
}
body.cust-help .topics__block {
    width: calc(50% - 16px);
    margin: 0 0 16px;
}
body.cust-help .topics__title {
    min-height: 24px;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .topics__title .icon {
    width: 20px;
    height: 16px;
    fill: #8E97B3;
}
body.cust-help .topics__title .title-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #102770;
}
body.cust-help .topics__list {
    padding: 0 0 0 28px;
    color: #102770;
}
body.cust-help .topics__list li::before {
    display: none;
}
body.cust-help .topics__list a {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 0;                       /* respiro em padding, não só em altura: o título que quebra em duas linhas guarda o mesmo vão do vizinho */
    margin: 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .topics__list a:hover,
body.cust-help .topics__title .title-link:hover {
    color: #0059FB;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. O ARTIGO — um cartão branco com a linha de leitura de 720; os
   relacionados numa coluna de 320 ao lado (embaixo no celular).
   -------------------------------------------------------------------------- */
body.cust-help .ticket--article {
    gap: 32px;
    align-items: flex-start;
}
body.cust-help .ticket--article .ticket__body {
    min-width: 0;
    margin: 0;
}
body.cust-help .ticket--article .ticket__body_block {
    margin: 0;
    padding: 39px;
    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);
    text-align: left;                     /* o HESK justifica: fura buracos no texto */
}
body.cust-help .ticket--article .ticket__body_block > * {
    max-width: 720px;
}
body.cust-help .ticket--article .ticket__body_block h1 {
    margin: 0 0 24px;
    padding: 0;
    color: #102770;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}
/* O corpo, como veio do editor do HESK (muitas vezes colado do Word). */
body.cust-help .ticket__body_block .block--description {
    margin: 0;
    color: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
/* A app.min.css (.browser-default) põe margem e recuo em !important. */
body.cust-help .block--description p {
    margin: 0 0 16px !important;
}
body.cust-help .block--description p:last-child {
    margin-bottom: 0 !important;
}
body.cust-help .block--description h2 {
    margin: 32px 0 8px;
    color: #102770;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.cust-help .block--description h3 {
    margin: 24px 0 8px;
    color: #102770;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .block--description h2:first-child,
body.cust-help .block--description h3:first-child {
    margin-top: 0;
}
body.cust-help .block--description ul,
body.cust-help .block--description ol {
    margin: 0 0 16px;
    padding-left: 24px !important;
}
body.cust-help .block--description li {
    margin: 0 0 8px;
}
body.cust-help .block--description li:last-child {
    margin-bottom: 0;
}
body.cust-help .block--description a {
    color: #0059FB;
    text-decoration: underline;
}
body.cust-help .block--description hr {
    height: 0;
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #EEF1F7;
}
body.cust-help .block--description img {
    max-width: 100%;
    height: auto !important;              /* a altura em linha do Word distorce a imagem encolhida */
    border-radius: 8px;
}
body.cust-help .block--description iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 10px;
}
/* Tabela larga rola dentro dela, não a página. */
body.cust-help .block--description table {
    display: block;
    max-width: 100%;
    margin: 0 0 16px;
    overflow-x: auto;
    border: 0;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .block--description td,
body.cust-help .block--description th {
    padding: 7px 8px;
    border: 1px solid #D5D8E2;
    vertical-align: top;
}
body.cust-help .block--description code,
body.cust-help .block--description pre,
body.cust-help .block--description kbd {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
/* Texto colado do Word: tamanho, fonte e cor vêm em style="" e em <font>.
   Estilo em linha só cede a !important; os títulos voltam à escala. */
body.cust-help .block--description span[style],
body.cust-help .block--description p[style],
body.cust-help .block--description li[style],
body.cust-help .block--description div[style],
body.cust-help .block--description strong[style],
body.cust-help .block--description b[style],
body.cust-help .block--description em[style],
body.cust-help .block--description font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
body.cust-help .block--description h2[style] {
    color: #102770 !important;
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}
body.cust-help .block--description h3[style] {
    color: #102770 !important;
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
}

/* "Este artigo foi útil? Sim Não": uma linha discreta embaixo do texto,
   com Sim e Não como botões secundários pequenos (.ctl-botao-sec). */
body.cust-help .ticket__block-footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 8px;
    margin: 32px 0 0;
    padding: 23px 0 0;
    border-top: 1px solid #EEF1F7;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket__block-footer > * {
    margin: 0;
}
body.cust-help .ticket__block-footer > span:first-child {
    margin-right: 8px;
}
body.cust-help .ticket__block-footer > span:not(:first-child) {
    display: none;                        /* o "|" entre Sim e Não */
}
/* A .link sublinha com !important na app.min.css. */
body.cust-help .ticket__block-footer .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 32px;
    padding: 0 15px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-weight: 600;
    text-decoration: none !important;
}
@media (hover: hover) {
    body.cust-help .ticket__block-footer .link:hover {
        border-color: #0059FB;
        color: #0059FB;
    }
}

/* A coluna do lado: "Detalhes do artigo" sai (identificação, categoria,
   visualizações e estrelas); fica o Voltar. "Artigos relacionados" vira
   uma lista simples, em cima. */
body.cust-help .ticket--article .ticket__params {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 320px;
}
body.cust-help .ticket--article .ticket__params .params--block {
    margin: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
}
body.cust-help .ticket--article .ticket__params .details {
    order: 2;
}
body.cust-help .ticket--article .ticket__params .details .accordion-title,
body.cust-help .ticket--article .ticket__params .details .row {
    display: none;
}
body.cust-help .ticket--article .ticket__params .details .accordion-body {
    padding: 0;
}
body.cust-help .ticket--article .ticket__params .details .accordion-body > div {
    text-align: left !important;          /* vem text-align: right em linha */
}
/* O Voltar: link com alvo cheio de 40. */
body.cust-help .ticket--article .ticket__params .details .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none !important;
}
body.cust-help .ticket--article .ticket__params .details .link:hover {
    color: #0059FB;
}
body.cust-help .ticket--article .ticket__params .details .icon-back {
    width: 20px;
    height: 12px;
    fill: currentColor;
}
body.cust-help .ticket--article .ticket__params .params--block:not(.details) {
    order: 1;
    padding: 23px;
    border: 1px solid #E3E7F0;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
/* [3.7] O título do bloco ("Artigos relacionados") era <h4> no 3.4.3 e virou
   <h2 class="accordion-title"> no 3.7: vale pela classe, com o h4 mantido. */
body.cust-help .ticket--article .ticket__params .params--block :is(h4, .accordion-title) {
    height: auto;
    margin: 0 0 8px;
    padding: 0;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .ticket--article .ticket__params .params--block .accordion-body {
    padding: 0;
}
body.cust-help .ticket--article .ticket__params .params--block .list {
    padding: 0;
    color: #102770;
}
/* O fio entre os itens é sombra de 1px por dentro, não borda: borda somaria
   1px e o item mediria 41 em vez de 40. */
body.cust-help .ticket--article .ticket__params .params--block .list li {
    margin: 0;
    box-shadow: inset 0 1px 0 #EEF1F7;
}
body.cust-help .ticket--article .ticket__params .params--block .list li:first-child {
    box-shadow: none;
}
body.cust-help .ticket--article .ticket__params .params--block .list li::before {
    display: none;
}
body.cust-help .ticket--article .ticket__params .params--block .list a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket--article .ticket__params .params--block .list a:hover {
    color: #0059FB;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   6. O FORMULÁRIO — um cartão branco, campos em coluna de até 720, os
   campos e o erro da Central (.ctl-form), Curso e Turma como as escolhas
   da Central (.ctl-escolha), anexos na área tracejada e o botão azul.
   -------------------------------------------------------------------------- */
body.cust-help .form-submit-ticket {
    max-width: 800px;                     /* 720 de campo e 40 de cada lado */
    padding: 39px;
    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: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
/* [3.7] Saiu a regra do .form-submit-ticket .form-groups: no 3.7 o
   formulário de chamado não tem mais a section.form-groups (Nome e E-mail
   são .form-group soltos). Ela só existe no Ver chamado (regra do
   #formNeedValidation, seção 7) e no login/registro de conta do aluno,
   onde fica o padrão do HESK (320, centrado). */
body.cust-help .form-submit-ticket .form-group,
body.cust-help .form-submit-ticket .param {
    max-width: 720px;
    margin: 0 0 24px;
}
/* O rótulo: navy 600 14/24, 8 acima do campo. */
body.cust-help .form-submit-ticket .form-group > label,
body.cust-help .form-submit-ticket .param > .label {
    display: flex;
    margin: 0 0 8px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* O asterisco do obrigatório: ao lado do texto, no vermelho de erro da
   Central (o do HESK flutua meio em cima da palavra). */
body.cust-help .label.required::after,
body.cust-help .form-group.required .label::after {
    content: "*";
    position: static;
    margin-left: 4px;
    color: #B42318;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .param .label.required {
    margin-right: 0;
}
/* Os campos: 48, raio 6, fio #B5BBCF, foco com borda e anel azuis. */
body.cust-help .form input.form-control,
body.cust-help .form textarea.form-control {
    height: 48px;
    padding: 0 15px;
    border: 1px solid #B5BBCF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;                      /* 16: menos que isso, o iPhone dá zoom no campo */
    line-height: 1.5rem;
}
body.cust-help .form textarea.form-control {
    height: 192px;
    padding: 11px 15px;
    resize: vertical;
}
body.cust-help .form input.form-control:hover,
body.cust-help .form textarea.form-control:hover {
    border-color: #8E97B3;
}
body.cust-help .form input.form-control:focus,
body.cust-help .form textarea.form-control:focus {
    border-color: #0059FB;
    box-shadow: 0 0 0 3px rgba(0, 89, 251, .20);
    outline: 0;
}
/* O traço entre os blocos do formulário: um fio fraco. */
body.cust-help .form-submit-ticket .divider {
    height: 0;
    margin: 8px 0 32px;
    border-top: 1px solid #EEF1F7;
    background: none;
}

/* ERRO. O HESK escreve class="form-group error" no Nome mesmo sem erro (vem
   assim no HTML real, conferido em 22/10): por isso o vermelho NÃO sai de
   .form-group.error. Sai do que só existe com erro de verdade:
   - no formulário, o retorno do servidor marca o campo com .isError e o
     formulário com .invalid (form.invalid .form-control.isError);
   - no Ver chamado, o app.min.js marca o grupo com .error e o formulário com
     .invalid ao enviar vazio (#formNeedValidation.invalid .form-group.error).
   O campo fica com a borda #B42318; o rótulo, também. */
body.cust-help .form.invalid .form-control.isError,
body.cust-help #formNeedValidation.invalid .form-group.error .form-control {
    border-color: #B42318;
}
body.cust-help .form.invalid .form-control.isError:focus,
body.cust-help #formNeedValidation.invalid .form-group.error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .20);
}
body.cust-help .form.invalid .isError > label,
body.cust-help #formNeedValidation.invalid .form-group.error > label {
    color: #B42318;
}
/* A mensagem do campo (só no Ver chamado): a .ctl-form-erro da Central. */
body.cust-help .form-group .form-control__error {
    margin: 8px 0 0;
    padding: 0 0 0 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23B42318'/%3E%3Cpath d='M8 4.5v4.5' stroke='%23FFF' stroke-width='1.75' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1' fill='%23FFF'/%3E%3C/svg%3E") 0 4px / 16px 16px no-repeat;
    color: #B42318;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
}
/* O aviso do topo (o HESK o põe acima do título; a grade o traz para o
   começo do conteúdo claro): caixa de erro clara. */
body.cust-help .notification {
    margin: 0;
    padding: 15px 23px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: none;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .notification::before {
    display: none;
}
body.cust-help .notification.red {
    max-width: 800px;
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #B42318;
}
body.cust-help .notification.green {
    border-color: #A6E3C4;
    background: #ECFDF3;
    color: #067647;
}
body.cust-help .notification.orange {
    border-color: #FEDF89;
    background: #FFFAEB;
    color: #93370D;
}
body.cust-help .notification.blue {
    border-color: #C7D9FF;
    background: #EAF1FF;
    color: #102770;
}
/* O "Voltar" do aviso azul (a categoria sem artigos, kb-categoria--vazia):
   o HESK o põe em linha, sozinho, depois de dois <br>, e o alvo ficava na
   palavra (36 × 19). Em inline-flex com min-height de 24, a caixa de
   clique tem a altura da linha do aviso (24): o desenho não muda. Cor e
   sublinhado são os da .link do HESK. No celular, 40 (seção 10). */
body.cust-help .notification.blue > a.link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}
body.cust-help .notification.browser-default p {
    margin: 0 0 8px !important;           /* .browser-default p tem margem em !important */
}
body.cust-help .notification.browser-default p:last-child {
    margin-bottom: 0 !important;
}
body.cust-help .notification.browser-default ul {
    margin: 0;
    padding-left: 24px !important;
}

/* CURSO E TURMA: os rádios viram botões de escolha (.ctl-escolha
   compacta). O rádio continua lá, fora da vista (a app.min.css já o tira
   para a esquerda) e focável; o rótulo é o botão. Curso em duas colunas. */
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom) > label {
    grid-column: 1 / -1;
    margin: 0;
}
/* A Pós em uma coluna: são dois cursos de nome longo. Em duas colunas o
   nome tem 288 de lugar, e "Master Education em Neuroaprendizagem" mede
   307 (317 em negrito) na Segoe UI: três linhas e uma fileira de 96. Em
   uma, o nome inteiro (490, 507 em negrito) cabe na linha de 652 do
   desktop e na de 557 do tablet. No celular já é uma coluna, e ele quebra
   (96 e 72). */
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom :is([value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"])) {
    grid-template-columns: minmax(0, 1fr);
}
body.cust-help .form-submit-ticket .radio-custom {
    display: block;
    min-height: 0;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label {
    display: flex;
    align-items: center;
    min-height: 48px;
    height: 100%;
    margin: 0;
    padding: 11px 15px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    cursor: pointer;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label::before,
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label::after {
    content: none;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio]:checked + label {
    border-color: #0059FB;
    background: #EAF1FF;
    color: #102770;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .radio-custom [type=radio]:focus-visible + label {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .form-submit-ticket .radio-custom [type=radio]:not(:checked) + label:hover {
        border-color: #0059FB;
    }
}
body.cust-help .form.invalid .radio-custom [type=radio]:not(:checked):required + label {
    border-color: #B42318;
}
/* Cada curso com a sua cor (Marcelo, 23/10): as mesmas da Central
   (central.css, data-cor-curso), escolhidas pelo value do rádio, que é o
   nome do curso. Um quadrinho da cor antes do nome; marcado, o botão vira
   o cartão do curso da Central (degradê e nome em branco). A Turma marcada
   herda a cor do curso escolhido. Curso novo, sem regra aqui, fica com o
   comportamento azul de antes.
   Os cursos da Pós (custom11) e do Qualifica SP (custom9), desde 25/10,
   ficam na cor do tipo, como os cartões de curso do portão da Central
   ([data-etapa="curso"], data-tipos): Pós no índigo, Qualifica SP no
   preto. Esses vão pelo começo do value ([value^=]), porque a carga
   horária do fim ("(120h)") pode mudar. Os quatro do Qualifica SP que a
   Central tem e o HESK ainda não (CyberOps, Inteligência Artificial,
   Segurança da Informação e Webdesign) já ficam prontos. */
body.cust-help .form-submit-ticket [type=radio][value="Administração de Empresas"] + label   { --curso-a: #0D2C55; --curso-b: #071F3A; }
body.cust-help .form-submit-ticket [type=radio][value="Desenvolvimento de Sistemas"] + label { --curso-a: #6D28D9; --curso-b: #3B1A8C; }
body.cust-help .form-submit-ticket [type=radio][value="Informática para Internet"] + label   { --curso-a: #0369A1; --curso-b: #0C3B66; }
body.cust-help .form-submit-ticket [type=radio][value="Marketing"] + label                   { --curso-a: #C2410C; --curso-b: #7C2D12; }
body.cust-help .form-submit-ticket [type=radio][value="Recursos Humanos"] + label            { --curso-a: #0F766E; --curso-b: #134E4A; }
body.cust-help .form-submit-ticket [type=radio][value="Serviços Jurídicos"] + label          { --curso-a: #8C2346; --curso-b: #4A0F24; }
body.cust-help .form-submit-ticket [type=radio]:is([value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"]) + label { --curso-a: #2B44C9; --curso-b: #1A2A8C; }
body.cust-help .form-submit-ticket [type=radio]:is([value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"], [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]) + label { --curso-a: #1A1A1A; --curso-b: #000000; }
/* Os ícones dos cursos, os mesmos da Central (Font Awesome Free 6.7.2,
   solid, CC BY 4.0, tirados da fonte que o Moodle usa): o HESK não carrega
   o Font Awesome, então cada desenho vem embutido, como máscara. */
body.cust-help .form-submit-ticket [type=radio][value="Administração de Empresas"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 64Q64 50 55 41Q46 32 32 32Q18 32 9 41Q0 50 0 64V400Q1 434 23 457Q46 479 80 480H480Q494 480 503 471Q512 462 512 448Q512 434 503 425Q494 416 480 416H80Q65 415 64 400V64ZM471 151Q480 141 480 128Q480 115 471 105Q461 96 448 96Q435 96 425 105L320 211L263 153Q253 144 240 144Q227 144 217 153L105 265Q96 275 96 288Q96 301 105 311Q115 320 128 320Q141 320 151 311L240 221L297 279Q307 288 320 288Q333 288 343 279L471 151Z'/%3E%3C/svg%3E"); } /* fa-chart-line */
body.cust-help .form-submit-ticket [type=radio][value="Desenvolvimento de Sistemas"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M393 1Q380 -2 368 4Q357 10 353 23L225 471Q222 484 228 496Q234 507 247 511Q260 514 272 508Q283 502 287 489L415 41Q418 28 412 16Q406 5 393 1ZM473 121Q464 131 464 144Q464 157 473 167L563 256L473 345Q464 355 464 368Q464 381 473 391Q483 400 496 400Q509 400 519 391L631 279Q640 269 640 256Q640 243 631 233L519 121Q509 112 496 112Q483 112 473 121ZM167 121Q157 112 144 112Q131 112 121 121L9 233Q0 243 0 256Q0 269 9 279L121 391Q131 400 144 400Q157 400 167 391Q176 381 176 368Q176 355 167 345L77 256L167 167Q176 157 176 144Q176 131 167 121Z'/%3E%3C/svg%3E"); } /* fa-code */
body.cust-help .form-submit-ticket [type=radio][value="Informática para Internet"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 256Q352 289 349 320H163Q160 289 160 256Q160 223 163 192H349Q352 223 352 256ZM381 192H504H381H504Q512 223 512 256Q512 289 504 320H381Q384 289 384 256Q384 223 381 192ZM493 160H377H493H377Q361 62 321 8Q381 25 426 64Q470 104 493 160ZM344 160H168H344H168Q177 105 195 65Q211 30 228 14Q245 -1 256 0Q267 -1 284 14Q301 30 317 65Q335 105 344 160ZM135 160H19H135H19Q42 104 86 64Q131 25 191 8Q151 62 135 160ZM8 192H131H8H131Q128 223 128 256Q128 289 131 320H8Q0 289 0 256Q0 223 8 192ZM195 447Q177 407 168 352H344Q335 407 317 447Q301 482 284 498Q267 513 256 512Q245 513 228 498Q211 482 195 447ZM135 352Q151 450 191 504Q131 487 86 448Q42 408 19 352H135ZM493 352Q470 408 426 448Q381 487 322 504Q361 450 377 352H494Z'/%3E%3C/svg%3E"); } /* fa-globe */
body.cust-help .form-submit-ticket [type=radio][value="Marketing"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 32Q479 11 460 2Q441 -5 425 9L382 53Q345 89 299 109Q252 128 201 128H192H64Q37 129 19 147Q1 165 0 192V288Q1 315 19 333Q37 351 64 352V480Q64 494 73 503Q82 512 96 512H160Q174 512 183 503Q192 494 192 480V352H201Q252 352 299 372Q345 391 382 427L425 471Q441 485 460 478Q479 469 480 448V300Q494 293 503 277Q512 261 512 240Q512 219 503 203Q494 186 480 180V32ZM416 109V240V109V240V371Q371 331 316 310Q261 288 201 288H192V192H201Q261 192 316 170Q371 149 416 109Z'/%3E%3C/svg%3E"); } /* fa-bullhorn */
body.cust-help .form-submit-ticket [type=radio][value="Recursos Humanos"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80Q209 60 222 46Q236 33 256 32H320Q340 33 354 46Q367 60 368 80V144Q367 164 354 178Q340 191 320 192H312V232H464Q488 233 504 248Q519 264 520 288V320H528Q548 321 562 334Q575 348 576 368V432Q575 452 562 466Q548 479 528 480H464Q444 479 430 466Q417 452 416 432V368Q417 348 430 334Q444 321 464 320H472V288Q471 281 464 280H312V320H320Q340 321 354 334Q367 348 368 368V432Q367 452 354 466Q340 479 320 480H256Q236 479 222 466Q209 452 208 432V368Q209 348 222 334Q236 321 256 320H264V280H112Q105 281 104 288V320H112Q132 321 146 334Q159 348 160 368V432Q159 452 146 466Q132 479 112 480H48Q28 479 14 466Q1 452 0 432V368Q1 348 14 334Q28 321 48 320H56V288Q57 264 72 248Q88 233 112 232H264V192H256Q236 191 222 178Q209 164 208 144V80Z'/%3E%3C/svg%3E"); } /* fa-sitemap */
body.cust-help .form-submit-ticket [type=radio][value="Serviços Jurídicos"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M384 32H512H384H512Q526 32 535 41Q544 50 544 64Q544 78 535 87Q526 96 512 96H398Q389 136 352 153V448H512Q526 448 535 457Q544 466 544 480Q544 494 535 503Q526 512 512 512H320H128Q114 512 105 503Q96 494 96 480Q96 466 105 457Q114 448 128 448H288V153Q251 136 242 96H128Q114 96 105 87Q96 78 96 64Q96 50 105 41Q114 32 128 32H256Q279 1 320 0Q361 1 384 32ZM440 320H585H440H585L512 196L440 320ZM512 416Q464 415 429 393Q395 371 386 337Q383 320 393 305L488 142Q496 128 512 128Q528 129 536 142L631 305Q641 320 638 337Q629 371 595 393Q560 415 512 416ZM127 196 54 320 127 196 54 320H199L127 196ZM1 337Q-2 320 8 305L103 142Q111 128 127 128Q143 129 151 142L246 305Q256 320 253 337Q244 371 209 393Q175 415 127 416Q79 415 44 393Q10 371 1 337Z'/%3E%3C/svg%3E"); } /* fa-scale-balanced */
body.cust-help .form-submit-ticket [type=radio][value^="Master Education em Neuroaprendizagem e Performance Cognitiva"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M184 0Q208 1 224 16Q239 32 240 56V456Q239 480 224 496Q208 511 184 512Q162 512 146 498Q131 484 128 462Q120 464 112 464Q85 463 67 445Q49 427 48 400Q48 389 52 379Q29 370 14 350Q0 330 0 304Q0 280 13 261Q25 242 46 232Q32 215 32 192Q32 169 46 152Q60 135 82 129Q80 121 80 112Q80 89 94 72Q107 56 128 50Q131 28 146 14Q162 0 184 0ZM328 0Q350 0 366 14Q381 28 384 50Q405 56 418 72Q432 89 432 112Q432 121 430 129Q452 135 466 152Q480 169 480 192Q480 215 466 232Q487 242 499 261Q512 280 512 304Q512 330 498 350Q483 370 460 379Q464 389 464 400Q463 427 445 445Q427 463 400 464Q392 464 384 462Q381 484 366 498Q350 512 328 512Q304 511 288 496Q273 480 272 456V56Q273 32 288 16Q304 1 328 0Z'/%3E%3C/svg%3E"); } /* fa-brain */
body.cust-help .form-submit-ticket [type=radio][value^="MBA em Gestão Estratégica de Instituições de Ensino"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M338 5Q320 -5 302 5L166 96H48Q28 97 14 110Q1 124 0 144V464Q1 484 14 498Q28 511 48 512H256V416Q257 389 275 371Q293 353 320 352Q347 353 365 371Q383 389 384 416V512H592Q612 511 626 498Q639 484 640 464V144Q639 124 626 110Q612 97 592 96H474L338 5ZM96 192H128H96H128Q143 193 144 208V272Q143 287 128 288H96Q81 287 80 272V208Q81 193 96 192ZM496 208Q497 193 512 192H544Q559 193 560 208V272Q559 287 544 288H512Q497 287 496 272V208ZM96 320H128H96H128Q143 321 144 336V400Q143 415 128 416H96Q81 415 80 400V336Q81 321 96 320ZM496 336Q497 321 512 320H544Q559 321 560 336V400Q559 415 544 416H512Q497 415 496 400V336ZM232 176Q234 126 276 100Q320 76 364 100Q406 126 408 176Q406 226 364 252Q320 276 276 252Q234 226 232 176ZM320 128Q305 129 304 144V176Q305 191 320 192H352Q367 191 368 176Q367 161 352 160H336V144Q335 129 320 128Z'/%3E%3C/svg%3E"); } /* fa-school */
body.cust-help .form-submit-ticket [type=radio][value^="Aplicação de Banco de Dados"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 80V128V80V128Q446 162 382 185Q319 207 224 208Q129 207 66 185Q2 162 0 128V80Q2 46 66 23Q129 1 224 0Q319 1 382 23Q446 46 448 80ZM393 215Q425 204 448 186V288Q446 322 382 345Q319 367 224 368Q129 367 66 345Q2 322 0 288V186Q23 204 55 215Q125 239 224 240Q323 239 393 215ZM0 346Q23 364 55 375Q125 399 224 400Q323 399 393 375Q425 364 448 346V432Q446 466 382 489Q319 511 224 512Q129 511 66 489Q2 466 0 432V346Z'/%3E%3C/svg%3E"); } /* fa-database */
body.cust-help .form-submit-ticket [type=radio][value^="Arquitetura de Sistemas"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 80Q1 60 14 46Q28 33 48 32H144Q164 33 178 46Q191 60 192 80V96H384V80Q385 60 398 46Q412 33 432 32H528Q548 33 562 46Q575 60 576 80V176Q575 196 562 210Q548 223 528 224H432Q412 223 398 210Q385 196 384 176V160H192V176Q192 179 192 181L272 288H368Q388 289 402 302Q415 316 416 336V432Q415 452 402 466Q388 479 368 480H272Q252 479 238 466Q225 452 224 432V336Q224 333 224 331L144 224H48Q28 223 14 210Q1 196 0 176V80Z'/%3E%3C/svg%3E"); } /* fa-diagram-project */
body.cust-help .form-submit-ticket [type=radio][value^="Gestão de Projetos de TI"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M152 38Q167 54 154 72L82 152Q75 160 65 160Q54 160 47 153L7 113Q-7 96 7 79Q24 65 41 79L63 101L118 40Q134 25 152 38ZM152 198Q167 214 154 232L82 312Q75 320 65 320Q54 320 47 313L7 273Q-7 256 7 239Q24 225 41 239L63 261L118 200Q134 185 152 198ZM224 96Q224 82 233 73Q242 64 256 64H480Q494 64 503 73Q512 82 512 96Q512 110 503 119Q494 128 480 128H256Q242 128 233 119Q224 110 224 96ZM224 256Q224 242 233 233Q242 224 256 224H480Q494 224 503 233Q512 242 512 256Q512 270 503 279Q494 288 480 288H256Q242 288 233 279Q224 270 224 256ZM160 416Q160 402 169 393Q178 384 192 384H480Q494 384 503 393Q512 402 512 416Q512 430 503 439Q494 448 480 448H192Q178 448 169 439Q160 430 160 416ZM48 368Q75 369 90 392Q102 416 90 440Q75 463 48 464Q21 463 6 440Q-6 416 6 392Q21 369 48 368Z'/%3E%3C/svg%3E"); } /* fa-list-check */
body.cust-help .form-submit-ticket [type=radio][value^="Programação Mobile"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M16 64Q17 37 35 19Q53 1 80 0H304Q331 1 349 19Q367 37 368 64V448Q367 475 349 493Q331 511 304 512H80Q53 511 35 493Q17 475 16 448V64ZM224 448Q224 434 215 425Q206 416 192 416Q178 416 169 425Q160 434 160 448Q160 462 169 471Q178 480 192 480Q206 480 215 471Q224 462 224 448ZM304 64H80H304H80V384H304V64Z'/%3E%3C/svg%3E"); } /* fa-mobile-screen-button */
body.cust-help .form-submit-ticket [type=radio][value^="Programação Orientada a Objetos"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M291 49 369 78 291 49 369 78 288 110 207 78 285 49Q288 48 291 49ZM136 93V205V93V205Q134 205 132 206L36 242Q2 257 0 295V414Q1 449 34 465L130 507Q152 517 175 507L288 458L402 507Q424 517 447 507L543 465Q575 450 576 414V295Q574 257 540 242L444 206Q442 205 440 205Q440 205 440 205V93Q438 55 404 40L308 4Q288 -4 268 4L172 40Q138 55 136 93ZM392 211 310 242 392 211 310 242V153L392 121V211ZM155 251 233 281 155 251 233 281 152 312 71 281 149 251Q152 250 155 251ZM174 455V355V455V355L256 323V419L174 455ZM421 251Q424 250 427 251L505 281L424 312L343 281L421 251ZM523 421 446 455 523 421 446 455V355L528 323V414Q528 419 523 421Z'/%3E%3C/svg%3E"); } /* fa-cubes */
body.cust-help .form-submit-ticket [type=radio][value^="Programação Web"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M64 96Q65 69 83 51Q101 33 128 32H512Q539 33 557 51Q575 69 576 96V352H512V96H128V352H64V96ZM0 403Q2 386 19 384H621Q638 386 640 403Q639 436 618 458Q596 479 563 480H77Q44 479 23 458Q1 436 0 403ZM281 209 250 240 281 209 250 240 281 271Q295 288 281 305Q264 319 247 305L199 257Q185 240 199 223L247 175Q264 161 281 175Q295 192 281 209ZM393 175 441 223 393 175 441 223Q455 240 441 257L393 305Q376 319 359 305Q345 288 359 271L390 240L359 209Q345 192 359 175Q376 161 393 175Z'/%3E%3C/svg%3E"); } /* fa-laptop-code */
body.cust-help .form-submit-ticket [type=radio][value^="Sistemas Operacionais"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M9 87Q0 77 0 64Q0 51 9 41Q19 32 32 32Q45 32 55 41L247 233Q256 243 256 256Q256 269 247 279L55 471Q45 480 32 480Q19 480 9 471Q0 461 0 448Q0 435 9 425L179 256L9 87ZM256 416H544H256H544Q558 416 567 425Q576 434 576 448Q576 462 567 471Q558 480 544 480H256Q242 480 233 471Q224 462 224 448Q224 434 233 425Q242 416 256 416Z'/%3E%3C/svg%3E"); } /* fa-terminal */
body.cust-help .form-submit-ticket [type=radio][value^="CyberOps Associate"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0Q263 0 269 3L458 83Q475 90 485 105Q496 120 496 140Q497 191 479 260Q461 329 414 394Q368 460 282 503Q256 515 230 503Q144 460 98 394Q51 329 33 260Q15 191 16 140Q16 120 27 105Q37 90 54 83L243 3Q249 0 256 0ZM256 67V445V67V445Q324 410 363 356Q401 302 417 245Q432 187 432 141L256 67Q256 67 256 67Q256 67 256 67Z'/%3E%3C/svg%3E"); } /* fa-shield-halved */
body.cust-help .form-submit-ticket [type=radio][value^="Inteligência Artificial Aplicada para Negócios"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M320 0Q334 0 343 9Q352 18 352 32V96H472Q503 97 523 117Q543 137 544 168V440Q543 471 523 491Q503 511 472 512H168Q137 511 117 491Q97 471 96 440V168Q97 137 117 117Q137 97 168 96H288V32Q288 18 297 9Q306 0 320 0ZM208 384Q193 385 192 400Q193 415 208 416H240Q255 415 256 400Q255 385 240 384H208ZM304 384Q289 385 288 400Q289 415 304 416H336Q351 415 352 400Q351 385 336 384H304ZM400 384Q385 385 384 400Q385 415 400 416H432Q447 415 448 400Q447 385 432 384H400ZM264 256Q263 233 244 221Q224 211 204 221Q185 233 184 256Q185 279 204 291Q224 301 244 291Q263 279 264 256ZM416 296Q439 295 451 276Q461 256 451 236Q439 217 416 216Q393 217 381 236Q371 256 381 276Q393 295 416 296ZM48 224H64H48H64V416H48Q28 415 14 402Q1 388 0 368V272Q1 252 14 238Q28 225 48 224ZM592 224Q612 225 626 238Q639 252 640 272V368Q639 388 626 402Q612 415 592 416H576V224H592Z'/%3E%3C/svg%3E"); } /* fa-robot */
body.cust-help .form-submit-ticket [type=radio][value^="Segurança da Informação Aplicada"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144V192V144V192H304V144Q303 110 281 87Q258 65 224 64Q190 65 167 87Q145 110 144 144ZM80 192V144V192V144Q82 83 122 42Q163 2 224 0Q285 2 326 42Q366 83 368 144V192H384Q411 193 429 211Q447 229 448 256V448Q447 475 429 493Q411 511 384 512H64Q37 511 19 493Q1 475 0 448V256Q1 229 19 211Q37 193 64 192H80Z'/%3E%3C/svg%3E"); } /* fa-lock */
body.cust-help .form-submit-ticket [type=radio][value^="Webdesign"] + label { --curso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M469 19 493 43 469 19 493 43Q511 62 511 88Q511 113 493 133L436 190L322 76L379 19Q398 1 424 1Q449 1 469 19ZM45 353 300 98 45 353 300 98 414 212 159 467Q148 477 135 481L31 511Q17 514 7 505Q-2 495 1 481L31 377Q35 363 45 353ZM249 103 103 249 249 103 103 249 16 162Q2 147 2 128Q2 109 16 94L94 16Q109 2 128 2Q147 2 162 16L182 36Q182 36 181 36Q181 36 181 37L117 101Q107 112 117 123Q128 133 139 123L203 59Q204 59 204 59Q204 59 204 58L249 103ZM409 263 454 308 409 263 454 308Q453 308 453 308Q453 308 453 309L389 373Q379 384 389 395Q400 404 411 395L475 331Q476 331 476 331Q476 330 476 330L496 350Q510 365 510 384Q510 403 496 418L418 496Q403 510 384 510Q365 510 350 496L263 409L409 263Z'/%3E%3C/svg%3E"); } /* fa-pen-ruler */

/* O MARCADO ANDA (25/10/2026): o botão do curso e o da turma passam do
   branco ao degradê do curso, e o quadro do ícone do degradê ao vidro, em
   200 ms (seção 11), em vez de trocar de uma vez. Degradê não se anima,
   mas as cores dele sim, quando a cor é uma propriedade registrada: é o
   que a Central faz na carteirinha (central.css, @property --cart-a). O
   fundo do botão é o mesmo degradê nos dois estados, e o que muda são as
   cores dele (branco e branco, sem marcar; as do curso, marcado); o quadro
   tem o vidro por cima do degradê, e as duas camadas trocam de cor (o
   degradê some no transparente, o vidro acende). Nas duas pontas o
   desenho é o de antes. Navegador sem @property troca de uma vez, como
   antes. O @property só registra o tipo do nome: não pinta nada sozinho. */
@property --estudar-fundo-a {
    syntax: "<color>";
    inherits: false;
    initial-value: #FFFFFF;
}
@property --estudar-fundo-b {
    syntax: "<color>";
    inherits: false;
    initial-value: #FFFFFF;
}
@property --estudar-quadro-a {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}
@property --estudar-quadro-b {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}
@property --estudar-quadro-luz {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255, 255, 255, 0);
}
@property --estudar-vidro-a {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255, 255, 255, 0);
}
@property --estudar-vidro-b {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255, 255, 255, 0);
}

body.cust-help .form-submit-ticket:has([value="Administração de Empresas"]:checked)   { --turma-a: #0D2C55; --turma-b: #071F3A; }
body.cust-help .form-submit-ticket:has([value="Desenvolvimento de Sistemas"]:checked) { --turma-a: #6D28D9; --turma-b: #3B1A8C; }
body.cust-help .form-submit-ticket:has([value="Informática para Internet"]:checked)   { --turma-a: #0369A1; --turma-b: #0C3B66; }
body.cust-help .form-submit-ticket:has([value="Marketing"]:checked)                   { --turma-a: #C2410C; --turma-b: #7C2D12; }
body.cust-help .form-submit-ticket:has([value="Recursos Humanos"]:checked)            { --turma-a: #0F766E; --turma-b: #134E4A; }
body.cust-help .form-submit-ticket:has([value="Serviços Jurídicos"]:checked)          { --turma-a: #8C2346; --turma-b: #4A0F24; }
body.cust-help .form-submit-ticket:has(:is([value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"]):checked) { --turma-a: #2B44C9; --turma-b: #1A2A8C; }
body.cust-help .form-submit-ticket:has(:is([value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"], [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]):checked) { --turma-a: #1A1A1A; --turma-b: #000000; }

/* O botão do curso: o quadro do ícone (32, raio 6) no degradê do curso, à
   esquerda, e o nome. O quadro fica a 7 da borda (7 + 32 + 7 + os fios =
   48), mas só ocupa 24 na linha (margem de -4 em cima e embaixo), a altura
   de uma linha do nome. Assim o padding é o dos outros botões, 11, e o nome
   que quebra leva o botão de 24 em 24 (72, 96), com o quadro no meio; numa
   linha, tudo cai onde caía com o padding de 7. Quebram: no desktop,
   "Programação Orientada a Objetos (120h)" (72); no celular, os da Pós
   (96 e 72) e mais dois do Qualifica SP (72). */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ) + label {
    gap: 12px;
    padding: 11px 15px 11px 7px;
}
/* O fundo dos botões de curso conhecido e das turmas de um curso conhecido,
   nos dois estados: a luz do alto e o degradê nas cores que andam (sem
   marcar, branco e branco). Sem isso, desmarcar voltaria ao branco de uma
   vez (o curso que perde a vez quando o aluno troca, a turma que ele
   troca). */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ) + label,
body.cust-help .form-submit-ticket:has(:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ):checked) .radio-custom [name="custom1"] + label {
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--estudar-fundo-a, #FFFFFF) 0%, var(--estudar-fundo-b, #FFFFFF) 100%);
}
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ) + label::before {
    --estudar-quadro-a: var(--curso-a);
    --estudar-quadro-b: var(--curso-b);
    --estudar-quadro-luz: rgba(255, 255, 255, .20);
    content: "";
    position: static;
    flex: none;
    width: 32px;
    height: 32px;
    margin: -4px 0;
    border: 0;
    border-radius: 6px;
    /* De cima para baixo: o vidro (apagado sem marcar), a luz do alto e o
       degradê do curso (que some no transparente quando marca, e o vidro
       fica sobre o degradê do botão, como antes). */
    background:
        linear-gradient(145deg, var(--estudar-vidro-a, rgba(255, 255, 255, 0)) 0%, var(--estudar-vidro-b, rgba(255, 255, 255, 0)) 100%),
        radial-gradient(90% 60% at 50% 0%, var(--estudar-quadro-luz, rgba(255, 255, 255, .20)), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--estudar-quadro-a, var(--curso-a)) 0%, var(--estudar-quadro-b, var(--curso-b)) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, 0);
}
/* O desenho, branco, por cima do quadro: 16 no centro dos 32. */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ) + label::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: 15px;                           /* 7 de padding + 8 até o centro do quadro */
    width: 16px;
    height: 16px;
    opacity: 1;
    transform: none;
    border-radius: 0;
    background-color: #FFFFFF;
    -webkit-mask: var(--curso-icone) center / contain no-repeat;
    mask: var(--curso-icone) center / contain no-repeat;
}
@media (hover: hover) {
    body.cust-help .form-submit-ticket .radio-custom [type=radio]:not(:checked) + label:hover {
        border-color: var(--curso-a, #0059FB);
    }
}
/* Marcado: o cartão do curso. Branco no ponto mais claro de cada degradê
   passa de 4,5 (contas da Central: SJ 8,6 · ADM 13,9 · MKT 5,2 · RH 5,5 ·
   DS 7,1 · II 5,9 · Pós 7,6 · Qualifica SP 17,4; sob a luz do alto, no
   pior ponto, Pós 4,8 e Qualifica SP 9,2). */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ):checked + label,
body.cust-help .form-submit-ticket:has(:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ):checked) .radio-custom [name="custom1"]:checked + label {
    --estudar-fundo-a: var(--curso-a, var(--turma-a));
    --estudar-fundo-b: var(--curso-b, var(--turma-b));
    border-color: transparent;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, var(--estudar-fundo-a, var(--curso-a, var(--turma-a))) 0%, var(--estudar-fundo-b, var(--curso-b, var(--turma-b))) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px -8px rgba(7, 31, 58, .40);
    color: #FFFFFF;
}
/* Marcado, o quadro vira o vidro dos ícones da Central sobre o degradê. O
   vidro era duas camadas (o brilho de 26% a 8% sobre 10% de branco); aqui
   é uma só, com as duas somadas (33% a 17%), o mesmo branco. */
body.cust-help .form-submit-ticket .radio-custom [type=radio]:is(
        [value="Administração de Empresas"], [value="Desenvolvimento de Sistemas"], [value="Informática para Internet"], [value="Marketing"], [value="Recursos Humanos"], [value="Serviços Jurídicos"],
        [value^="Master Education em Neuroaprendizagem e Performance Cognitiva"], [value^="MBA em Gestão Estratégica de Instituições de Ensino"],
        [value^="Aplicação de Banco de Dados"], [value^="Arquitetura de Sistemas"], [value^="Gestão de Projetos de TI"], [value^="Programação Mobile"], [value^="Programação Orientada a Objetos"], [value^="Programação Web"], [value^="Sistemas Operacionais"],
        [value^="CyberOps Associate"], [value^="Inteligência Artificial Aplicada para Negócios"], [value^="Segurança da Informação Aplicada"], [value^="Webdesign"]
    ):checked + label::before {
    --estudar-quadro-a: transparent;
    --estudar-quadro-b: transparent;
    --estudar-quadro-luz: rgba(255, 255, 255, 0);
    --estudar-vidro-a: rgba(255, 255, 255, .33);
    --estudar-vidro-b: rgba(255, 255, 255, .17);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .24);
}
/* Turma: quadrados de 48 numa fileira. O campo é o custom1 desta
   instalação; se o HESK renumerar os campos, a Turma cai nas duas colunas
   do Curso e continua funcionando. */
body.cust-help .form-submit-ticket .form-group:has(> .radio-custom [name="custom1"]) {
    grid-template-columns: repeat(auto-fill, 48px);
}
body.cust-help .form-submit-ticket .radio-custom [name="custom1"] + label {
    justify-content: center;
    width: 48px;
    padding: 11px 0;
    font-variant-numeric: tabular-nums;
}
/* Turma antes do curso (estudar.js, 25/10): sem curso marcado, cada
   .radio-custom da Turma vem com hidden, e a turma que o curso não tem
   também. A app.min.css põe display: flex no .radio-custom, e este
   arquivo, block: o hidden do navegador perde para os dois, e a turma
   continuaria lá. Aqui ele vence. */
body.cust-help .radio-custom[hidden],
body.cust-help .form-submit-ticket .radio-custom[hidden] {
    display: none;
}
/* A dica que fica no lugar das turmas ("Escolha o curso para ver as
   turmas."): a caixa de uma fileira de turmas, 48, na largura do campo,
   tracejada no fio dos botões de escolha (a caixa vazia da Categoria) e no
   fundo de superfície, com o texto de apoio em 14/24 (#5A668C sobre
   #F5F7FB, 5,3). No desktop as turmas cabem numa fileira de 48, e a página
   não pula quando elas aparecem; no celular são duas (cinco por linha). */
body.cust-help .form-submit-ticket .estudar-turma-dica {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 11px 15px;
    border: 1px dashed #D5D8E2;
    border-radius: 8px;
    background: #F5F7FB;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .form-submit-ticket .estudar-turma-dica[hidden] {
    display: none;
}
/* Quando o curso é marcado, a dica sai por cima das turmas que entram no
   lugar dela (estudar.js, tirarDica): fica em position: absolute por 120
   ms, no lugar medido. O grupo da Turma é o ancestral posicionado, para a
   medida (offsetTop/offsetLeft) e a posição contarem do mesmo ponto, mesmo
   com o cartão do formulário ainda entrando (transform, seção 11). */
body.cust-help .form-submit-ticket .form-group:has(> .estudar-turma-dica) {
    position: relative;
}

/* A mensagem e as sugestões do manual que o HESK abre ao digitar. */
body.cust-help .form-submit-ticket .kb-suggestions {
    margin: 8px 0 0;
    padding: 15px;
    border: 1px solid #C7D9FF;
    border-radius: 8px;
    background: #EAF1FF;
}

/* ANEXOS: a área tracejada da Central, o "Adicionar arquivo" como botão
   secundário e o "Limites de envio" ao lado dele. */
body.cust-help .param--attach .attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
/* O div sem classe que embrulha área e botão (no formulário) some; no Ver
   chamado o HESK não põe esse div, e a área e o botão já são da fileira. */
body.cust-help .param--attach .attach > div:not([class]) {
    display: contents;
}
/* O #attachment-holder-* só guarda os input hidden dos anexos enviados. Vem
   com class="hide", que a app.min.css não define: ficava na fileira como item
   de largura zero, e o vão de 16 dele empurrava o botão. Input hidden segue
   no envio do formulário mesmo dentro de display: none. */
body.cust-help .param--attach .attach .hide {
    display: none;
}
body.cust-help .param--attach .dropzone {
    flex: 1 0 100%;
    min-height: 96px;
    margin: 0;
    padding: 23px;
    border: 1px dashed #B5BBCF;
    border-radius: 10px;
    background: #F5F7FB;
}
body.cust-help .param--attach .dropzone .dz-message {
    margin: 0;
}
body.cust-help .param--attach .dropzone .dz-button {
    display: block;
    width: 100%;
    min-height: 48px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    text-align: center;
}
/* A dropzone.min.css dá outline: inherit ao .dz-button, e ele herda o "sem
   contorno" do pai. É o único jeito de anexar pelo teclado (o "Adicionar
   arquivo" é um div sem tabindex): o foco precisa aparecer. */
body.cust-help .param--attach .dropzone .dz-button:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
body.cust-help .param--attach .dropzone.dz-drag-hover {
    border-color: #0059FB;
    background: #EAF1FF;
}
body.cust-help .param--attach .file-row {
    margin: 0 0 8px;
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
}
/* A app.min.css força 32 nos .btn-full até 900px com !important. */
body.cust-help .param--attach .fileinput-button {
    min-width: 0;
    height: 40px !important;
    margin: 0;
    padding: 0 19px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .param--attach .fileinput-button:hover {
        border-color: #0059FB;
        background: #FFFFFF;
        color: #0059FB;
    }
}
body.cust-help .param--attach .attach-tooltype {
    margin: 0;
}
body.cust-help .param--attach .attach-tooltype .link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}

/* LIMITES DE ENVIO: o link abria a janela de 250×500 do HESK. O estudar.js
   (gancho do fim do <body>, suporte/ganchos/footer.txt) troca por este
   balão, que ele põe no fim da fileira dos anexos: com flex-basis de 100%,
   cai na linha de baixo do link, a 16 dele (o vão da fileira). O cartão
   pequeno da Central: fio claro, raio 8, sombra curta. 16 em cima e 24 nos
   lados e embaixo, contando o fio. Escondido ([hidden]) não ocupa a fileira. */
body.cust-help .estudar-limites {
    flex: 1 0 100%;
    max-width: 480px;
    position: relative;
    padding: 15px 23px 23px;
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .06), 0 12px 24px -8px rgba(16, 39, 112, .20);
    color: #3A4468;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}
body.cust-help .estudar-limites[hidden] {
    display: none;
}
/* Ao aparecer, sobe 4 e acende em 150ms (sem movimento na seção 12). */
@starting-style {
    body.cust-help .estudar-limites {
        opacity: 0;
        transform: translateY(-4px);
    }
}
/* A seta: um quadrado de 12 girado, com o fio só nos dois lados de cima. O
   estudar.js grava em --estudar-seta o meio do link, contado da borda
   esquerda do balão, ao abrir e quando a janela muda de largura. */
body.cust-help .estudar-limites::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(var(--estudar-seta, 24px) - 6px);
    width: 12px;
    height: 12px;
    border-top: 1px solid #E3E7F0;
    border-left: 1px solid #E3E7F0;
    background: #FFFFFF;
    transform: rotate(45deg);
}
/* O topo: o título e o Fechar, numa linha de 24. */
body.cust-help .estudar-limites__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px;
}
body.cust-help .estudar-limites__titulo {
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 800;
}
/* O Fechar: alvo de 32 (40 no celular), com margem negativa para não somar
   altura ao topo; o × fica alinhado à borda do texto. O foco é o anel azul
   da base. */
body.cust-help .estudar-limites__fechar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -8px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5A668C;
    cursor: pointer;
}
body.cust-help .estudar-limites__fechar svg {
    display: block;
}
@media (hover: hover) {
    body.cust-help .estudar-limites__fechar:hover {
        background: #F4F8FB;
        color: #102770;
    }
}
/* Os itens: rótulo 12/16 em tinta suave, valor 14/24 em navy; 8 entre um
   item e outro. */
body.cust-help .estudar-limites__itens {
    margin: 0;
}
body.cust-help .estudar-limites__itens dt {
    margin: 8px 0 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
}
body.cust-help .estudar-limites__itens dt:first-child {
    margin-top: 0;
}
body.cust-help .estudar-limites__itens dd {
    margin: 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
/* As extensões aceitas: etiquetas de 24 no tint, 4 entre elas na linha
   (vão apertado) e 8 entre as linhas e acima: 32 por linha de etiquetas,
   o balão fica na grade com qualquer quebra. */
body.cust-help .estudar-limites__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
body.cust-help .estudar-limites__tipos li {
    margin: 0;
    padding: 0 8px;
    border-radius: 4px;
    background: #EAF1FF;
    color: #102770;
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: 700;
}
/* "Carregando…", enquanto o file_limits.php não chega. */
body.cust-help .estudar-limites__estado {
    margin: 0;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
/* Com o balão aberto, o link fica em navy. */
body.cust-help .param--attach .attach-tooltype .link[aria-expanded="true"] {
    color: #102770;
}

/* "Antes de enviar, confira se": caixa tint discreta. O aviso do IP e da
   hora fica, em tinta suave (não se esconde). */
body.cust-help .form-submit-ticket .alert {
    max-width: 720px;
    margin: 0 0 32px;
    border: 0;
    border-radius: 8px;
    background: #EAF1FF;
    color: #3A4468;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .form-submit-ticket .alert__inner {
    padding: 16px 24px;
}
body.cust-help .form-submit-ticket .alert__inner > b {
    display: block;
    color: #102770;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .alert__inner > br {
    display: none;
}
body.cust-help .form-submit-ticket .alert__inner > ul {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
}
/* [3.7] O 3.7 pôs .browser-default no .alert, e a app.min.css dá
   padding-left: 40px !important às listas dele (.browser-default ul). */
body.cust-help .form-submit-ticket .alert__inner > ul {
    padding-left: 24px !important;
}
body.cust-help .form-submit-ticket .alert__inner > ul + br + b {
    margin-top: 16px;
}
body.cust-help .form-submit-ticket .alert__inner > ul:last-child {
    color: #5A668C;
}

/* O botão de enviar e os botões principais dos formulários: a .ctl-botao,
   com 48. A app.min.css força 32 até 900px com !important. */
body.cust-help .form-footer {
    align-items: flex-start;
    gap: 16px;
}
body.cust-help .form-footer .btn,
body.cust-help .form-footer .btn-full {
    min-width: 240px;
    height: 48px !important;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .form-footer .btn-full:hover,
    body.cust-help .help-search #search-button:hover {
        border-color: #0047C9;
        background: #0047C9;
        color: #FFFFFF;
    }
}
body.cust-help .form-footer .btn-full:focus-visible {
    border-color: #0047C9;
    background: #0047C9;
}


/* --------------------------------------------------------------------------
   7. ESCOLHA DE ASSUNTO E VER CHAMADO (entrada) — um cartão branco menor,
   com os campos e o botão iguais aos do formulário. Com o estudar.js, a
   escolha de assunto vira dois passos de cartões (tipo de curso e assunto),
   no desenho dos atalhos da Central.
   -------------------------------------------------------------------------- */
body.cust-help .main__content > .contr > form:not(.form) {
    max-width: 480px;
    padding: 39px;
    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);
}
/* O seletor de assunto vem numa caixa "display: table" centrada, em linha. */
body.cust-help .main__content > .contr > form:not(.form) > div[style] {
    display: block !important;
    margin: 0 0 24px !important;
}
/* O seletor (selectize): 48, raio 6, fio de campo. A app.min.css pinta o
   seletor de azul ao passar o mouse e no foco, com !important, e a partir de
   900px força 56 de altura e 18px de letra, também com !important. */
body.cust-help .selectize-control.cat-select {
    display: flex;
    width: 100%;
}
body.cust-help .selectize-control .selectize-input {
    width: 100% !important;               /* a app.min.css põe width: auto com !important */
    height: 48px !important;              /* a app.min.css põe 56 a partir de 900px */
    padding: 0 40px 0 15px;
    border: 1px solid #B5BBCF;            /* sem !important: o .isError do app (vermelho) tem que vencer */
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: 1rem !important;           /* idem: 18px a partir de 900px */
    line-height: 1.5rem;
}
body.cust-help .selectize-control .selectize-input:hover,
body.cust-help .selectize-control .selectize-input.dropdown-active:hover {
    border-color: #8E97B3 !important;
    background: #FFFFFF !important;
    color: #102770;
}
body.cust-help .selectize-control .selectize-input.input-active,
body.cust-help .selectize-control .selectize-input.focus {
    border-color: #0059FB !important;
    box-shadow: 0 0 0 3px rgba(0, 89, 251, .20);
}
/* Com erro, o vermelho fica também no hover (a regra de hover acima é
   !important e venceria o .isError da app.min.css). */
body.cust-help .selectize-control.isError .selectize-input,
body.cust-help .selectize-control.isError .selectize-input:hover {
    border-color: #B42318 !important;
}
body.cust-help .selectize-control .selectize-input .item {
    color: #102770;
}
/* O campo interno do seletor é readonly (não se digita nele) e o JS o deixa
   com 4px de largura em linha. Esticado no resto da caixa, ele não aparece e
   o alvo passa a ser a caixa inteira, que é o que o aluno vê como campo.
   Altura de 40 (e não 46, o vão entre as bordas) para ficar na grade. */
body.cust-help .selectize-control.cat-select .selectize-input > input[readonly] {
    flex: 1 1 auto;
    width: auto !important;               /* a largura de 4px vem em linha */
    min-width: 4px;
    height: 40px;
    cursor: pointer;
}
body.cust-help .selectize-control .selectize-input::after {
    right: 16px;
    opacity: .6 !important;               /* a seta vem a 25% em !important: some no branco */
}
body.cust-help .selectize-dropdown {
    width: 100% !important;               /* idem: largura em linha, medida pelo JS ao abrir */
    margin-top: 4px;
    font-size: 1rem !important;           /* a app.min.css põe 17px a partir de 900px */
    border-radius: 8px;
    box-shadow: 0 12px 24px -12px rgba(7, 31, 58, .32), 0 0 0 1px #E3E7F0;
}
body.cust-help .selectize-dropdown .option {
    min-height: 40px;
    height: auto;
    padding: 8px 16px;
    white-space: normal;                  /* assunto longo quebra em vez de cortar no celular */
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .selectize-dropdown .option.active {
    background: #EAF1FF;
    color: #102770;
}
body.cust-help .main__content > .contr > form:not(.form) .form-footer .btn-full {
    min-width: 0;
    width: 100%;
}

/* A ESCOLHA EM DOIS PASSOS (Marcelo, 25/10/2026). O estudar.js (gancho do
   fim do <body>) lê as opções do seletor, esconde o form ([hidden]) e põe
   logo depois dele a .estudar-assunto: no passo 1, o tipo de curso; no
   passo 2, os assuntos daquele tipo. Sem o estudar.js, fica o seletor de
   cima, como estava. O passo 2 tem o desenho dos atalhos da seção Suporte
   da Central (.ctl-atalho), no azul: o ambiente do HESK é azul, e o laranja
   da Central não entra aqui. O passo 1 parte do mesmo cartão e vira o do
   tipo de curso do portão da Central (pedido do Marcelo, 25/10; mais
   abaixo, "Passo 1"). */

/* O [hidden] some de verdade: qualquer display de regra (daqui ou da
   app.min.css) venceria o display: none do navegador. */
body.cust-help .main__content > .contr > form[hidden],
body.cust-help .estudar-assunto[hidden],
body.cust-help .estudar-assunto [hidden] {
    display: none;
}
/* Até o estudar.js montar, o título (h2 no HESK 3.4, h1 no 3.7) e o
   seletor do HESK ficam invisíveis no lugar deles: sem o "Em que podemos
   ajudar?" e o "CT- Acesso" piscando antes dos cartões (rede lenta,
   primeira visita depois do ?v= novo). O rodapé também: os cartões o
   empurram para baixo, e o pulo dele era quase todo o deslocamento da
   carga (CLS de 0,18 e 0,32 em 375; 0,01 assim). A classe estudar-js vem
   do gancho do <head> (suporte/ganchos/head.txt) e sai no fim da
   montagem, quando ela desiste (o seletor volta) ou em 3 s, se o
   estudar.js não chegar. O :where() põe o <html> na frente sem sair do
   escopo body.cust-help (tools/suporte/escopo-css.mjs) e sem pesar na
   especificidade. Sem :has() (navegador antigo), a regra cai e fica o
   pisca de antes. */
body.cust-help:where(html.estudar-js *) .main__content > .contr:has(#select_category) > .select__title,
body.cust-help:where(html.estudar-js *) .main__content > .contr > form:has(#select_category),
body.cust-help:where(html.estudar-js *):has(#select_category) .footer {
    visibility: hidden;
}
/* Texto só para o leitor de tela ("último escolhido" no tipo lembrado). */
body.cust-help .estudar-so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Ao trocar de passo, o estudar.js leva o foco ao título (tabindex="-1"),
   para o leitor de tela anunciar a pergunta nova. Não é alvo: sem anel. */
body.cust-help .select__title[tabindex="-1"]:focus {
    outline: none;
}
/* Os cartões ficam no claro, logo abaixo da mesa, com o respiro do
   conteúdo claro das outras telas (40; 32 no celular). Com aviso no topo,
   vêm 24 abaixo dele, como o form. */
body.cust-help .main__content > .contr:has(> div[style]:first-child > *) > .estudar-assunto {
    margin-top: 24px;
}

/* A grade dos atalhos da Central, no miolo de 1200 das outras telas: quatro
   colunas de 288 no miolo cheio, três no tablet, uma no celular (seção 10).
   16 entre os cartões. As colunas saem da largura que sobra, e não dos
   cortes de 1024 e 769 da Central: o cartão nunca fica com menos de 256, e
   assim o nome tem 128 (256 menos fios, folgas, quadro, seta e os vãos). A
   palavra mais larga da lista é "Pós‑graduação" (112 na Segoe UI; mais no
   Mac). Com os cortes da Central o nome caía a 96 em 769 e a 100 em 1024, e
   "Cancelamento" e "Regularização" partiam no meio da palavra. Ficam quatro
   colunas a partir de 1136, três de 864 a 1135 e duas de 769 a 863. Os
   tipos do passo 1 têm as colunas deles ("Passo 1", mais abaixo). */
body.cust-help .estudar-assunto-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* O item é uma grade de uma célula: o cartão estica até a altura da
   fileira, e o nome que quebra em mais linhas cresce a fileira junta. */
body.cust-help .estudar-assunto-lista > li {
    display: grid;
    min-width: 0;
    margin: 0;
}
/* O cartão: a superfície clara da Central (fio #E3E7F0, raio 10, a sombra
   baixa). 15/23/15/15 mais o fio = 16/24/16/16, e com o quadro de 48 dá os
   80 de altura, onde o nome cabe em até duas linhas; cada linha além
   dessas soma 24 (104, 128). O cartão inteiro é o alvo. O <button> do
   passo 1 perde o que o navegador e o HESK dão a botão (Lato, #26282a,
   texto centrado, fundo cinza) e sai igual ao <a> do passo 2. Sem o
   destaque cinza do toque no Android: o :active (seção 11) dá o retorno. */
body.cust-help .estudar-assunto-cartao {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
    min-height: 80px;
    margin: 0;
    padding: 15px 23px 15px 15px;
    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;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
/* O quadro do ícone: 48, raio 8, o azul a 10% no branco (#E5EDFC antes,
   para navegador sem color-mix). O desenho de 20 no #0047C9 do quadro do
   título: 6,5:1 sobre o quadro (7,7:1 no branco). */
body.cust-help .estudar-assunto-icone {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #E5EDFC;
    background: color-mix(in oklab, #0047C9 10%, #FFFFFF);
}
body.cust-help .estudar-assunto-icone::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: #0047C9;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}
/* O nome: 16/24 700 navy, à esquerda; 13,6:1 no branco. Palavra que não
   cabe na coluna quebra em vez de vazar do cartão. */
body.cust-help .estudar-assunto-nome {
    flex: 1 1 auto;
    min-width: 0;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    overflow-wrap: break-word;
    text-wrap: pretty;
}
/* A seta: o fa-chevron-right numa caixa de 8 × 12 (6 × 10 de desenho, o
   tamanho das outras setas do arquivo), em #8E97B3, que vira #0059FB no
   hover. É enfeite: o nome diz o destino e o cartão inteiro é o alvo, por
   isso os 2,9:1 dela no branco não entram na régua dos 3:1. O cartão abre
   na mesma aba: nada de ícone de "outra aba". */
body.cust-help .estudar-assunto-cartao::after {
    content: "";
    flex: none;
    width: 8px;
    height: 12px;
    background-color: #8E97B3;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M311 233Q320 243 320 256Q320 269 311 279L119 471Q109 480 96 480Q83 480 73 471Q64 461 64 448Q64 435 73 425L243 256L73 87Q64 77 64 64Q64 51 73 41Q83 32 96 32Q109 32 119 41L311 233Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M311 233Q320 243 320 256Q320 269 311 279L119 471Q109 480 96 480Q83 480 73 471Q64 461 64 448Q64 435 73 425L243 256L73 87Q64 77 64 64Q64 51 73 41Q83 32 96 32Q109 32 119 41L311 233Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.cust-help .estudar-assunto-cartao:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .estudar-assunto-cartao:hover {
        border-color: #C9D0E0;
        background: #FFFFFF;
        box-shadow: 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
        color: #102770;
        text-decoration: none;
    }
    body.cust-help .estudar-assunto-cartao:hover::after {
        background-color: #0059FB;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .estudar-assunto-cartao:hover {
        transform: translateY(-2px);
    }
}
/* O tipo lembrado, quando o aluno volta ao passo 1: o anel da escolha
   atual do portão da Central (.ctl-escolha.is-escolhida), com o fundo da
   página entre ele e o cartão (3 de #F4F8FB e 2 de #0059FB: 5,2:1 no
   fundo). Com o foco, o contorno sai por fora do anel (7 de afastamento),
   para os dois aparecerem juntos. */
body.cust-help .estudar-assunto-cartao.is-escolhida {
    box-shadow: 0 0 0 3px #F4F8FB, 0 0 0 5px #0059FB, 0 1px 2px rgba(16, 39, 112, .04), 0 12px 24px -16px rgba(16, 39, 112, .16);
}
body.cust-help .estudar-assunto-cartao.is-escolhida:focus-visible {
    outline-offset: 7px;
}
@media (hover: hover) {
    body.cust-help .estudar-assunto-cartao.is-escolhida:hover {
        box-shadow: 0 0 0 3px #F4F8FB, 0 0 0 5px #0059FB, 0 2px 4px rgba(16, 39, 112, .06), 0 24px 40px -20px rgba(16, 39, 112, .28);
    }
}

/* Passo 1: os cartões do TIPO DE CURSO do portão da Central (central.css,
   [data-etapa="tipo"] .ctl-escolha; pedido do Marcelo, 25/10/2026). Cada
   tipo com o seu fundo: o degradê de 160°, a grade fina no passo de 24 e a
   luz difusa no alto; o desenho branco num quadro de vidro no centro e o
   nome embaixo, à esquerda, em 18/24 800 branco. Técnicos navy,
   Qualificação no azul da marca, Qualifica SP em preto com a marca SP num
   quadro branco, Pós em índigo; o tipo que o estudar.js não conhece (o
   "outro-xxx" de um prefixo novo) fica no navy. No suporte os quatro têm
   categorias: nada do "Em breve", do estado desabilitado nem da seta da
   Central. As cores ficam na raiz e em cada [data-tipo], para a faixa do
   passo 2 (mais abaixo) usar as mesmas. O desenho é a máscara de sempre
   (--icone), em branco.
   Contraste do branco (WCAG 2) no ponto mais claro de cada fundo, a cor do
   início do degradê (entre parênteses, sobre um fio da grade): Técnicos
   13,9 (12,8) · Qualificação 4,6 (4,3) · Qualifica SP 17,4 (16,1) · Pós
   7,6 (7,0). O nome fica na metade de baixo, de 52% a 61% do degradê: no
   pior ponto dele, 14,1 · 6,9 · 18,5 · 8,9. A luz do alto (16% de branco)
   acaba antes da metade do cartão e só passa por trás do quadro do ícone,
   que é enfeite: lá o fundo chega a 7,9 · 3,4 · 9,7 · 4,9. */
body.cust-help .estudar-assunto {
    container: estudar-assunto / inline-size;   /* os tipos se arrumam pela largura da lista, como no palco da Central */
    --tp-fundo: linear-gradient(160deg, #0D2C55 0%, #071F3A 100%);
    --tp-base: #071F3A;
    --tp-grade: rgba(255, 255, 255, .03);
    --tp-quadro: rgba(255, 255, 255, .10);
    --tp-quadro-borda: rgba(255, 255, 255, .24);
}
body.cust-help .estudar-assunto [data-tipo="qualificacao"] {
    --tp-fundo: linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 100%);
    --tp-base: #0047C9;
    --tp-grade: rgba(255, 255, 255, .04);
    --tp-quadro: rgba(255, 255, 255, .16);
    --tp-quadro-borda: rgba(255, 255, 255, .32);
}
/* A marca SP (central/marcas/qualificasp-sp.png, 84 × 41, 3,8 KB) vem
   embutida: o HESK não tem a pasta da Central. Fica num quadro branco,
   para o S preto não sumir; o vermelho é só dela. */
body.cust-help .estudar-assunto [data-tipo="qualificasp"] {
    --tp-fundo: linear-gradient(160deg, #1A1A1A 0%, #000000 100%);
    --tp-base: #000000;
    --tp-quadro: #FFFFFF;
    --tp-quadro-borda: transparent;
    --tp-marca: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAApCAYAAACr1w7eAAABNWlDQ1BJQ0MgUHJvZmlsZQAAeJx9kL1Kw2AUhh9rQRTFQYcODhkcXNT+aH/Apa1YXFuFVqc0TYvYn5Cm6AXo5uDqJi7egOhlKAgO4uAliKCzbxokBann8OZ7ePOSL+dAJIYqGodO13PLpYJRrR0YU+9MqIdlWn2H8aXU90uQfV79Jzeupht239L5IXmuLtcnG+LFVsCnPtcDvvD5xHM88bXP7l65KL4Tr7RGuD7CluP6+TfxVqc9sML/Ztbu7ld0VqUlSvTULdrYrFPhmCNMUYYim+yQJ0lClCBFTu7GUHniemZJU1AX1Vm9z0gptpXO+fsMruzdQPYLJi9Dr34FD+cQew29Zc02fwb3j6EX7tgxXXNoRaVIswmftzBXg4UnmDn8XeyYWY0/sxrs0sViTZTUNAnSP4XNS70FAaPvAAANd0lEQVR4nNVbW6hdRxn+Z2attffZOTlpTq6cRsmDaaFRQVsftAGp2JeqiBUrWEEf+qzgi/XyUEEfahREbV+0Fi2iUES8EH1QTLVoa9OKKU0VatGYJk1zkpxzss++rDVrRub+z6xZJ5ZSW3/YOXvPmss/33+df1YIvL6JAIDse3h2ZWVU1jVrGRO551QINV7TheQZp7Qzb4H6O9oDAIJS2ZSlOH9mH78JnmyuxnAv7V/efwMweLMgcBCE2AUUGAFixuh/KaGGdSJASPUX9N8+0s8ISAMSzYBGhfpIqAgthyDP33Bx99GH4Zkaz3JiZWW0fdJ8ZJEObytA7JZCSgBpZtV8SSLc7IY9Yhdw64TfIubBbEvx6Pap5tY0J0K+AIV4khTVH/a/ePoUyQg7C+jy8vIbmGSfJSX5MAG5T4KUhFAipVQiJGoUsaSn0BtRvXQ75hvNarGUevOBAUJVo5lGLSCEsP0YTOcnDy8Mbz5+4cLY9T8GMDh0zb4HhvX0Tjmnfgm3aqrSnd8e9C6Xdhu+MZpPsahkVrUAlL3EKLtvZXzpy0qDMHZFCubunbs/AAS+zmV9aFSMgBUMhJB6TQLAUkYCs4jTHrL9iVJRM4KkG1Y/mfqHty1wMpdXyjJieLS0945qvHYnYdtBUhGt6MBKuSA9Pzr91Hil2Mk8bvOKqChBtHxv206+dG5pz60vVOVd166e/bubA9kFwPKO5Y+WA/ZgNSgOLS4uam0TrdDWpD7KsmT6Uas7pZOmDZKP6xPGG+N349P5XBuhlFRng6978ODB4Z7Rtg8SOQQphLHGaB3DQ/xxbRYo/CziHemF7ebaw3f1QwmRAmEj4NPZEcnb757dufLGDqDbt++8mVXkh6xguyilSiu9eJR+WnYjycY66Vyrcj/5SEIy2pKap9IS6wGAap8cqNzYqCpW7ieMmU3aGc1+ja6rv2bOMNQ8Q6tYlZPa8JDPSHhJR+u5HbD6VwliMj3Cm/nnIkCXlpaWF6rii4wx1plZ+w4DlOHDMOwXCYEA/LIoAmC/lIKs5w1yS1yJRbVDwvrqeOfudyq0yCW5h8aDRYqRMherjwMQO1jt9IEIBmTOP3l6x+6bPKAFKW6kJX1XVVXBBNDE5mN0VJt0pK/WLFKwwILbactspic3IgRIDTqV8dN42aGBkTw7XMgAPh6XoRDmsYCd9HKi0tEZZNsMqZCflgBMA0qAvAcAFnWAjbjGrHWh6bBOrPn5CGlhjaJqOm8fuXwiJRoASmYJ3ftn3UqA6YMgeuRQI9E6/1sCcHjvc4uLyxpQyuhbCCE0Wk2BE9xNJLkI2kho0rT5dV0qh7pEfjMYUbQfN6fI7RsLPUNRu9Uu75eCxeT20CMnqxH2E1mvnbMsoOXTHawhBlAA2GUmRVu1oGAXmc0wlZAiwKUHxvlBbGmxPzUs2Wx2S5wwRvhvB/GkwazXnT1qzs2FNtuXvQdlVRsQpJWy0IAKEOHQ4oRgBYtxjhLdRGD+GbFa6czcBR28p8QF+LNIMkY9qSA+IqqQ5/vncswUO7yfFJMU/HihOODlI10ilNom9gQu61iEVbBHWwKobkDMHEk0CGsy1nS8it97Msallpgr6428+4qsBm/Uj7RmbjOVl0VbRsxukFPnYxOUWvKsOvVRdEzPqjnih8jAHtYYif96TUyyggzf/oPWkELCAM7khyZuwvv6DNNdIGOksn48x2efliLSgErgx6WUkyjCBAU0P30+agOL3QVO7SRaS7cje8f+PQUvSkpQCqbOVj1766R2W20S82XDZmzTiDf8tJMKZkwdra2/Gg0tiieogJNt29rihgMk9MaA+IQ8ddok9fP2EIBAChkAGu9BDtu1D6I9zXHJDVtL8rtPCqZf16elLscHy61mS12abdCArq6unm0ace90MokKgmGTKHYnmmGeks6phyDGXGOcj3aBdcbpdSeqNPSTHn4V3+96KlcVp1M5yKKkqrtW5rsjz/Lq2urPS1LezXkzdwua6Bbnit4cInMPPWSkKUadZU/aFaUuna13aYALwAmAWT+YpAAub/RRrXtCQKPxJ0/p6KoG6QDV2Lx0efUo1OJuzsX5+WymapPRoODRMmfNzCLEguqBt3twJhraiP8YQZoxirk5HMjvOmlNO6X+OHriNMJbBlKIAEc3EufSNIRIXYEtuCNRnLu0+g1Zw62M0J9yLi43NW9cHqayAB9wnEOwPhXzClZr8TOc4jir0+UGIWA6mfLZbNrWTQP1fC7q+azlnKtnbABzXYPtUGAk8r/ZXDQTgoJVxcnXf5NY9QXByhWYr9215xOUyN0coFWKISWvC1r8njB2RYB8v5RylyvLpbYUASaxg8+oUJKrSilgMBxOecOfkFxcbNuWqhq8Oq0XIOgCKc8AbOPdG6F4Qz6M4uiHpIsh83/9ZuKI778hflNh4EsJpGC6iwZ0JvinqmH1dt7wWpXw2rYVk+lkRgkRo9FoUd0ceV+eCsdF/T4pomAQtNeMoZRA0zQFkXKbIPIxBuVDLWv/tdi22nL2Dpg4fuWfM0BEOpLqyfNcf/QdFeNt5bSbPvkrkh4w8cThJKkqWgUIYK0GlBAqVFF5MBxUqktRFmw4HJYmmISZneSwynttw6YPqZRDftI9zciSFOxtzbS+URDxITqHjz0/WT+h9v98mArLL26N1ugmihiQWAnMXaG5INO3Zj6fxuvkFCWq4Sp15RzoYGGDsfklm9ib87Qphbrv4VoBnwB9gp9G7VyQknGcTAvPThBFUdCla3ZAtTA8BEP2swOjnbelGASc4tCMT2k4kOTOZpHvw9VBdOrrgNgb/MwuzO9Grfe7f4/HBlB33xEn8909uMJH33oyStLd2Bj4SGNUNLeWKngrC8aUlaxMSnH/oaVd74CrUpznhhX6NSxiNkOd/p2k2TT6lZVEyyFvAb55i7ru7xuPz9/aHDKcYZA0OBA0t1NtSsDUWSEOUuruXGUSlEI1rA7MK/qZt+7bN7onk7u4dCt3PIo0NhnZzVcTC8TuLJ26A6y9v9U3r+33D04v/Um1GpNX0QFFHB818cLOX2aANUAmIk9rAehv0CFkmHZ+IYQsy4pNWn4EZu319yT33pKYlYyP7qbz4b2AxFQ6OJk+Jt33eVyq6GiMncyurtaRwIENBn+GgbzX9bVXINEacdRDq7jAY4ojsd/xpk4QIziNSnYUCRy1qZcn9HUyhT1Tyd+n2q2WGlK32l5rEvXzGhHDlrc7265ScWdSwQWHqb2Wm0MHqMROzcJnQAeDkzOxedeBjY1/uBlNlMe2oQHD0jJ+DvNlfqM3X/CeJGrwIIUUIy314TYfZU10JBMp3mkB1T0updh1MobM9yTXdNoWFMJKKKGcpup3AQoCMGBrnJcPTMcXPn/YlEHzb4741EdpCDrDR3dCmUDk+xAEXBKJuqYWZzteIWwjZZTMpvOdbwIYPIeYFs4D9ASVlM/YQ7miiJqoATlY2KRVcYoQVnvF1gpIqKtySBuwpZC1EOLsrJ4+ziV/tJyvP5OCiQC1KQDSc5xferBTt+XzSnVOMEHGayMa73I35zsjN5Ak0N6tGKIHAMhzmGNq7xITDcW5pkucgvezvlUpCa+BVCVIKI81tP5a005PFldK80bdcrgD1GdGSxfViyCXmajgQnOdKi9sQRpQnwI434zfD3JXDbimibXZdgrHSYgJ56vJ2R4LRZ/9sSCFkAUl68cBZtnUcCsNdY4+Mm2V3sAcquEfJ83m0evmk193XnBxPuUVkFPsqGDszN5ZCOY/mGZ8lExPfTI9cWTAdBrvdQk9EALEiBVPd4ISpq5NG83E99+iASjoZsvEjyd8dvvFcXP79fPJr3reFnrF5H1oJ2o7P5deJ6NkBxcJcq/UOHIantYwIj9nc121nn49s23HlaDHYCvyCWJIe/TrUKr20MyBDEsAUv5yKuuvLMw2/no9wBRgAq8mGUD9m2GIkoo29lE4Mws5q4U5czJyJwssIG/+qLOrl3Le8FKSpwom/6J6uCiviEZpqZ3XuQu34gKb0cHC8Xk7+9ZssvGbXPB4tcj60JxG2bQo4KrJA4s0zRs/iX1tCB5os6icm6uXqp7TyXS81NLvHB6vr59CU+XIWIky7RrIaFvNJX+45rMfkAF77NCVjQ34H1MnbfJBxGlOqkX+ki40ejBkCrQTRj6JiZ6Yt6JhPB7LAYejp6frPzmdnJJUECa4oKAifl0DGTIQbPCLTTn+wtObm6fuUDF6E14TKnBsMqUs9c2VtdJDiM0HfARBmudvS2V0bWz0MZQMgqbag599lVw0XNR1/UJRw33nJ1e+2qeVpCwL/YgC0O2jad0Wv11vxt++vLn2yC0mI3hNSQFKhRSsaRpd8PWEk3lsml6LczkQeG/pYxA+1iQJpDpiCvWGRSsukxYeZa24f7S58UhPfd6MoW1Bt22DmswempHx915cWztxC4B/B//1AKja0N+auuFas/S501maUgP1narN62O2alXf3QTm6C1MXOghoUrY6sLD2r/WWfX/Lwi9AEI8JQU5tm6KylvS5nDIz4nJj8TC2sfffW78LLwOyQEzUP9ZoOdE3AdU7gQKL5O2PHX8P9J/APYcIFZdqttTAAAAAElFTkSuQmCC");
}
body.cust-help .estudar-assunto [data-tipo="pos"] {
    --tp-fundo: linear-gradient(160deg, #2B44C9 0%, #1A2A8C 100%);
    --tp-base: #1A2A8C;
    --tp-grade: rgba(255, 255, 255, .035);
    --tp-quadro: rgba(255, 255, 255, .12);
}

/* As colunas, pela largura da lista (a raiz é o contêiner): duas na lista
   estreita, quatro na larga. A Central troca no palco de 720, com cartões
   de 168; aqui a troca sai do lugar do nome, como na grade dos assuntos:
   "Pós‑graduação" mede 131 em 18 800 na Segoe UI (mais no Mac), e o cartão
   de 184 (o menor que a Central mediu) deixa 136. Quatro de 184 e os três
   vãos de 16 dão 784: quatro colunas daí para cima (1200 no miolo cheio,
   cartões de 288; 960 em 1024, de 228) e duas abaixo (705 a 783, de 769 a
   847 de janela, cartões de 344 a 383). No celular, duas (seção 10). Com
   cinco ou seis tipos (prefixo novo), três por linha na lista larga, para
   não sobrar um sozinho. */
body.cust-help .estudar-assunto-lista--tipos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* O cartão: 224 de altura na lista estreita e 288 na larga, padding de 24,
   sem fio (o fundo é o degradê). A pintura inteira fica numa variável,
   porque o hover dos cartões brancos (acima) repõe o fundo branco pelo
   atalho background, e o daqui precisa repor o degradê. */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao {
    --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);
    --tp-sombra-alta: 0 24px 48px -12px rgba(7, 31, 58, .40);
    --tp-pintura:
        linear-gradient(to right, var(--tp-grade) 1px, transparent 1px) -1px -1px / 24px 24px,
        linear-gradient(to bottom, var(--tp-grade) 1px, transparent 1px) -1px -1px / 24px 24px,
        radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%) 0 0 / 100% 100% no-repeat,
        var(--tp-fundo) 0 0 / 100% 100% no-repeat,
        var(--tp-base);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 224px;
    padding: 24px;
    border: 0;
    background: var(--tp-pintura);
    box-shadow: var(--tp-sombra);
    color: #FFFFFF;
}
/* O quadro de vidro: 96 (112 na lista larga), raio 16, no centro do espaço
   acima do nome. O desenho, 48 (56), na proporção do da Central (3rem num
   quadro de 96, 3,5rem num de 112), com a sombra leve dela. A sombra vai
   no quadro e não no desenho: o desenho é máscara, e a máscara recortaria
   a sombra dele junto. No vidro, a sombra que o quadro ganha some na dele. */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone {
    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);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone::before {
    width: 48px;
    height: 48px;
    background-color: #FFFFFF;
}
/* O quadro que voa até a faixa do passo 2 (estudar.js, comTransicao). A
   View Transition tira uma foto só dele, e o vidro numa foto sozinha não
   tem o que desfocar atrás: sairia um quadro quase branco voando sobre o
   fundo claro. Na foto, então, o vidro vem pintado sobre o degradê do tipo,
   opaco, com a mesma cor que o aluno via. A classe dura até a foto (um
   quadro) e sai antes de a troca começar a andar. */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:not([data-tipo="qualificasp"]) .estudar-assunto-icone.is-voando {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%),
        linear-gradient(var(--tp-quadro), var(--tp-quadro)),
        var(--tp-fundo),
        var(--tp-base);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Qualifica SP: a marca no lugar do desenho, com 72 de largura (a de
   origem é 84: não passar disso). */
body.cust-help .estudar-assunto-lista--tipos [data-tipo="qualificasp"] .estudar-assunto-icone {
    background: #FFFFFF var(--tp-marca) center / 72px auto no-repeat;
    filter: none;
}
body.cust-help .estudar-assunto-lista--tipos [data-tipo="qualificasp"] .estudar-assunto-icone::before {
    content: none;
}
/* O nome: 18/24 800 branco, 24 abaixo do quadro, à esquerda. */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-nome {
    flex: none;
    max-width: 100%;
    margin-top: 24px;
    color: #FFFFFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 800;
    text-wrap: balance;                   /* "Qualificação / Profissional", sem palavra sozinha */
}
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao::after {
    content: none;                        /* sem seta: o cartão inteiro já parece um botão */
}
/* Lista larga: 288, quadro de 112 e desenho de 56. Em 1024 o cartão tem
   228 e só "Qualificação Profissional" quebra: o nome reserva as duas
   linhas (48, encostado embaixo), e os quadros ficam na mesma altura nos
   quatro. */
@container estudar-assunto (min-width: 784px) {
    body.cust-help .estudar-assunto-lista--tipos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    body.cust-help .estudar-assunto-lista--tipos:has(> li:nth-child(5):last-child, > li:nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao {
        min-height: 288px;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone {
        width: 112px;
        height: 112px;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone::before {
        width: 56px;
        height: 56px;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-nome {
        display: flex;
        align-items: flex-end;
        min-height: 48px;
    }
}
/* Foco e hover: a sombra funda da Central. O contorno do foco é o do
   arquivo (2 de #0059FB, a 2 do cartão). */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:focus-visible {
    box-shadow: var(--tp-sombra), var(--tp-sombra-alta);
}
@media (hover: hover) {
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:hover {
        background: var(--tp-pintura);
        box-shadow: var(--tp-sombra), var(--tp-sombra-alta);
        color: #FFFFFF;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:hover {
        transform: translateY(-4px);
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:hover .estudar-assunto-icone {
        transform: translateY(-2px) scale(1.04);
    }
}
/* O tipo lembrado: o anel da Central (3 de #F4F8FB e 2 de #0059FB) somado
   à sombra do cartão. Com o foco, o contorno fica 7 por fora (2 além do
   anel), e os dois aparecem. */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao.is-escolhida {
    box-shadow: 0 0 0 3px #F4F8FB, 0 0 0 5px #0059FB, var(--tp-sombra);
}
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao.is-escolhida:focus-visible {
    box-shadow: 0 0 0 3px #F4F8FB, 0 0 0 5px #0059FB, var(--tp-sombra), var(--tp-sombra-alta);
    outline-offset: 7px;
}
@media (hover: hover) {
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao.is-escolhida:hover {
        box-shadow: 0 0 0 3px #F4F8FB, 0 0 0 5px #0059FB, var(--tp-sombra), var(--tp-sombra-alta);
    }
}

/* Passo 2: a faixa do tipo escolhido, 24 acima dos cartões. O ícone do
   tipo num quadro de 32 na cor do tipo (o do botão de curso do formulário:
   raio 6, luz no alto, o degradê, desenho branco de 16 e 12 até o nome; o
   estudar.js põe o data-tipo na faixa), o nome em 16/24 700 navy (12,7:1
   no fundo) e o
   "Trocar o tipo de curso" no botão secundário de 40 do "Ver todo o
   manual". A faixa mede 40; se não couber numa linha, o botão desce para
   a de baixo, 8 abaixo do nome (32 + 8 + 40 = 80), sem passar da largura. */
body.cust-help .estudar-assunto-curso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 24px;
}
body.cust-help .estudar-assunto-curso-nome {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .estudar-assunto-curso .estudar-assunto-icone {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
        var(--tp-fundo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
body.cust-help .estudar-assunto-curso .estudar-assunto-icone::before {
    width: 16px;
    height: 16px;
    background-color: #FFFFFF;
}
/* Qualifica SP: quadro branco com a marca de 24 × 12 (legível no 32),
   e um fio de 1 #D5D8E2 para o branco não sumir no fundo claro. */
body.cust-help .estudar-assunto-curso[data-tipo="qualificasp"] .estudar-assunto-icone {
    background: #FFFFFF var(--tp-marca) center / 24px auto no-repeat;
    box-shadow: inset 0 0 0 1px #D5D8E2;
}
body.cust-help .estudar-assunto-curso[data-tipo="qualificasp"] .estudar-assunto-icone::before {
    content: none;
}
/* 7 em cima e embaixo, e não 0: numa linha dá os 40 (7 + 24 + 7 + os
   fios), e o texto que quebrar em duas leva o botão a 64, na grade. 23 dos
   lados, 24 com o fio (o "Ver todo o manual" da seção 8 também). No
   celular o texto é só "Trocar" (seção 10). */
body.cust-help .estudar-assunto-trocar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 7px 23px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font: inherit;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    body.cust-help .estudar-assunto-trocar:hover {
        border-color: #0059FB;
        background: #FFFFFF;
        color: #0059FB;
    }
}

/* Os desenhos dos assuntos e dos tipos (Font Awesome Free 6.7.2, solid,
   CC BY 4.0, tirados da fonte que o Moodle usa, como os dos cursos na
   seção 6): o HESK não carrega o Font Awesome, então cada um vem embutido
   e entra como máscara, pelo data-icone que o estudar.js escreve. O balão
   (comment) é também o desenho de quem chega sem nome conhecido. */
body.cust-help .estudar-assunto-icone,
body.cust-help .estudar-assunto-icone[data-icone="comment"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 240Q511 298 477 345Q443 392 385 420Q328 447 256 448Q200 448 152 430Q133 444 98 461Q60 478 16 480Q6 480 1 470Q-2 460 5 453Q5 453 5 453Q5 453 5 453Q5 453 5 453Q5 453 5 453Q5 453 5 453Q5 453 5 453Q5 453 5 453Q5 453 5 453V452Q5 452 5 452Q5 452 6 451Q8 449 11 445Q18 438 26 424Q43 398 48 361Q1 309 0 240Q1 182 35 135Q69 88 127 60Q184 33 256 32Q328 33 385 60Q443 88 477 135Q511 182 512 240Z'/%3E%3C/svg%3E"); } /* fa-comment */
body.cust-help .estudar-assunto-icone[data-icone="key"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M336 352Q411 350 460 300Q510 251 512 176Q510 101 460 52Q411 2 336 0Q261 2 212 52Q162 101 160 176Q160 204 168 230L7 391Q0 398 0 408V488Q2 510 24 512H104Q126 510 128 488V448H168Q190 446 192 424V384H232Q242 384 249 377L282 344Q308 352 336 352ZM376 96Q399 97 411 116Q421 136 411 156Q399 175 376 176Q353 175 341 156Q331 136 341 116Q353 97 376 96Z'/%3E%3C/svg%3E"); } /* fa-key */
body.cust-help .estudar-assunto-icone[data-icone="wrench"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 320Q420 318 465 273Q510 228 512 160Q512 137 506 116Q503 108 495 106Q488 105 482 111L405 187Q400 192 393 192H336Q321 191 320 176V119Q320 112 325 107L402 30Q407 24 406 17Q404 9 396 6Q375 0 352 0Q284 2 239 47Q194 92 192 160Q192 189 202 215L20 396Q0 416 0 444Q1 473 20 492Q39 511 68 512Q96 512 116 492L298 311Q323 320 352 320ZM80 408Q102 410 104 432Q102 454 80 456Q58 454 56 432Q58 410 80 408Z'/%3E%3C/svg%3E"); } /* fa-wrench */
body.cust-help .estudar-assunto-icone[data-icone="circle-question"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512Q326 511 384 478Q442 444 478 384Q512 323 512 256Q512 189 478 128Q442 68 384 34Q326 1 256 0Q186 1 128 34Q70 68 34 128Q0 189 0 256Q0 323 34 384Q70 444 128 478Q186 511 256 512ZM170 165Q176 148 190 138Q204 128 223 128H281Q308 129 326 147Q343 164 344 191Q343 227 312 246L280 264Q278 286 256 288Q234 286 232 264V251Q232 237 244 230L288 204Q296 200 296 191Q295 177 281 176H223Q217 176 215 181V183Q205 203 184 197Q164 188 169 167L170 165ZM224 352Q224 338 233 329Q242 320 256 320Q270 320 279 329Q288 338 288 352Q288 366 279 375Q270 384 256 384Q242 384 233 375Q224 366 224 352Z'/%3E%3C/svg%3E"); } /* fa-circle-question */
body.cust-help .estudar-assunto-icone[data-icone="file-pen"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 64Q1 37 19 19Q37 1 64 0H224V128Q224 142 233 151Q242 160 256 160H384V286L297 373Q282 388 276 410L258 485Q254 499 259 512H64Q37 511 19 493Q1 475 0 448V64ZM384 128H256H384H256V0L384 128ZM550 236 564 250 550 236 564 250Q576 262 576 278Q576 294 564 307L535 336L464 265L493 236Q506 224 521 224Q537 224 550 236ZM312 417 441 288 312 417 441 288 512 359 383 488Q377 494 368 496L308 511Q299 513 293 507Q287 501 288 492L303 432Q306 423 312 417Z'/%3E%3C/svg%3E"); } /* fa-file-pen */
body.cust-help .estudar-assunto-icone[data-icone="chart-simple"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M160 80Q161 60 174 46Q188 33 208 32H240Q260 33 274 46Q287 60 288 80V432Q287 452 274 466Q260 479 240 480H208Q188 479 174 466Q161 452 160 432V80ZM0 272Q1 252 14 238Q28 225 48 224H80Q100 225 114 238Q127 252 128 272V432Q127 452 114 466Q100 479 80 480H48Q28 479 14 466Q1 452 0 432V272ZM368 96H400H368H400Q420 97 434 110Q447 124 448 144V432Q447 452 434 466Q420 479 400 480H368Q348 479 334 466Q321 452 320 432V144Q321 124 334 110Q348 97 368 96Z'/%3E%3C/svg%3E"); } /* fa-chart-simple */
body.cust-help .estudar-assunto-icone[data-icone="rotate-left"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M49 224H40H49H40Q18 222 16 200V72Q17 56 31 50Q45 44 57 55L99 97Q143 53 200 39Q257 25 313 39Q370 54 414 98Q458 142 473 199Q487 256 473 313Q458 370 414 414Q370 458 313 473Q256 487 199 473Q142 458 98 414Q88 405 88 392Q88 379 98 369Q107 360 120 360Q133 360 143 369Q192 416 256 416Q320 416 369 369Q416 320 416 256Q416 192 369 143Q320 96 257 96Q193 96 144 142L185 183Q196 195 190 209Q184 223 168 224H49Z'/%3E%3C/svg%3E"); } /* fa-rotate-left */
body.cust-help .estudar-assunto-icone[data-icone="file-signature"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M64 0Q37 1 19 19Q1 37 0 64V448Q1 475 19 493Q37 511 64 512H320Q347 511 365 493Q383 475 384 448V429Q380 430 376 431L316 446Q311 447 307 448Q305 448 304 448H240Q230 448 226 439L217 422Q214 416 208 416Q202 416 199 422L190 439Q185 448 175 448Q164 447 161 437L144 381L134 414Q123 446 88 448H80Q65 447 64 432Q65 417 80 416H88Q100 415 104 405L118 355Q125 337 144 336Q163 337 170 355L181 394Q193 384 208 384Q233 385 246 407L250 416H259Q254 403 257 388L272 328Q277 311 289 298L384 204V160H256Q242 160 233 151Q224 142 224 128V0H64ZM256 0V128V0V128H384L256 0ZM550 140Q537 128 522 128Q506 128 493 140L464 169L535 240L564 211Q576 198 576 182Q576 166 564 154L550 140ZM312 321Q306 327 304 336L289 396Q287 405 293 411Q299 417 308 415L368 400Q377 398 383 392L512 263L441 192L312 321Z'/%3E%3C/svg%3E"); } /* fa-file-signature */
body.cust-help .estudar-assunto-icone[data-icone="file-lines"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0Q37 1 19 19Q1 37 0 64V448Q1 475 19 493Q37 511 64 512H320Q347 511 365 493Q383 475 384 448V160H256Q242 160 233 151Q224 142 224 128V0H64ZM256 0V128V0V128H384L256 0ZM112 256H272H112H272Q287 257 288 272Q287 287 272 288H112Q97 287 96 272Q97 257 112 256ZM112 320H272H112H272Q287 321 288 336Q287 351 272 352H112Q97 351 96 336Q97 321 112 320ZM112 384H272H112H272Q287 385 288 400Q287 415 272 416H112Q97 415 96 400Q97 385 112 384Z'/%3E%3C/svg%3E"); } /* fa-file-lines */
body.cust-help .estudar-assunto-icone[data-icone="file-circle-check"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 64Q1 37 19 19Q37 1 64 0H224V128Q224 142 233 151Q242 160 256 160H384V199Q328 215 292 261Q257 306 256 368Q256 413 276 450Q296 487 330 511Q325 512 320 512H64Q37 511 19 493Q1 475 0 448V64ZM384 128H256H384H256V0L384 128ZM288 368Q288 329 307 296Q326 263 360 243Q394 224 432 224Q470 224 504 243Q538 263 557 296Q576 329 576 368Q576 407 557 440Q538 473 504 493Q470 512 432 512Q394 512 360 493Q326 473 307 440Q288 407 288 368ZM499 325Q488 315 477 325L416 385L387 357Q376 347 365 357Q355 368 365 379L405 419Q416 429 427 419L499 347Q509 336 499 325Z'/%3E%3C/svg%3E"); } /* fa-file-circle-check */
body.cust-help .estudar-assunto-icone[data-icone="briefcase"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M184 48H328H184H328Q335 49 336 56V96H176V56Q177 49 184 48ZM128 56V96V56V96H64Q37 97 19 115Q1 133 0 160V256H192H512V160Q511 133 493 115Q475 97 448 96H384V56Q383 32 368 16Q352 1 328 0H184Q160 1 144 16Q129 32 128 56ZM512 288H320H512H320V320Q320 334 311 343Q302 352 288 352H224Q210 352 201 343Q192 334 192 320V288H0V416Q1 443 19 461Q37 479 64 480H448Q475 479 493 461Q511 443 512 416V288Z'/%3E%3C/svg%3E"); } /* fa-briefcase */
body.cust-help .estudar-assunto-icone[data-icone="computer"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M384 96V320V96V320H64V96H384ZM64 32Q37 33 19 51Q1 69 0 96V320Q1 347 19 365Q37 383 64 384H181L171 416H96Q82 416 73 425Q64 434 64 448Q64 462 73 471Q82 480 96 480H352Q366 480 375 471Q384 462 384 448Q384 434 375 425Q366 416 352 416H277L267 384H384Q411 383 429 365Q447 347 448 320V96Q447 69 429 51Q411 33 384 32H64ZM528 32Q508 33 494 46Q481 60 480 80V432Q481 452 494 466Q508 479 528 480H592Q612 479 626 466Q639 452 640 432V80Q639 60 626 46Q612 33 592 32H528ZM544 96H576H544H576Q591 97 592 112Q591 127 576 128H544Q529 127 528 112Q529 97 544 96ZM528 176Q529 161 544 160H576Q591 161 592 176Q591 191 576 192H544Q529 191 528 176ZM560 336Q574 336 583 345Q592 354 592 368Q592 382 583 391Q574 400 560 400Q546 400 537 391Q528 382 528 368Q528 354 537 345Q546 336 560 336Z'/%3E%3C/svg%3E"); } /* fa-computer */
body.cust-help .estudar-assunto-icone[data-icone="scroll"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 80V128V80V128Q0 142 9 151Q18 160 32 160H48H96V80Q95 60 82 46Q68 33 48 32Q28 33 14 46Q1 60 0 80ZM112 32Q128 53 128 80V384Q129 411 147 429Q165 447 192 448Q219 447 237 429Q255 411 256 384V379Q257 354 273 337Q290 321 315 320H480V128Q479 87 452 60Q425 33 384 32H112ZM464 480Q512 479 543 447Q575 416 576 368Q575 353 560 352H315Q290 354 288 379V384Q287 425 260 452Q233 479 192 480H368Z'/%3E%3C/svg%3E"); } /* fa-scroll */
body.cust-help .estudar-assunto-icone[data-icone="certificate"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M211 7Q201 -2 188 1Q174 5 171 18L155 81L93 63Q79 60 69 69Q60 79 63 93L81 155L18 171Q5 174 1 188Q-2 201 7 211L54 256L7 301Q-2 311 1 324Q5 338 18 342L81 357L63 419Q60 433 69 443Q79 452 93 449L155 431L171 494Q174 507 188 511Q201 514 211 505L256 459L301 505Q311 514 324 511Q338 507 342 494L357 431L419 449Q433 452 443 443Q452 433 449 419L431 357L494 342Q507 338 511 324Q514 311 505 301L459 256L505 211Q514 201 511 188Q507 174 494 171L431 155L449 93Q452 79 443 69Q433 60 419 63L357 81L341 18Q338 5 324 1Q311 -2 301 7L256 54L211 7Z'/%3E%3C/svg%3E"); } /* fa-certificate */
body.cust-help .estudar-assunto-icone[data-icone="ban"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M367 413 100 145 367 413 100 145Q65 193 64 256Q66 338 120 392Q174 446 256 448Q319 447 367 413ZM413 367Q447 319 448 256Q446 174 392 120Q338 66 256 64Q193 65 145 100L413 367ZM0 256Q1 186 34 128Q68 70 128 34Q189 0 256 0Q323 0 384 34Q444 70 478 128Q511 186 512 256Q511 326 478 384Q444 442 384 478Q323 512 256 512Q189 512 128 478Q68 442 34 384Q1 326 0 256Z'/%3E%3C/svg%3E"); } /* fa-ban */
body.cust-help .estudar-assunto-icone[data-icone="shield-halved"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0Q263 0 269 3L458 83Q475 90 485 105Q496 120 496 140Q497 191 479 260Q461 329 414 394Q368 460 282 503Q256 515 230 503Q144 460 98 394Q51 329 33 260Q15 191 16 140Q16 120 27 105Q37 90 54 83L243 3Q249 0 256 0ZM256 67V445V67V445Q324 410 363 356Q401 302 417 245Q432 187 432 141L256 67Q256 67 256 67Q256 67 256 67Z'/%3E%3C/svg%3E"); } /* fa-shield-halved */
body.cust-help .estudar-assunto-icone[data-icone="ellipsis"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M8 256Q9 224 36 208Q64 192 92 208Q119 224 120 256Q119 288 92 304Q64 320 36 304Q9 288 8 256ZM168 256Q169 224 196 208Q224 192 252 208Q279 224 280 256Q279 288 252 304Q224 320 196 304Q169 288 168 256ZM384 200Q416 201 432 228Q448 256 432 284Q416 311 384 312Q352 311 336 284Q320 256 336 228Q352 201 384 200Z'/%3E%3C/svg%3E"); } /* fa-ellipsis */
body.cust-help .estudar-assunto-icone[data-icone="graduation-cap"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M320 32Q308 32 296 36L16 137Q1 144 0 160Q1 176 16 183L74 204Q49 243 48 292V320Q45 364 26 401Q16 420 3 438Q-2 445 1 453Q4 461 12 464L76 480Q83 481 89 478Q94 474 96 467Q106 401 94 359Q89 337 80 317V292Q81 246 108 210Q127 187 157 175L314 113Q328 109 335 122Q339 136 326 143L169 204Q150 212 137 226L296 284Q308 288 320 288Q332 288 344 284L624 183Q639 176 640 160Q639 144 624 137L344 36Q332 32 320 32ZM128 408Q130 436 184 457Q238 479 320 480Q402 479 456 457Q510 436 512 408L497 263L355 314Q338 320 320 320Q302 320 286 314L143 263L128 408Z'/%3E%3C/svg%3E"); } /* fa-graduation-cap */
body.cust-help .estudar-assunto-icone[data-icone="screwdriver-wrench"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M79 5Q62 -6 47 7L7 47Q-6 62 5 79L85 183Q92 192 104 192H158L267 301Q256 323 260 348Q263 372 281 391L393 503Q403 512 416 512Q429 512 439 503L503 439Q512 429 512 416Q512 403 503 393L391 281Q372 263 348 260Q323 256 301 267L192 158V104Q192 92 183 85L79 5ZM20 396Q0 416 0 444Q1 473 20 492Q39 511 68 512Q96 512 116 492L234 374Q222 342 230 309L168 247L20 396ZM512 144Q512 128 509 114Q506 105 499 103Q491 102 485 108L421 171Q416 176 409 176H352Q337 175 336 160V103Q336 96 341 91L405 27Q411 21 409 13Q407 6 399 3Q384 0 368 0Q307 2 266 42Q226 83 224 144V145L309 230Q337 223 364 230Q392 238 413 259L429 275Q466 257 489 222Q511 188 512 144ZM56 432Q58 410 80 408Q102 410 104 432Q102 454 80 456Q58 454 56 432Z'/%3E%3C/svg%3E"); } /* fa-screwdriver-wrench */
body.cust-help .estudar-assunto-icone[data-icone="award"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M174 6Q192 -5 210 6L228 17Q237 23 248 23L269 21Q291 21 301 40L311 59Q316 68 325 73L345 83Q363 93 363 115L361 136Q361 147 367 156L379 174Q390 192 379 210L367 228Q361 237 361 248L363 269Q363 291 344 301L325 311Q316 316 311 325L301 345Q291 363 270 363L248 361Q237 361 228 367L210 379Q192 390 174 379L156 367Q147 361 136 361L115 363Q93 363 83 344L73 325Q68 316 59 311L40 301Q21 291 21 270L23 248Q23 237 17 228L6 210Q-5 192 6 174L17 156Q23 147 23 136L21 115Q21 93 40 83L59 73Q68 68 73 59L83 40Q93 21 115 21L136 23Q147 23 156 17L174 6ZM272 192Q271 147 232 123Q192 101 152 123Q113 147 112 192Q113 237 152 261Q192 283 232 261Q271 237 272 192ZM1 442 44 339 1 442 44 339Q45 339 45 340L54 359Q75 395 116 395L138 393Q138 393 138 394L156 405Q164 410 172 413L135 502Q131 511 121 512Q112 513 107 505L74 456L18 464Q9 465 3 458Q-2 450 1 442ZM249 502 212 413 249 502 212 413Q220 410 228 405L246 394Q246 393 246 393L268 395Q309 395 330 359L339 340Q339 339 340 339L383 442Q386 450 381 458Q375 465 366 464L310 456L277 505Q272 512 263 512Q253 511 249 502Z'/%3E%3C/svg%3E"); } /* fa-award */

/* Ver chamado: o mesmo cartão de 480, com os dois campos, o "Lembrar"
   (o texto inteiro é o alvo) e o "Esqueceu o código?". */
body.cust-help #formNeedValidation {
    max-width: 480px;
}
body.cust-help #formNeedValidation .form-groups {
    margin: 0;
}
body.cust-help .checkbox-custom [type=checkbox] + label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-left: 32px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .checkbox-custom [type=checkbox] + label::before {
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1px solid #B5BBCF;
    border-radius: 4px;
    background: #FFFFFF;
}
body.cust-help .checkbox-custom [type=checkbox] + label::after {
    top: 50%;
    left: 4px;
    margin-top: -6px;
}
body.cust-help .checkbox-custom [type=checkbox]:checked + label::before {
    border-color: #0059FB;
    background: #EAF1FF;
}
body.cust-help .checkbox-custom [type=checkbox]:focus-visible + label::before {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
body.cust-help #formNeedValidation .form-footer {
    align-items: stretch;
    gap: 8px;
}
body.cust-help #formNeedValidation .form-footer .btn-full {
    width: 100%;
    min-width: 0;
}
body.cust-help .form-footer .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}

/* CHAMADO ENVIADO — a confirmação vem num .notification.green dentro de um
   segundo .main__content.notice-flash (que o esqueleto também desfaz). Sem
   título fora do aviso, a mesa leva só as migalhas, com os 48 de baixo, e
   o aviso vira o cartão de confirmação: selo de feito, título, código do
   chamado num chip e o botão principal. O "Nenhum e-mail de confirmação?"
   é dica, não erro: o vermelho vem em linha no HTML e só cede a
   !important. Os <br><br> do HESK saem; quem espaça é a margem. */
/* [3.7-hotfix 2026-10-25] Só o aviso VERDE. No 3.7 o aviso vermelho do
   erro do formulário e o azul da categoria vazia do manual também vêm num
   .main__content.notice-flash; com .main:has(.notice-flash) a mesa
   encolhia para as migalhas e o título ficava branco sobre o claro. */
body.cust-help .main:has(.notice-flash > .notification.green)::before {
    grid-row: 2 / 3;
}
body.cust-help .main:has(.notice-flash > .notification.green) .breadcrumbs {
    padding-bottom: 24px;                 /* + os 24 das migalhas = 48 de mesa */
}
/* [3.7-hotfix 2026-10-25] O aviso não verde de um .notice-flash que mora
   direto no conteúdo (o azul "Ainda não há artigos nesta categoria") é
   neto do .contr: o esqueleto desfaz o .main__content dele e o aviso
   virava item solto da grade, na calha. Vai para o miolo, no conteúdo
   claro. O vermelho do erro do formulário mora no <div style> dos avisos
   e já estava no miolo. */
body.cust-help .main__content > .contr > .main__content > .notification:not(.green) {
    grid-column: miolo;
    margin-top: 40px;
}
body.cust-help .notice-flash > .notification.green {
    position: relative;                   /* o check (::after) se põe sobre o selo */
    grid-column: miolo;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    margin: 40px 0 0;
    padding: 39px;
    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: #3A4468;
    font-size: 1rem;
    line-height: 1.5rem;
}
body.cust-help .notice-flash > .notification.green::before {
    content: "";
    display: block;
    position: static;
    width: 48px;
    height: 48px;
    margin: 0 0 24px;
    border-radius: 50%;
    background: #ECFDF3;
    box-shadow: inset 0 0 0 1px #A6E3C4;
}
/* O check, numa camada própria por cima do selo, para se desenhar da
   esquerda para a direita (seção 11), no centro do selo: 39 de padding e
   mais 12 (no celular, 23 e mais 12, seção 10). Parado, é o mesmo desenho
   de antes. */
body.cust-help .notice-flash > .notification.green::after {
    content: "";
    position: absolute;
    top: 51px;
    left: 51px;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
body.cust-help .notice-flash > .notification.green > p {
    margin: 0;
}
body.cust-help .notice-flash > .notification.green > p:first-child {
    margin-bottom: 8px;
    color: #0A2445;
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 800;
}
body.cust-help .notice-flash > .notification.green > p > br {
    display: none;
}
body.cust-help .notice-flash > .notification.green .font-weight-bold {
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    background: #EAF1FF;
    color: #102770;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
body.cust-help .notice-flash > .notification.green span[style] {
    display: block;
    margin: 24px 0 0;
    padding: 15px 15px 15px 47px;
    border: 1px solid #D5D8E2;
    border-radius: 8px;
    background: #F4F8FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%235A668C'/%3E%3Cpath d='M8 7.5v4' stroke='%23FFF' stroke-width='1.75' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.75' r='1' fill='%23FFF'/%3E%3C/svg%3E") 16px 19px / 16px 16px no-repeat;
    color: #3A4468 !important;            /* style="color:red" em linha */
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .notice-flash > .notification.green span[style] > b:first-child {
    color: #0A2445;
}
body.cust-help .notice-flash > .notification.green .btn-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 48px !important;              /* a app.min.css força 32 até 900px */
    margin: 32px 0 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .notice-flash > .notification.green .btn-full:hover {
        border-color: #0047C9;
        background: #0047C9;
        color: #FFFFFF;
    }
}
body.cust-help .notice-flash > .notification.green .btn-full:focus-visible {
    border-color: #0047C9;
    background: #0047C9;
}

/* VER CHAMADO (a conversa) — a .ticket sem --article: à esquerda o chamado
   e a resposta, cada um num cartão branco; à direita os detalhes, numa
   coluna de 320. A mesa leva só as migalhas, como no Chamado enviado. */
body.cust-help .main:has(.ticket__params) .breadcrumbs {
    padding-bottom: 24px;                 /* + os 24 das migalhas = 48 de mesa */
}
body.cust-help .ticket:not(.ticket--article) {
    gap: 32px;
    align-items: flex-start;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block {
    margin: 0;
    padding: 39px;
    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: #3A4468;
    text-align: left;
}
/* O assunto do chamado: o título da página.
   [3.7] Era <h3> no 3.4.3 e virou <h1> no 3.7 (view-ticket.php). O h1 leva
   a Lato da app.min.css (.ticket:not(.ticket--article) .ticket__body_block
   h1, peso maior que o ".wrapper *" da base): a fonte volta a herdar aqui. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > :is(h1, h3) {
    font-family: inherit;
    margin: 0 0 8px;
    color: #102770;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-wrap: balance;
}
/* Contato, hora e imprimir: a linha de apoio do título. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head > .d-flex {
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact {
    display: flex;
    align-items: center;
    gap: 4px;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    margin: 0;
    color: #0059FB;
    font-weight: 600;
    cursor: pointer;
}
/* O balão do "Contato": o cartão pequeno da Central (fio claro, raio 8,
   sombra), a 8 do nome, com o rótulo pequeno sobre o e-mail. O HESK pinta
   a linha de azul no hover e o link de branco: sai. */
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list {
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    padding: 12px 16px;
    border: 1px solid #E3E7F0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 39, 112, .06), 0 12px 24px -8px rgba(16, 39, 112, .20);
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li {
    display: block;
    height: auto;
    padding: 0;
    background: none !important;
    white-space: normal;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li .title {
    display: block;
    min-width: 0;
    margin: 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li .value {
    display: block;
    color: #102770;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li a,
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown .dropdown-list li:hover a {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 24px;
    padding: 0 !important;                /* a app.min.css põe 0 16px com !important */
    color: #0059FB;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
body.cust-help .ticket:not(.ticket--article) .block--head time {
    margin: 0;
    color: #5A668C;
}
/* [3.7] A linha "De:" do chamado mudou no 3.7 (view-ticket.php):
       .contact.grid > .requester-header ("De:")
                     + .requester (o nome no .dropdown.customer, "»" solto, <time>)
                     [+ .cc-header ("CC:") + .cc, só com cópia]
   A hora deixou de ser irmã do .contact e mora no .requester. Para ficar
   como no 3.4.3 ("Contato: Nome   há 7 minutos"): a grade do HESK fica (o
   CC, se houver, cai na linha de baixo, alinhado), mas com rótulo à
   esquerda e 4 de vão; o .requester vira uma fileira com 16 entre nome e
   hora, e o "»" (texto solto) some com a letra 0, como os colchetes do
   "Marcar como resolvido". O nome volta a ser o link azul: sai o chip com
   sombra (padding e altura com !important na app.min.css) e o boneco.
   Validar com chamado de teste: montado só sobre o HTML do template. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block.original-message > .block--head {
    margin-top: 0 !important;             /* a app.min.css põe 16 com !important */
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head .contact.grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;                   /* com a hora na 2ª linha (celular), o "De:" fica na linha do nome */
    gap: 8px 4px;
    flex: 0 1 auto;                       /* o 10. CELULAR põe flex: none e nowrap: aqui a hora mora dentro, e sem quebra ela vazaria em 375 */
    min-width: 0;
    margin: 0;
    white-space: normal;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact.grid > :is(.requester-header, .cc-header) {
    text-align: left;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact.grid > :is(.requester, .cc) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
    min-width: 0;
    font-size: 0;
    line-height: 0;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact.grid > :is(.requester, .cc) > * {
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown.customer {
    margin: 0;
    box-shadow: none;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown.customer label {
    min-height: 24px !important;
    padding: 0 !important;
    box-shadow: none;
}
body.cust-help .ticket:not(.ticket--article) .block--head .contact .dropdown.customer label .icon-person {
    display: none;
}
body.cust-help .ticket:not(.ticket--article) .block--head .btn-action {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
}
@media (hover: hover) {
    body.cust-help .ticket:not(.ticket--article) .block--head .btn-action:hover {
        border-color: #8E97B3;
        background: #F4F8FB;
    }
}
/* RA, curso e turma: três linhas de rótulo e valor, 14/24. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > div:not([class]) {
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block .custom-field-title {
    margin-right: 4px;
    color: #5A668C;
    font-weight: 400;
}
/* A mensagem, separada dos dados por um fio. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--description {
    margin-top: 24px;
    padding-top: 23px;
    border-top: 1px solid #E3E7F0;
}
/* "Adicionar resposta": o título do cartão de resposta, 20/32. */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .text-bold {
    margin: 0 0 24px;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
}
body.cust-help .form--reply .form-group {
    max-width: 720px;
    margin: 0 0 24px;
}
body.cust-help .form--reply .form-group > .label,
body.cust-help .form--reply .param > .label {
    display: flex;
    margin: 0 0 8px;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
body.cust-help .form--reply .param {
    max-width: 720px;
    margin: 0;
}
body.cust-help .form--reply .form__submit {
    align-items: flex-start;
    margin: 32px 0 0;
}
body.cust-help .form--reply .form__submit .btn-full {
    min-width: 240px;
    height: 48px !important;              /* a app.min.css força 32 até 900px */
    margin: 0;
    padding: 0 24px;
    border: 1px solid #0059FB;
    border-radius: 6px;
    background: #0059FB;
    color: #FFFFFF;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .form--reply .form__submit .btn-full:hover {
        border-color: #0047C9;
        background: #0047C9;
        color: #FFFFFF;
    }
}
body.cust-help .form--reply .form__submit .btn-full:focus-visible {
    border-color: #0047C9;
    background: #0047C9;
}

/* Os detalhes: um cartão de 320 que acompanha a rolagem. No topo, o título
   e o Recarregar como botão de ícone (o texto fica para o leitor de tela).
   Depois o estado do chamado numa caixa clara, com o "Marcar como
   resolvido" embaixo dele; o resto em pares de rótulo pequeno sobre o
   valor, para nada quebrar em duas linhas na coluna estreita. */
body.cust-help .ticket:not(.ticket--article) .ticket__params {
    position: sticky;
    top: 24px;
    flex: 0 0 320px;
    width: 320px;
    margin: 0;
}
body.cust-help .ticket:not(.ticket--article) .ticket__params .params--block {
    margin: 0;
    padding: 23px;                        /* o botão do topo alinha com a caixa do estado */
    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);
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #102770;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > span {
    display: block;                       /* o HESK o esconde no celular */
    flex: 1 1 auto;
    min-width: 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link,
body.cust-help .ticket:not(.ticket--article) .params--block .btn-toggler {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    text-decoration: none !important;     /* a .link sublinha com !important */
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link {
    display: inline-flex;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link .ml-1 {
    position: absolute;                   /* fora da vista, não do leitor de tela */
    width: 1px;
    height: 1px;
    margin: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (hover: hover) {
    body.cust-help .ticket:not(.ticket--article) .params--block .accordion-title > .btn.link:hover,
    body.cust-help .ticket:not(.ticket--article) .params--block .btn-toggler:hover {
        border-color: #0059FB;
        background: #FFFFFF;
        color: #0059FB;
    }
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-body {
    display: flex;
    flex-direction: column;
    padding: 8px 0 0;
}
/* [3.7] O 3.7 escreve a Lato nas linhas dos detalhes (.ticket__params
   .params--block .row), com peso maior que o ".wrapper *" da base. */
body.cust-help .ticket__params .params--block .row {
    font-family: inherit;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-body .row {
    display: block;
    margin: 0 !important;                 /* um deles vem com margin-bottom em linha */
    padding: 8px 0 7px;
    border-bottom: 1px solid #EEF1F7;
}
body.cust-help .ticket:not(.ticket--article) .params--block .accordion-body .row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .title {
    width: auto;                          /* o HESK fixa uma coluna estreita */
    max-width: none;
    margin: 0;
    color: #5A668C;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value {
    display: block;
    margin: 0;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
}
/* O estado (a única linha com um span de classe no valor) e o "Marcar
   como resolvido" logo depois dele sobem para o topo e viram uma caixa só. */
/* Rótulo e chip numa linha só (Marcelo, 23/10). */
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]) {
    order: -2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: #F4F8FB;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]):has(+ .row > .value.center) {
    margin-bottom: 0 !important;
    border-radius: 8px 8px 0 0;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]) > .title {
    font-size: .875rem;
    line-height: 1.5rem;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value:not(.priority) > span[class]) > .value {
    flex: none;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class] {
    display: inline-block;
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    background: #EAF1FF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700;
}
/* Cor do chip por estado do HESK (a classe do span). open e inprogress
   ficam no azul acima; só fundo e letra mudam, o formato é o mesmo. */
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].resolved {
    background: #E3F5EA;
    color: #0B6B35;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].waitingreply,
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].replied {
    background: #FFF3D6;
    color: #7A4B00;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row .value > span[class].onhold {
    background: #EEF1F7;
    color: #3A4468;
}
/* "[Marcar como resolvido]": os colchetes são texto solto e somem com o
   font-size 0; o link vira o botão secundário da caixa do estado. */
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value.center) {
    order: -1;
    margin: 0 0 8px !important;
    padding: 0 16px 16px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: #F4F8FB;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row:has(> .value.center) > .title {
    display: none;
}
body.cust-help .ticket:not(.ticket--article) .params--block .row > .value.center {
    font-size: 0;
    line-height: 0;                       /* a linha dos colchetes ocupava 24 mesmo com letra 0 */
}
body.cust-help .ticket:not(.ticket--article) .params--block .row > .value.center > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #B5BBCF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none !important;
}
@media (hover: hover) {
    body.cust-help .ticket:not(.ticket--article) .params--block .row > .value.center > a:hover {
        border-color: #0059FB;
        color: #0059FB;
    }
}


/* --------------------------------------------------------------------------
   8. O INÍCIO — os dois atalhos são os cartões escuros do painel da
   Central (.ctl-cartao, estética aprovada em 20/10): degradê do azul da
   marca, grade de 24 apagada, luz difusa no alto, ícone branco no quadro
   de vidro, raio 10. Embaixo, o manual com as abas e a mesma lista.
   -------------------------------------------------------------------------- */
body.cust-help .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
body.cust-help .navlink {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: none;
    min-height: 192px;                    /* 24 + ícone 48 + 24 + nome 24 + frase 48 + 24 */
    margin: 0;
    padding: 24px;
    border-radius: 10px;
    background-color: #0047C9;
    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%),
        linear-gradient(160deg, #1B6BFF 0%, #0047C9 55%, #102770 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;
}
body.cust-help .navlink:hover {
    background-color: #0047C9;
    color: #FFFFFF;
}
/* "Visualizar chamados existentes" num azul-oceano, para os dois atalhos
   não parecerem um só (Marcelo, 23/10). Branco no ponto mais claro: 5,9:1.
   Pelo ícone, não pelo href: a cópia pública troca o ticket.php de lugar. */
body.cust-help .navlink:has(.icon-document),
body.cust-help .navlink:has(.icon-document):hover {
    background-color: #075985;
    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%),
        linear-gradient(160deg, #0369A1 0%, #075985 55%, #0C3B66 100%);
}
body.cust-help .navlink .icon-in-circle {
    width: 48px;
    height: 48px;
    margin: 0;
    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);
}
body.cust-help .navlink:hover > .icon-in-circle {
    background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%), rgba(255, 255, 255, .10);
}
body.cust-help .navlink .icon-in-circle .icon {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
}
body.cust-help .navlink .navlink__title {
    margin: 24px 0 0;
    color: #FFFFFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
body.cust-help .navlink .navlink__descr {
    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. */
body.cust-help .navlink::after {
    content: "";
    position: absolute;
    top: 40px;                            /* centro do quadro do ícone (24 + 24) menos meia seta */
    right: 24px;
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, .72);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.cust-help .navlink:focus-visible {
    outline: 2px solid #0059FB;
    outline-offset: 2px;
}
@media (hover: hover) {
    body.cust-help .navlink: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);
    }
    body.cust-help .navlink:hover::after {
        background-color: #FFFFFF;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .navlink {
        transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
    }
    body.cust-help .navlink:hover {
        transform: translateY(-4px);
    }
}

/* O manual no Início: o título vira subtítulo da Central e as duas abas
   viram abas de texto, com o traço azul embaixo da que está aberta. */
body.cust-help .article__heading:not(.article__heading--form) {
    margin: 0 0 16px;
    color: #102770;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: left;
}
body.cust-help .article__heading:not(.article__heading--form) a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: #102770;
}
body.cust-help .article__heading:not(.article__heading--form) a:hover {
    color: #0059FB;
    text-decoration: underline;
}
body.cust-help .article__heading:not(.article__heading--form) .icon-in-circle {
    display: none;
}
body.cust-help .article__heading a .icon-in-circle + span {
    margin: 0;
}
body.cust-help .tabbed__head {
    justify-content: flex-start;
    margin: 0 0 24px;
    border-bottom: 1px solid #D5D8E2;
}
body.cust-help .tabbed__head .tabbed__head_tabs {
    align-items: stretch;
    gap: 24px;
}
/* As abas são <li> com clique do app.min.js: não recebem foco pelo
   teclado (é do HTML do HESK; fica dito no relato). */
body.cust-help .tabbed__head .tabbed__head_tabs li {
    min-width: 0;
    min-height: 40px;
    margin: 0 0 -1px;
    padding: 8px 0 6px;
    border-bottom: 2px solid transparent;
    background: none;
    color: #5A668C;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}
body.cust-help .tabbed__head .tabbed__head_tabs li:not(.current):hover {
    border-bottom-color: #B5BBCF;
    background: none;
    color: #102770;
}
body.cust-help .tabbed__head .tabbed__head_tabs li.current {
    border-bottom-color: #0059FB;
    background: none;
    color: #102770;
    box-shadow: none;
}
body.cust-help .article__footer {
    align-items: flex-start;
    margin: 24px 0 0;
}
/* "Ver todo o manual do aluno": botão secundário (.ctl-botao-sec), 40.
   A app.min.css força 32 até 900px com !important. 23 dos lados, 24 com
   o fio, como o "Trocar o tipo de curso" da escolha de assunto (seção 7). */
body.cust-help .article__footer .btn--blue-border {
    height: 40px !important;
    padding: 0 23px;
    border: 1px solid #D5D8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #102770;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
}
@media (hover: hover) {
    body.cust-help .article__footer .btn--blue-border:hover {
        border-color: #0059FB;
        color: #0059FB;
    }
}


/* --------------------------------------------------------------------------
   9. O RODAPÉ — "Powered by HESK" discreto, centrado, sem sumir: a licença
   gratuita exige. A app.min.css desta instalação esconde o rodapé
   (display: none); aqui ele volta.
   -------------------------------------------------------------------------- */
body.cust-help .footer {
    display: block;
    margin: 0;
    padding: 48px 16px 32px;
    color: #5A668C;                       /* o meta #6B7594 dava 4,3:1 no fundo #F4F8FB, abaixo dos 4,5 do AA em 12px (checkup de 23/10) */
    font-size: .75rem;
    line-height: 1rem;
    text-align: center;
}
/* A .footer a sublinha com !important na app.min.css: fica o sublinhado
   (é link); a cor muda pelo escopo. O alvo cresce para 24 (40 no celular,
   seção 10).
   [3.7] No 3.7 o HESK escreve style="display:inline !important" no <a> (e
   no <footer>, no <p> e no <span>) do rodapé da licença. Estilo em linha
   com !important vence qualquer folha: inline-flex e min-height não
   valem. O alvo cresce pelo padding vertical, que no elemento em linha
   aumenta a caixa de clique (16 da linha + 4 + 4 = 24) sem mexer na
   altura da linha: nada se desloca. Vale igual no 3.4.3, onde o <a> é em
   linha sem o estilo. A cor e o hover continuam valendo. */
body.cust-help .footer a {
    padding-block: 4px;
    color: #5A668C;
}
body.cust-help .footer a:hover {
    color: #102770;
}


/* --------------------------------------------------------------------------
   10. O CELULAR (até 768) — laterais de 16, mesa de 24, alvos de 40, nada
   mais largo que a tela.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {          /* o mesmo corte da app.min.css, para o artigo não sair diferente em 768 */
    body.cust-help .main {
        --lado: 16px;
    }
    body.cust-help .main__content > .contr > * {
        margin-top: 32px;
    }
    body.cust-help .main__content > .contr > article[style] {
        margin-top: 32px !important;
    }
    body.cust-help .main::before {
        background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    }

    /* A mesa: 32 em cima e embaixo; título 22/32. */
    body.cust-help .breadcrumbs {
        padding-top: 32px;
    }
    body.cust-help .help-search,
    body.cust-help .select__title,
    body.cust-help .article__heading--form,
    body.cust-help .main__content > .contr > .article-heading-tip {
        padding-bottom: 32px;
    }
    body.cust-help .search__title,
    body.cust-help .content .kb--folder {
        margin-bottom: 16px;
    }
    body.cust-help .main__content > .contr > .article-heading-tip {
        margin-top: 8px;
    }
    body.cust-help .article__heading--form:has(+ .article-heading-tip) {
        padding-bottom: 0;
    }
    body.cust-help .search__title,
    body.cust-help .select__title,
    body.cust-help .article__heading--form,
    body.cust-help .kb--folder {
        min-height: 40px;
        font-size: 1.375rem;
        line-height: 2rem;
        letter-spacing: -.01em;
    }
    body.cust-help .content .block__head .kb--folder {
        font-size: 1.375rem !important;
    }
    body.cust-help .article__heading--form .icon-in-circle,
    body.cust-help .kb--folder > .icon-folder {
        width: 40px;
        height: 40px;
    }
    body.cust-help .kb--folder > .icon-folder {
        padding: 10px;
    }
    /* Migalhas: cada link com 40 de alvo; as linhas da trilha ficam a 40
       uma da outra, sem sobrepor os alvos. Os 8 de baixo somam com os 8
       de folga do alvo: 16 de vista até o título. */
    body.cust-help .breadcrumbs__inner {
        margin-bottom: 8px;
    }
    body.cust-help .breadcrumbs__inner a,
    body.cust-help .breadcrumbs__inner .last {
        min-height: 40px;
    }
    body.cust-help .breadcrumbs__inner .last {
        display: flex;
        align-items: center;
    }
    /* Na Categoria, no Artigo e nas duas telas do chamado o último item
       repete o título do que vem logo embaixo: no celular sai da trilha
       (com a seta dele), que cabe numa linha só (Marcelo, 23/10).
       [3.7-hotfix 2026-10-25] Do .notice-flash, só o do aviso verde
       (chamado enviado): no erro do formulário a trilha mantém o assunto. */
    body.cust-help .main:has(.kb--folder, .ticket--article, .ticket__params, .notice-flash > .notification.green) .breadcrumbs__inner .last,
    body.cust-help .main:has(.kb--folder, .ticket--article, .ticket__params, .notice-flash > .notification.green) .breadcrumbs__inner .icon:has(+ .last) {
        display: none;
    }

    /* Busca: o botão continua ao lado do campo. */
    body.cust-help .help-search #search-button {
        padding: 0 16px;
    }

    /* Listas: uma coluna, cartão com 16 de folga. No celular o título vai
       a 3 linhas: os seis "Organização Acadêmica e Estrutura do Curso
       Técnico em …" só se distinguem pelo nome do curso, que é o fim.
       16 + 48 + 8 + 48 + 16 = 136; com o rótulo de categoria, 160. */
    body.cust-help .preview {
        min-height: 136px;
        padding: 15px 47px 15px 15px;
    }
    body.cust-help .preview:has(.preview__text > p:not(.navlink__descr)) {
        min-height: 160px;
    }
    body.cust-help .preview .preview__title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    body.cust-help .preview::after {
        top: 20px;
        right: 16px;
    }
    body.cust-help .topics {
        padding: 15px 15px 0;
    }
    body.cust-help .topics__block {
        width: 100%;
    }
    body.cust-help .topics__list a,
    body.cust-help .topics__title .title-link {
        min-height: 40px;
        padding: 8px 0;                   /* 40 numa linha, 64 em duas: o vão entre textos fica 16 mesmo quando o título quebra */
    }

    /* Artigo: cartão de 16, h1 24/32, relacionados embaixo. */
    body.cust-help .ticket--article {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }
    body.cust-help .ticket--article .ticket__body_block {
        padding: 23px 15px;
    }
    body.cust-help .ticket--article .ticket__body_block h1 {
        margin-bottom: 16px;
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: -.01em;
    }
    body.cust-help .block--description h2 {
        font-size: 1.25rem;
        line-height: 2rem;
    }
    body.cust-help .ticket--article .ticket__params {
        width: 100%;
        margin: 0;
    }
    body.cust-help .ticket--article .ticket__params .params--block {
        margin: 0;
    }
    body.cust-help .ticket__block-footer .link {
        height: 40px;
    }
    body.cust-help .ticket__block-footer > span:first-child {
        flex: 1 0 100%;
    }

    /* Formulário: cartão de 16, Curso em uma coluna, Turma cinco por linha,
       botão de enviar na largura toda. */
    body.cust-help .form-submit-ticket,
    body.cust-help .main__content > .contr > form:not(.form) {
        padding: 23px 15px;
    }
    body.cust-help .form-submit-ticket .form-group:has(> .radio-custom) {
        grid-template-columns: minmax(0, 1fr);
    }
    body.cust-help .form-submit-ticket .form-group:has(> .radio-custom [name="custom1"]) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    body.cust-help .form-submit-ticket .radio-custom [name="custom1"] + label {
        width: auto;
    }
    body.cust-help .form-submit-ticket .alert__inner {
        padding: 16px;
    }
    body.cust-help .form-footer .btn,
    body.cust-help .form-footer .btn-full {
        width: 100%;
        min-width: 0;
    }
    body.cust-help .form-footer {
        align-items: stretch;
    }
    body.cust-help .param--attach .fileinput-button {
        flex: 1 0 100%;                   /* largura cheia, na borda dos campos */
    }
    /* O Fechar do balão dos limites: alvo de 40, o topo segue em 24. */
    body.cust-help .estudar-limites__fechar {
        width: 40px;
        height: 40px;
        margin: -8px -12px -8px 0;
    }
    body.cust-help .notification {
        padding: 15px;
    }
    /* Escolha de assunto: os cartões em lista, como os atalhos da Central
       no celular. 56 de altura (7 + 40 + 7 + os fios), o quadro do ícone
       em 40 com o desenho de 20, 8 entre um cartão e outro; o nome de duas
       linhas leva a 64. Com o vão de 8, o contorno do foco no tipo lembrado
       fica a 6 do cartão, para não pisar no vizinho. */
    body.cust-help .estudar-assunto-lista {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    body.cust-help .estudar-assunto-cartao {
        min-height: 56px;
        padding: 7px 15px;
    }
    body.cust-help .estudar-assunto-cartao .estudar-assunto-icone {
        width: 40px;
        height: 40px;
    }
    body.cust-help .estudar-assunto-cartao.is-escolhida:focus-visible {
        outline-offset: 6px;
    }
    /* A faixa do passo 2 numa linha (40, e não 80): o botão diz só
       "Trocar", e o " o tipo de curso" fica para o leitor de tela, como o
       .estudar-so-leitor da seção 7. Em 375 cabem Técnicos, Qualifica SP e
       Pós; "Qualificação Profissional" ainda desce o botão (8 + 40). */
    body.cust-help .estudar-assunto-trocar-resto {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    /* O passo 1 fica no cartão do tipo do celular da Central: duas
       colunas com 16 de vão, 208 de altura, padding de 16, quadro de 80
       (raio 10) com desenho de 40 e a marca SP de 56, o nome 16 abaixo
       dele com as duas linhas reservadas (48, encostado embaixo): os
       quadros ficam na mesma altura nos quatro. O vão de 16 deixa o foco
       do tipo lembrado no afastamento de 7 da seção 7. */
    body.cust-help .estudar-assunto-lista--tipos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao {
        min-height: 208px;
        padding: 16px;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone {
        width: 80px;
        height: 80px;
        border-radius: 10px;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone::before {
        width: 40px;
        height: 40px;
    }
    body.cust-help .estudar-assunto-lista--tipos [data-tipo="qualificasp"] .estudar-assunto-icone {
        background-size: 56px auto;
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-nome {
        display: flex;
        align-items: flex-end;
        min-height: 48px;
        margin-top: 16px;
    }
    /* Em 375 o cartão tem 164 e o nome, 132: "Pós‑graduação" em 18 800
       mede 131 na Segoe UI e passa disso no iPhone. Abaixo de 360 de
       lista, o nome desce a 16 (116). */
    @container estudar-assunto (max-width: 359.98px) {
        body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-nome {
            font-size: 1rem;
        }
    }
    /* Em 320 o nome teria 104, e nem em 16 a palavra cabe: uma coluna,
       com o cartão de 152 (16 + 80 + 16 + 24 + 16), o nome de volta a 18
       e numa linha só (256 de lugar). */
    @container estudar-assunto (max-width: 335.98px) {
        body.cust-help .estudar-assunto-lista--tipos {
            grid-template-columns: minmax(0, 1fr);
        }
        body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao {
            min-height: 152px;
        }
        body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-nome {
            min-height: 0;
            font-size: 1.125rem;
        }
    }
    /* Chamado enviado: mesa de 32 (8 + 24), cartão a 24, botão cheio. */
    body.cust-help .notice-flash > .notification.green {
        margin-top: 24px;
        padding: 23px;
    }
    body.cust-help .notice-flash > .notification.green::after {
        top: 35px;
        left: 35px;
    }
    body.cust-help .notice-flash > .notification.green > p:first-child {
        font-size: 1.25rem;
    }
    body.cust-help .notice-flash > .notification.green .btn-full {
        width: 100%;
        min-width: 0;
        margin-top: 24px;
    }
    /* Ver chamado: uma coluna. Os detalhes ficam em cima e fechados, como o
       HESK quer, com o título à mostra e os dois botões de 40 (recarregar e
       abrir). Aberto pelo botão, o jQuery põe display: block em linha: a
       caixa do estado fica na ordem do HTML, logo depois do número. */
    body.cust-help .ticket:not(.ticket--article) {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__params {
        position: static;
        flex: none;
        width: 100%;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__body_block {
        padding: 23px;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__params .params--block {
        padding: 23px;
    }
    body.cust-help .ticket:not(.ticket--article) .params--block.collapsed-on-xs .accordion-body {
        display: none;
    }
    /* Aberto pelo botão, o slideToggle do jQuery grava display: block em
       linha e a ordem (estado e ação no topo) se perde; peso igual devolve
       a coluna flex. Fechado, ele grava display: none e isto não vale. */
    body.cust-help .ticket:not(.ticket--article) .params--block.collapsed-on-xs .accordion-body[style*="display: block"] {
        display: flex !important;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head .contact {
        flex: none;
        white-space: nowrap;
    }
    /* [3.7-hotfix 2026-10-25] Nas respostas o .contact não é .grid: é
       "Respondido por <b>nome</b> » <time>" solto num flex. Com o nowrap
       de cima ele não quebrava e alargava a tela (490 a 375). Ele e o
       .d-flex que o abraça encolhem e quebram; o botão Imprimir fica na
       ponta. O "De:" da mensagem original (.contact.grid) não muda. */
    body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head > .d-flex {
        min-width: 0;
        flex: 1 1 auto;
    }
    body.cust-help .ticket:not(.ticket--article) .ticket__body_block > .block--head .contact:not(.grid) {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        white-space: normal;
    }
    body.cust-help .form--reply .form__submit {
        align-items: stretch;
    }
    body.cust-help .form--reply .form__submit .btn-full {
        width: 100%;
        min-width: 0;
    }

    /* Início: os atalhos empilhados e em linha, para não tomarem a primeira
       tela. Ícone num quadro de 40 à esquerda, nome e frase à direita, seta
       no meio da altura. 96 de altura: o texto (24 + duas linhas de 24) fica
       centrado; se quebrar mais, o cartão cresce, e os dois crescem juntos.
       O vão do ícone ao texto é 12 (vão apertado, como no cartão compacto da
       Central), para "Visualizar chamados existentes" caber numa linha em 375. */
    body.cust-help .nav {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
    }
    body.cust-help .navlink {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 96px;
        padding: 8px 40px 8px 16px;       /* 40 à direita: seta de 16 a 16 da borda, mais 8 */
    }
    body.cust-help .navlink .icon-in-circle {
        flex: none;
        width: 40px;
        height: 40px;
    }
    body.cust-help .navlink > div:not(.icon-in-circle) {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.cust-help .navlink .navlink__title {
        margin: 0;
        font-size: 1rem;
    }
    body.cust-help .navlink::after {
        top: calc(50% - 8px);
        right: 16px;
    }
    body.cust-help .tabbed__head .tabbed__head_tabs {
        gap: 16px;
    }

    /* Rodapé: cada link com 40 (16 da linha + 12 + 12), pelo padding
       vertical do elemento em linha (seção 9): a linha não cresce. Na
       largura, 4 de cada lado com a margem de −4: o "SysAid" do 3.4.3 (35
       de palavra) chega a 43, e o texto do rodapé não anda nem 1px. */
    body.cust-help .footer {
        padding: 40px 16px 24px;
    }
    body.cust-help .footer a {
        padding-block: 12px;
        padding-inline: 4px;
        margin-inline: -4px;
    }
    /* O "Voltar" da categoria vazia (seção 6, o aviso azul): 40 × 40, e a
       linha do aviso fica em 24 (a margem de −8 em cima e embaixo tira da
       conta da linha o que a caixa cresceu). */
    body.cust-help .notification.blue > a.link {
        min-width: 40px;
        min-height: 40px;
        margin-block: -8px;
    }
    body.cust-help .article__heading:not(.article__heading--form) a {
        min-height: 40px;
    }
}


/* --------------------------------------------------------------------------
   11. O MOVIMENTO — o da Central (central.css, "o movimento"): cor, borda e
   sombra trocam em 150ms; o que se aperta cede 3%, o que é cartão ou opção
   cede 1% (checkup de 23/10, revisão emil). A app.min.css anima "all" em
   250ms no .btn, no seletor e na área de texto: até o anel de foco entrava
   devagar. Aqui fica só o que muda.
   As curvas são as duas da Central: a de entrada (cubic-bezier(.23, 1,
   .32, 1), o --ctl-ease: anda quase tudo no primeiro terço e assenta), para
   o que entra, sai ou é apertado; e a de subida (cubic-bezier(.2, .8, .2,
   1)), para o hover que levanta cartão. O voo do ícone usa a do voo da
   Central (cubic-bezier(.32, .72, 0, 1)). Cor e opacidade, em ease.
   O caminho do aluno (25/10/2026, pedido do Marcelo): a troca de passo da
   escolha de assunto, a entrada da escolha, do formulário e do chamado
   enviado, o marcado do curso e da turma, o "Enviando…" e o balanço do
   campo com erro (este, no estudar.js). Tudo em transform e opacity (o
   check do chamado enviado, em clip-path), sem mexer no layout.
   -------------------------------------------------------------------------- */
/* O aperto: 160ms na curva de entrada (antes, 120ms no ease-out do
   navegador, fraco demais: o aperto parecia atrasado). A curva chega a 80%
   nos primeiros 40ms, e o soltar assenta macio. */
body.cust-help .btn,
body.cust-help .param--attach .dropzone .dz-button,
body.cust-help .estudar-assunto-trocar {
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
/* Curso e turma: o fio troca em 150ms (o hover); o marcado, em 200ms, com
   o texto, a sombra e as cores do degradê juntos (seção 6, "O MARCADO
   ANDA"), para o branco do texto não chegar antes do fundo escuro. */
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label {
    transition: border-color 150ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease,
        --estudar-fundo-a 200ms ease, --estudar-fundo-b 200ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label::before {
    transition: box-shadow 200ms ease, --estudar-quadro-a 200ms ease, --estudar-quadro-b 200ms ease,
        --estudar-quadro-luz 200ms ease, --estudar-vidro-a 200ms ease, --estudar-vidro-b 200ms ease;
}
/* O cartão de assunto (passo 2) sobe os 2 dele na curva do tipo (passo 1,
   logo abaixo), em 160ms: a subida é menor, o tempo também. */
body.cust-help .estudar-assunto-cartao {
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1);
}
/* A seta do cartão de assunto acende junto com o fio. */
body.cust-help .estudar-assunto-cartao::after {
    transition: background-color 150ms ease;
}
/* O cartão do tipo (passo 1) sobe como o do portão da Central: 200ms na
   curva dela, e o quadro do ícone em 300ms. */
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao {
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease;
}
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-icone {
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}
body.cust-help .selectize-control .selectize-input,
body.cust-help .form textarea.form-control {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.cust-help .btn:active:not(:disabled),
body.cust-help .param--attach .dropzone .dz-button:active,
body.cust-help .estudar-assunto-trocar:active {
    transform: scale(.97);
}
body.cust-help .form-submit-ticket .radio-custom [type=radio] + label:active,
body.cust-help .preview:active,
body.cust-help .estudar-assunto-cartao:active,
body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:active {
    transform: scale(.99);
}
/* A turma é um quadrado de 48: 1% nele é meio pixel, e o aperto não se
   via. Cede 5% (2 de cada lado), o tanto de um botão pequeno. */
body.cust-help .form-submit-ticket .radio-custom [name="custom1"] + label:active {
    transform: scale(.95);
}
/* O cartão apertado sob o mouse cede sem perder o que subiu: 2 no assunto,
   4 no tipo. Os dois passos respondem igual ao aperto. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.cust-help .estudar-assunto-cartao:hover:active {
        transform: translateY(-2px) scale(.99);
    }
    body.cust-help .estudar-assunto-lista--tipos .estudar-assunto-cartao:hover:active {
        transform: translateY(-4px) scale(.99);
    }
}

/* A TROCA DE PASSO da escolha de assunto (View Transitions; estudar.js,
   comTransicao), a do portão da Central (central.css, "a troca de etapa").
   O estudar.js põe data-estudar-vt no <html> ("frente" ou "tras") só
   durante a troca, e dá nome a três coisas: o palco (a .estudar-assunto),
   o título e, indo ao passo 2, o quadro do ícone do tipo (o voo). A página
   não funde (root parado). O palco velho sai para o lado em 120ms, com
   desfoque de 4, na curva de entrada (rápido: é o que o aluno já deixou);
   o novo não tem fusão, e a escada dos cartões, que o estudar.js anima nele,
   aparece na foto viva. O título velho sai 8px em 120ms e o novo chega
   8px do outro lado em 200ms, 30ms depois. O voo leva 280ms na curva do voo
   da Central, por cima do palco. Tudo assenta em 290ms (a escada: três
   degraus de 30ms e a entrada de 200ms).
   Os pseudo-elementos da troca moram na raiz do documento, fora do body:
   por isso começam no <html> que tem o body.cust-help como filho, e não no
   body.cust-help (tools/suporte/escopo-css.mjs aceita só este caso). */
html:has(> body.cust-help)[data-estudar-vt]::view-transition-old(root),
html:has(> body.cust-help)[data-estudar-vt]::view-transition-new(root),
html:has(> body.cust-help)[data-estudar-vt]::view-transition-group(estudar-palco),
html:has(> body.cust-help)[data-estudar-vt]::view-transition-new(estudar-palco),
html:has(> body.cust-help)[data-estudar-vt]::view-transition-group(estudar-titulo) {
    animation: none;
}
html:has(> body.cust-help)[data-estudar-vt]::view-transition-old(estudar-palco) {
    animation: estudar-sai 120ms cubic-bezier(.23, 1, .32, 1) both;
}
html:has(> body.cust-help)[data-estudar-vt="tras"]::view-transition-old(estudar-palco) {
    animation-name: estudar-sai-tras;     /* voltando, o velho sai pela direita */
}
/* Página rolada na troca (o foco levou o título à vista): o palco velho e
   o novo não ficam no mesmo lugar da tela, e o velho saltaria. Ele some, e
   o novo entra em escada; o voo continua. */
html:has(> body.cust-help)[data-estudar-vt-topo]::view-transition-old(estudar-palco) {
    display: none;
}
html:has(> body.cust-help)[data-estudar-vt]::view-transition-old(estudar-titulo) {
    animation: estudar-sai-titulo 120ms cubic-bezier(.23, 1, .32, 1) both;
}
html:has(> body.cust-help)[data-estudar-vt]::view-transition-new(estudar-titulo) {
    animation: estudar-entra-titulo 200ms cubic-bezier(.23, 1, .32, 1) 30ms both;
}
html:has(> body.cust-help)[data-estudar-vt="tras"]::view-transition-old(estudar-titulo) {
    animation-name: estudar-sai-titulo-tras;
}
html:has(> body.cust-help)[data-estudar-vt="tras"]::view-transition-new(estudar-titulo) {
    animation-name: estudar-entra-titulo-tras;
}
html:has(> body.cust-help)[data-estudar-vt]::view-transition-group(estudar-voo) {
    z-index: 1;                           /* por cima do palco, que some embaixo dele */
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
html:has(> body.cust-help)[data-estudar-vt]::view-transition-old(estudar-voo),
html:has(> body.cust-help)[data-estudar-vt]::view-transition-new(estudar-voo) {
    animation-duration: 280ms;
}
@keyframes estudar-sai {
    to { opacity: 0; transform: translateX(-24px); filter: blur(4px); }
}
@keyframes estudar-sai-tras {
    to { opacity: 0; transform: translateX(24px); filter: blur(4px); }
}
@keyframes estudar-sai-titulo {
    to { opacity: 0; transform: translateX(-8px); }
}
@keyframes estudar-sai-titulo-tras {
    to { opacity: 0; transform: translateX(8px); }
}
@keyframes estudar-entra-titulo {
    from { opacity: 0; transform: translateX(8px); }
}
@keyframes estudar-entra-titulo-tras {
    from { opacity: 0; transform: translateX(-8px); }
}

/* AS ENTRADAS DE PÁGINA. Formulário (o "Enviar um chamado", logo depois do
   cartão de assunto): o título e a dica dele na mesa, e o cartão do
   formulário 40ms depois, sobem 8px e acendem em 200ms, a entrada da
   Central. Chamado enviado (o momento que pede presença, e é raro): o
   cartão sobe 8px e cresce de 98% em 240ms; o selo cresce de 80% em
   280ms, 100ms depois, na curva com um passo além do ponto (o easeOutBack
   do easings.net, cubic-bezier(.34, 1.56, .64, 1): 2% de passagem, o
   "pronto" do selo); e o check se desenha da esquerda para a direita em
   220ms, depois que o selo chegou. Nada disso segura o clique: o botão
   "Ver seu chamado" responde desde o primeiro quadro. Só "backwards": o
   que acaba deixa o elemento sem animação nenhuma (um transform que
   ficasse preso no cartão viraria o contêiner dos fixed de dentro dele).
   Com menos movimento, não entra nada (a seção 12 também cala). */
@media (prefers-reduced-motion: no-preference) {
    body.cust-help .main__content .article__heading--form,
    body.cust-help .main__content .article-heading-tip {
        animation: estudar-entra 200ms cubic-bezier(.23, 1, .32, 1) backwards;
    }
    body.cust-help .form-submit-ticket {
        animation: estudar-entra 200ms cubic-bezier(.23, 1, .32, 1) 40ms backwards;
    }
    body.cust-help .notice-flash > .notification.green {
        animation: estudar-aviso 240ms cubic-bezier(.23, 1, .32, 1) backwards;
    }
    body.cust-help .notice-flash > .notification.green::before {
        animation: estudar-selo 280ms cubic-bezier(.34, 1.56, .64, 1) 100ms backwards;
    }
    body.cust-help .notice-flash > .notification.green::after {
        animation: estudar-risca 220ms cubic-bezier(.23, 1, .32, 1) 260ms backwards;
    }
}
@keyframes estudar-entra {
    from { opacity: 0; transform: translateY(8px); }
}
@keyframes estudar-aviso {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
}
@keyframes estudar-selo {
    from { opacity: 0; transform: scale(.8); }
}
@keyframes estudar-risca {
    from { clip-path: inset(0 100% 0 0); }
}


/* --------------------------------------------------------------------------
   12. SEM MOVIMENTO — quem pediu ao sistema menos movimento não vê
   transição nem a "onda" do clique do HESK. As transições do HESK estão em
   dezenas de seletores mais específicos que qualquer escopo daqui: o
   !important é a única forma de calar todas de uma vez.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cust-help *,
    body.cust-help *::before,
    body.cust-help *::after {
        transition: none !important;
        animation: none !important;
    }
    body.cust-help :active {
        transform: none !important;
    }
    /* O balão dos limites (seção 6) aparece parado, sem subir nem acender. */
    body.cust-help .estudar-limites {
        transition: none;
    }
    /* A troca de passo: o estudar.js nem a chama com menos movimento (troca
       na hora e acende os cartões só em opacidade, 150ms); se alguma vier,
       não anda. */
    html:has(> body.cust-help)::view-transition-group(*),
    html:has(> body.cust-help)::view-transition-old(*),
    html:has(> body.cust-help)::view-transition-new(*) {
        animation: none !important;
    }
}