/* ===========================================================================
   UNIFAAT — folha única de componentes
   Extraída dos PDFs aprovados (IDEIA_SITE_UNIFAAT, PAGINA_CURSO_UNIFAAT).

   Arquivo único, externo, cacheável. Nenhum CSS inline em documento (D8).
   As cores foram amostradas do PDF aprovado, não do site publicado.
   =========================================================================== */

:root {
    --navy:        #00365c;
    --navy-escuro: #002b4a;
    --azul:        #24699f;
    --azul-claro:  #266ca0;
    --cinza:       #f3f3f4;
    --cinza-borda: #d8dde2;
    --texto:       #1c2b39;
    --texto-claro: #566878;
    --branco:      #ffffff;

    /* Navy à esquerda, azul à direita: hero, metodologia, serviços, footer. */
    --grad-navy-azul: linear-gradient(90deg, var(--navy) 0%, var(--azul) 100%);
    /* Azul à esquerda, navy à direita: itens de "Como ingressar" e do FAQ. */
    --grad-azul-navy: linear-gradient(90deg, #21689e 0%, var(--navy) 100%);

    --raio:      12px;
    --raio-g:    18px;
    --raio-pill: 999px;

    --largura:   1200px;
    --gutter:    24px;

    --sombra:    0 2px 14px rgba(0, 40, 70, .10);
    --sombra-f:  0 6px 24px rgba(0, 40, 70, .16);

    --fonte: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- fonte ---
   Poppins, a família do PDF aprovado (Light 300, Regular 400, SemiBold 600,
   Bold 700). Auto-hospedada: mesma origem, sem requisição a terceiro, sem
   conexão com o Google. Só os subconjuntos latin e latin-ext — o site é
   pt-BR e o resto não é baixado.
   -------------------------------------------------------------------------- */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------- reset ---- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--branco);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; }

p { margin: 0 0 1em; }

ul { margin: 0 0 1em; padding-left: 1.2em; }

/* --------------------------------------------------------------- seção ---- */

.secao {
    padding: 64px 0;
    background: var(--branco);
}

.secao--clara { background: var(--cinza); }

.secao--azul {
    background: var(--grad-navy-azul);
    color: var(--branco);
}

.secao--azul a { color: var(--branco); }

.secao--compacta { padding: 40px 0; }

.secao__titulo {
    font-size: 2.25rem;
    color: var(--azul-claro);
    margin-bottom: .6em;
}

.secao__titulo--navy   { color: var(--navy); }
.secao__titulo--branco { color: var(--branco); }
.secao__titulo--centro { text-align: center; }

.secao__intro { max-width: 74ch; color: inherit; }

.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- grades --- */

.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--meio {
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

/*
 * .grid--par: duas colunas DESIGUAIS, texto na maior (rodada 18).
 *
 * A proporcao saiu da medicao do ar em 1920 px: 733 px de texto contra 582 px
 * de foto, que da 1,26:1. Arredondei para 1,25 — o decimo de diferenca nao se
 * ve, e 1,25 e um numero que quem mexer na folha depois entende.
 *
 * `align-items: start` para a coluna curta nao esticar ate a altura da outra:
 * duas fotos ao lado de um texto longo ficariam deformadas.
 */
.grid--par {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
}

.grid--par__fotos {
    display: grid;
    gap: 20px;
}

/* Sem foto declarada a coluna some, e o texto fica com a largura inteira.
   E a mesma solucao de `.menu__submenu:empty`, pelo mesmo motivo: o Renderer
   nao ganha condicional (regra 2). */
.grid--par__fotos:empty { display: none; }
.grid--par:has(.grid--par__fotos:empty) { grid-template-columns: minmax(0, 1fr); }

.grid--par__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 14 / 10;
    object-fit: cover;
    border-radius: var(--raio);
}

/* --------------------------------------------------------------- botões --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .72em 1.6em;
    border: 2px solid transparent;
    border-radius: var(--raio-pill);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
    background: var(--navy);
    color: var(--branco);
    border-color: var(--navy);
}

.btn--primary:hover { background: var(--navy-escuro); border-color: var(--navy-escuro); }

.btn--ghost {
    background: var(--azul);
    color: var(--branco);
    border-color: rgba(255, 255, 255, .55);
}

.btn--ghost:hover { background: var(--azul-claro); }

.btn--claro {
    background: var(--cinza);
    color: var(--navy);
    border-color: var(--cinza);
    border-radius: var(--raio);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.btn--claro:hover { background: var(--branco); }

/* Dentro de uma seção azul, .secao--azul a pintaria este botão de branco
   sobre fundo claro. Aqui a cor do botão prevalece. */
.secao--azul a.btn--claro { color: var(--navy); }

.btn--bloco {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: var(--grad-navy-azul);
    color: var(--branco);
    border-radius: var(--raio);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 1.05rem;
}

.btn__seta { font-weight: 700; }

/* ---------------------------------------------------------------- tags ---- */

.tag {
    display: inline-block;
    padding: .3em 1.1em;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--raio-pill);
    font-size: .9rem;
    line-height: 1.5;
}

.tag--escura {
    border-color: var(--cinza-borda);
    color: var(--navy);
}

.lista-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 1.2em;
    padding: 0;
}

/* --------------------------------------------------------------- cards ---- */

.card {
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 22px;
}

.card__titulo { font-size: 1.15rem; color: var(--navy); margin-bottom: .35em; }
.card__texto  { margin: 0; color: var(--texto-claro); }

/* card de curso — usado pelas dobras de origem curso */
.card--curso { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; }
.card--curso img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card--curso > :not(img) { padding-inline: 18px; }
.card--curso > :last-child { padding-bottom: 18px; }

/* card de salário — "Mercado de Trabalho" */
.card--salario {
    border-color: var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--branco);
}

.card--salario .cargo {
    display: block;
    color: var(--azul-claro);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .5em;
}

.card--salario .valor { font-size: 1.25rem; color: var(--texto); }

/* card de matéria — "O que você vai aprender".
   Alterna fundo azul e fundo branco, como no PDF. */
.card--materia {
    border-radius: var(--raio);
    padding: 26px;
    min-height: 210px;
}

.card--materia.is-azul {
    background: var(--grad-navy-azul);
    border-color: transparent;
    color: var(--branco);
}

.card--materia.is-azul .card__titulo,
.card--materia.is-azul .card__texto { color: var(--branco); }

.card--materia.is-branco {
    background: var(--branco);
    border: 1px solid var(--navy);
}

/* card de serviço — "Programas e Serviços", sobre fundo azul */
.card--servico {
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--raio);
    color: var(--branco);
    padding: 22px;
}

.card--servico .card__titulo,
.card--servico .card__texto { color: var(--branco); }

.card--servico .card__titulo { font-size: 1.3rem; }

/* card de notícia — usado pela home */
.card--noticia { padding: 0; overflow: hidden; }
.card--noticia img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card--noticia > :not(img) { padding-inline: 18px; }

/* card de coordenador */
.card--coordenador {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    border: 1px solid var(--navy);
    border-radius: var(--raio);
    padding: 22px;
    background: var(--branco);
}

.card--coordenador img {
    width: 150px;
    height: 170px;
    object-fit: cover;
    border-radius: var(--raio);
    background: var(--cinza);
}

.coordenador__cargo {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--texto);
    margin-top: 10px;
}

.coordenador__nome {
    font-size: 1.35rem;
    color: var(--navy);
    margin: 0 0 .4em;
}

.coordenador__bio { margin: 0; font-size: .95rem; color: var(--texto); }

.card--coordenador .btn { margin-top: 14px; }

/* --------------------------------------------------------------- número --- */

.numero {
    text-align: center;
}

.numero__valor {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--azul-claro);
    line-height: 1.1;
}

.numero__rotulo { display: block; color: var(--texto-claro); }

/* ------------------------------------------------------------- acordeão --- */

.acordeao { display: grid; gap: 14px; }

.acordeao__item {
    background: var(--grad-azul-navy);
    border-radius: var(--raio);
    color: var(--branco);
    overflow: hidden;
}

.acordeao__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

.acordeao__item > summary::-webkit-details-marker { display: none; }

.acordeao__item > summary::after {
    content: "\25be";
    font-size: 1.2em;
    line-height: 1;
    transition: transform .18s ease;
}

.acordeao__item[open] > summary::after { transform: rotate(180deg); }

.acordeao__corpo {
    padding: 0 26px 22px;
    color: rgba(255, 255, 255, .94);
}

.acordeao__corpo > :last-child { margin-bottom: 0; }

/* A contagem ao lado do rótulo do grupo: "MÓDULO I — Formação de Líderes  7".
   Discreta de propósito — informa sem competir com o título. */
.acordeao__conta {
    font-weight: 400;
    font-size: .85em;
    opacity: .75;
    margin-left: 6px;
}

/* -------------------------------------------------- metodologia unifaat --- */

.metodologia__titulo {
    font-size: 1.05rem;
    margin: 0 0 14px;
    letter-spacing: .01em;
}

.metodologia__fecho {
    font-weight: 600;
    margin-top: 18px;
}

.metodologia__vantagens {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 6px;
}

/* O "+" é do site publicado, e é marcador visual: fica no CSS e fora do
   texto, para não ser lido em voz alta item a item. */
.metodologia__vantagens li::before {
    content: "+ ";
    font-weight: 700;
    opacity: .85;
}

/* ---------------------------------------------------------- corpo docente - */

/* Rodada 5: a dobra de corpo docente da página de pós. Regras NOVAS, nenhuma
   existente alterada — a folha do site está aprovada e conferida contra o
   publicado, e o retrabalho de celular é frente própria, de outra rodada. */

.docentes__papel {
    font-size: 1.05rem;
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, .08);
}

.docentes__papel:first-of-type { margin-top: 8px; }

.docentes__conta {
    font-weight: 400;
    font-size: .85em;
    opacity: .6;
    margin-left: 6px;
}

.docentes__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

/* Duas colunas onde couber. A titulação é um parágrafo inteiro em muitos
   docentes, então a coluna precisa de largura mínima generosa. */
@media (min-width: 900px) {
    .docentes__lista { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
}

.docentes__pessoa { line-height: 1.5; }

.docentes__nome { display: block; }

.docentes__titulacao {
    display: block;
    font-size: .9rem;
    opacity: .8;
    margin-top: 2px;
}

/* ------------------------------------------------------- grade curricular - */

/* Duas colunas onde couber; uma no telefone. As disciplinas são linhas
   curtas, e uma coluna só desperdiçaria metade da tela em grade de 48 itens
   como a de Odontologia. */
.grade__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 32px;
}

.grade__item {
    break-inside: avoid;
    padding: 5px 0 5px 18px;
    position: relative;
    line-height: 1.45;
}

.grade__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

.grade__carga {
    opacity: .7;
    font-size: .85em;
}

@media (max-width: 720px) {
    .grade__lista { columns: 1; }
}

/* ------------------------------------------------------------ carrossel --- */

/* ---------------------------------------------------------- carrossel ---
 *
 * UM CARROSSEL, QUATRO USOS: hero da home, vitrine de cursos, galeria do curso
 * e depoimentos. Reescrito na rodada 9, e vale escrever o motivo inteiro.
 *
 * O QUE HAVIA AQUI ATÉ A RODADA 8 era um trilho com `overflow-x: auto` e
 * `scroll-snap`. O comentário antigo dizia, com orgulho, "a rolagem é do
 * navegador, nenhum JS é necessário" — e estava errado pelo motivo certo: sem
 * JS não havia carrossel nenhum, havia uma FAIXA QUE ROLA. No hero da home os
 * quatro banners apareciam emendados, com barra de rolagem à vista.
 *
 * O critério agora é AUSÊNCIA DE ROLAGEM, não ausência de barra. Esconder a
 * barra (`scrollbar-width: none`, `overflow: hidden` sobre conteúdo mais
 * largo) seria o mesmo defeito, invisível: o dedo continua arrastando e o foco
 * do teclado continua rolando a caixa para mostrar o filho focado.
 *
 * COMO ESTA VERSÃO GARANTE `scrollWidth === clientWidth`
 *
 * Os itens são agrupados em PÁGINAS pelo JavaScript, e as páginas ficam
 * EMPILHADAS numa célula de grade só (`grid-area: 1 / 1`). Toda página tem
 * exatamente a largura da janela; nenhuma sobra para o lado, em nenhum
 * momento. Dentro da página, cada item leva `flex: 1 1 0`, então N itens
 * sempre cabem em 100% sem cálculo de largura em lugar nenhum.
 *
 * A TROCA DESLIZA, E SÓ UMA PÁGINA SE MOVE POR VEZ (rodada 10).
 *
 * A rodada 9 usou esmaecimento com um motivo escrito: deslocar a página que
 * entra para `translateX(100%)` a colocaria fora da caixa e a caixa voltaria a
 * medir mais do que cabe nela. O motivo estava certo, mas incompleto — e a
 * parte que faltava decide o desenho desta versão:
 *
 *   Num deslizamento, o `scrollWidth` só cresce do lado para o qual a caixa
 *   ROLARIA. Medido no Chromium, caixa de 400 px:
 *
 *     filho em translateX(+100%), escrita da esquerda para a direita -> 800
 *     filho em translateX(-100%), escrita da esquerda para a direita -> 400
 *     filho em translateX(+100%), com `direction: rtl`               -> 400
 *     filho em translateX(-100%), com `direction: rtl`               -> 800
 *     os dois lados ocupados ao mesmo tempo, em qualquer direção     -> 800
 *
 * O lado "de graça" é sempre o oposto ao da rolagem, e ele é UM só. Logo, uma
 * faixa com as duas páginas se movendo juntas — uma saindo por um lado e outra
 * entrando pelo outro — ocupa os dois lados e estoura a caixa, sempre, em
 * qualquer arranjo. Não é questão de recorte: `overflow: clip`, `contain:
 * paint` e `clip-path` foram medidos e nenhum deles derruba o `scrollWidth`
 * do lado da rolagem (800 nos três).
 *
 * Então SÓ UMA PÁGINA SE MOVE, e ela sempre viaja pelo lado de graça — a
 * esquerda:
 *
 *   avançar: a página que sai desliza para a esquerda e DESCOBRE a que entra
 *   voltar:  a página que entra desliza da esquerda e COBRE a que sai
 *
 * Nos dois casos a que se move vai por cima, e o sentido do movimento é o do
 * gesto: para a esquerda ao avançar, para a direita ao voltar — inclusive na
 * volta do fim para o começo, que é gesto de avançar.
 *
 * `overflow-x: clip` na janela recorta a pintura da página que viaja para que
 * ela não apareça sobre a seta e sobre a margem da página. `clip` NÃO é
 * `hidden`: não é caixa de rolagem, `scrollLeft` não sai de zero (medido), e
 * não há nada para o dedo arrastar nem para o foco do teclado alcançar.
 * `overflow-y` fica `visible`, senão a sombra dos cartões seria decepada.
 *
 * SEM JAVASCRIPT a página não quebra: o trilho é `flex-wrap: wrap` e todos os
 * itens aparecem, um embaixo do outro, sem rolagem nenhuma. As setas ficam
 * escondidas até o JS assumir — botão que não faz nada é pior que botão
 * nenhum.
 *
 * Quantos itens por página é medida de APARÊNCIA, e por isso mora aqui, em
 * `--carrossel-col`: a grade resolve com `auto-fill` e o JS apenas lê quantas
 * colunas saíram. `100%` quer dizer um item por página.
 * ------------------------------------------------------------------------ */

.carrossel {
    /*
     * A LARGURA MÍNIMA DE UMA COLUNA — e, com ela, quantos itens cabem por
     * página. `100%` quer dizer um item por página.
     *
     * A conta é do navegador, via `auto-fill`: o JS lê o resultado em
     * `grid-template-columns` e não repete a fórmula. Uma verdade só.
     */
    --carrossel-col: 100%;
    --carrossel-vao: 20px;
    display: flex;
    /*
     * `wrap` não é detalhe: os indicadores e o contador são itens de largura
     * total com `order: 9`, e precisam CAIR PARA A LINHA DE BAIXO. Sem o wrap
     * eles disputam a mesma linha das setas e espremem a janela — na primeira
     * versão desta rodada a galeria ficou com 199 px de janela num container
     * de 1.152, e os depoimentos voltaram a rolar por dentro.
     */
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* SEM JS: tudo à vista, quebrando em linhas. Nenhuma rolagem. */
.carrossel__trilho {
    display: flex;
    flex-wrap: wrap;
    gap: var(--carrossel-vao);
    min-width: 0;
    flex: 1 1 auto;
}

/* COM JS: a janela vira uma célula de grade onde as páginas se empilham. */
.carrossel--ligado .carrossel__janela {
    display: grid;
    flex-wrap: nowrap;
    /*
     * RECORTE, NÃO ROLAGEM. `clip` não cria caixa de rolagem: `scrollLeft`
     * fica preso em zero, não há barra, não há arraste de dedo e o foco do
     * teclado não tem para onde rolar. É o oposto de `overflow: hidden`, que
     * esconde a barra e mantém a rolagem — medido: com `hidden`,
     * `scrollLeft = 9999` levou a caixa a 400; com `clip`, a zero.
     *
     * `overflow-y` continua `visible` de propósito: a janela da vitrine tem
     * cartões com sombra, e recortar os dois eixos decapitaria a sombra.
     */
    overflow-x: clip;
    overflow-y: visible;
}

/*
 * A PÁGINA É UMA GRADE `auto-fill`, e não uma linha flexível.
 *
 * Com flex, a última página — que quase sempre tem menos itens que as outras —
 * esticava o que sobrou para a largura inteira: a vitrine de 33 cursos terminava
 * com um cartão só ocupando 1.032 px, e a imagem dele, de proporção 16/10,
 * empurrava a janela para 1.081 px de altura. Como as páginas se empilham numa
 * célula só, TODAS ficavam com essa altura, e sobrava um vazio enorme entre as
 * pílulas e os botões.
 *
 * `auto-fill` mantém as colunas vazias: a última página fica com um cartão do
 * tamanho certo e três lacunas.
 */
.carrossel__pagina {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--carrossel-col), 1fr));
    gap: var(--carrossel-vao);
    align-items: stretch;
    min-width: 0;
    /*
     * EM REPOUSO TODA PÁGINA ESTÁ EM translateX(0) — a ativa à vista, as
     * outras invisíveis no mesmo lugar. Nenhuma sobra para lado nenhum, e por
     * isso a janela mede exatamente o que cabe nela quando nada se move.
     */
    transform: translateX(0);
    opacity: 0;
    visibility: hidden;
}

.carrossel__pagina > * { min-width: 0; }

.carrossel__pagina--ativa { opacity: 1; visibility: visible; }

/*
 * A PÁGINA QUE ESTÁ VIAJANDO. Fica por cima, fica à vista durante os 500 ms, e
 * é a única com transição: o que não se move não anima.
 *
 * 500 ms é o `speed` medido no carrossel do site publicado, na rodada 9.
 */
.carrossel__pagina--movendo {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: transform .5s ease;
}

/* O lado de graça, o único para onde alguém pode viajar sem estourar a caixa. */
.carrossel__pagina--esquerda { transform: translateX(-100%); }

/*
 * A PÁGINA QUE ESTÁ SENDO COBERTA, ao voltar: fica parada, à vista e por
 * baixo, até a outra terminar de chegar. Sem isto, a que sai desapareceria no
 * primeiro quadro e a que entra deslizaria sobre um buraco branco.
 */
.carrossel__pagina--sob {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

/* Quem pediu menos movimento não recebe nenhum: a página aparece, não desliza.
   A troca automática também não roda — isso é decidido no JavaScript. */
@media (prefers-reduced-motion: reduce) {
    .carrossel__pagina--movendo { transition: none; }
}

.carrossel__seta {
    /* Escondida até o JS ligar o carrossel: sem ele, não há para onde ir. */
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    /* 44 px é o mínimo de alvo de toque desde a rodada 6. O site publicado usa
       25x25 nas setas e 6x6 nos pontos; aqui isso não passa. */
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    color: var(--navy);
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}

.carrossel--ligado .carrossel__seta { display: inline-flex; }
.carrossel__seta[hidden] { display: none; }
.carrossel__seta:hover { background: rgba(0, 54, 92, .08); }
.carrossel--azul .carrossel__seta { color: var(--branco); }
.carrossel--azul .carrossel__seta:hover { background: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------- indicadores -- */

.carrossel__pontos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: 100%;
    order: 9;          /* abaixo da janela, atravessando a linha do flex */
}

.carrossel__pontos:empty { display: none; }

/*
 * O PONTO É PEQUENO, O ALVO NÃO É.
 *
 * A bolinha tem 10 px, como o desenho pede; o botão em volta tem 44x44 de
 * área de toque. Foi o mesmo raciocínio dos links do rodapé na rodada 6:
 * cresce a área, não a letra.
 */
.carrossel__ponto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.carrossel__ponto > span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cinza-borda);
    transition: background-color .2s ease, transform .2s ease;
}

.carrossel__ponto--ativo > span { background: var(--navy); transform: scale(1.3); }

/*
 * O contador, para quando há páginas demais para bolinhas.
 *
 * A vitrine tem 33 cursos e, no celular, 33 páginas. Uma fileira de 33 alvos
 * de 44 px ocuparia quatro linhas e não ajudaria ninguém a se localizar;
 * "4 de 33" ajuda, cabe numa linha e é lido por leitor de tela.
 */
.carrossel__conta {
    order: 9;
    width: 100%;
    margin: 4px 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--texto-claro);
}

.carrossel__conta:empty { display: none; }
.carrossel--azul .carrossel__conta { color: rgba(255, 255, 255, .85); }
.carrossel__ponto:hover > span  { background: var(--azul-claro); }
.carrossel--azul .carrossel__ponto > span { background: rgba(255, 255, 255, .45); }
.carrossel--azul .carrossel__ponto--ativo > span { background: var(--branco); }

/* --------------------------------------------------- os quatro usos ----- */

.carrossel--depoimentos { --carrossel-col: 100%; }
.carrossel--galeria     { --carrossel-col: 280px; }

.carrossel--galeria .carrossel__pagina > img,
.carrossel--galeria .carrossel__trilho > img {
    height: 230px;
    object-fit: cover;
    border: 2px solid var(--navy);
    border-radius: var(--raio-g);
}

/* Dentro da página, a foto preenche a coluna que a grade lhe deu. */
.carrossel--galeria .carrossel__pagina > img { width: 100%; }

/* Sem JS as imagens da galeria mantêm a largura fixa e quebram em linhas. */
.carrossel--galeria .carrossel__trilho > img { flex: 0 0 280px; width: 280px; }

/* ----------------------------------------------------------- depoimento --- */

.depoimento {
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
}

.depoimento__texto {
    font-size: 1.15rem;
    color: var(--texto);
    margin-bottom: 1.4em;
}

.depoimento__aspas { color: var(--navy); font-weight: 700; }

.depoimento__autor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
}

.depoimento__autor img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cinza);
}

.depoimento__nome  { display: block; font-weight: 700; color: var(--navy); }
.depoimento__papel { display: block; color: var(--azul-claro); font-weight: 700; }

/* --------------------------------------------------------------- topbar --- */

.topbar {
    background: var(--cinza);
    padding: 14px 0;
}

.topbar__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar__marca { display: flex; align-items: center; gap: 18px; }
.topbar__logo  { height: 46px; width: auto; }

.topbar__redes { display: flex; align-items: center; gap: 12px; }
.topbar__redes a { display: inline-flex; color: var(--navy); }

/* ----------------------------------------------------------------- menu --- */

.menu { background: var(--navy); }

.menu__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 34px;
    list-style: none;
    margin: 0;
    padding: 18px 0;
}

.menu__lista a {
    color: var(--branco);
    text-decoration: none;
    font-size: 1.05rem;
}

.menu__lista a:hover { text-decoration: underline; }

/*
 * O ITEM DE MENU QUE NÃO É LINK (rodada 12).
 *
 * "Serviços" apontava para /soae/, que a base nova não compila. O item não
 * sumiu porque ele segura um submenu de oito serviços, sete deles vivos em
 * domínio de terceiros — sumir levaria os oito junto. Virou rótulo.
 *
 * Fica igual aos vizinhos, menos o sublinhado do hover: o que não é link não
 * deve prometer que é. O submenu continua alcançável pelo teclado, porque
 * `:focus-within` no <li> abre quando o Tab chega a QUALQUER link de dentro —
 * o rótulo não precisa receber foco para isso funcionar.
 */
.menu__rotulo {
    color: var(--branco);
    font-size: 1.05rem;
}

/* ------------------------------------------------------------- submenu ---- */

/* Sem JavaScript: abre no hover e no foco pelo teclado (:focus-within), que é
   o que faz o submenu ser alcançável por quem navega com Tab. */

.menu__item { position: relative; }

.menu__submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background: var(--navy);
    border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    z-index: 40;

    /* Fechado por padrão. visibility (e não display) para que a transição
       exista e para que o leitor de tela não tropece num salto. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, visibility .14s ease;
}

/* Item sem submenu não emite <li> nenhum dentro do <ul>: some inteiro. */
.menu__submenu:empty { display: none; }

/*
 * O INDICADOR DE SUBMENU (rodada 18).
 *
 * Medido nos dois sites em 15/set/2026: no ar, cada um dos quatro itens que
 * abrem submenu ("Cursos", "Estude na Unifaat", "Servicos", "Logins") tem UM
 * <svg> de seta dentro da ancora. A base nova tinha ZERO — nem svg, nem
 * ::after com conteudo. Os submenus existiam e funcionavam, com os 19 subitens
 * inteiros no HTML; o que faltava era a pista de que existiam.
 *
 * QUEM TEM SUBMENU SE DESCOBRE PELA FORMA, e nao por classe: `:has()` sobre um
 * `.menu__submenu` que nao esta vazio. O template emite o <ul> sempre, e quem
 * tem filho e quem tem filho — nao ha lista a manter em dia a mao. E a mesma
 * decisao de `.menu__submenu:empty`, do outro lado.
 *
 * DESENHADO COM BORDA, e nao com fonte de icone nem svg: o indicador nao entra
 * no documento, entao NENHUM byte de pagina muda por causa dele. Navegador sem
 * `:has()` continua vendo o menu de ontem, que funciona — o indicador e
 * acrescimo que pode falhar sem consequencia, que e D-AF aplicada a ele mesmo.
 */
.menu__item:has(.menu__submenu:not(:empty)) > a::after,
.menu__item:has(.menu__submenu:not(:empty)) > .menu__rotulo::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.18em) rotate(45deg);
    opacity: .85;
}

.menu__item:hover > .menu__submenu,
.menu__item:focus-within > .menu__submenu {
    opacity: 1;
    visibility: visible;
}

.menu__submenu li { display: block; }

.menu__submenu a {
    display: block;
    padding: 8px 20px;
    font-size: .95rem;
    white-space: nowrap;
}

.menu__submenu a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }

/* No telefone não há hover: o submenu vira lista aberta abaixo do item, que é
   o comportamento previsível quando não existe estado de passagem do mouse. */
@media (max-width: 900px) {
    .menu__lista { flex-direction: column; align-items: center; gap: 4px; }

    .menu__submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        background: transparent;
        padding: 2px 0 8px;
        min-width: 0;
        text-align: center;
    }

    .menu__submenu a { padding: 4px 10px; opacity: .85; white-space: normal; }
}

/* ------------------------------------------------------------ hero curso -- */

.hero-curso {
    position: relative;
    background: var(--navy);
    color: var(--branco);
    overflow: hidden;
}

.hero-curso__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O véu escurece a foto à direita para o texto ter contraste. */
.hero-curso__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 54, 92, 0) 20%, rgba(0, 54, 92, .96) 55%);
}

.hero-curso__conteudo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 420px;
    align-items: center;
    padding-block: 56px;
}

.hero-curso__texto { grid-column: 2; }

.hero-curso__titulo {
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -.01em;
    margin-bottom: .3em;
}

.hero-curso__chamada { font-size: 1.1rem; max-width: 46ch; }

.hero-curso__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------- sobre o curso + vídeo */

.sobre-curso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }

.sobre-curso__video {
    aspect-ratio: 16 / 10;
    width: 100%;
    border: 0;
    border-radius: var(--raio-g);
    background: var(--navy);
}

.sobre-curso__lado { display: flex; flex-direction: column; gap: 22px; }

/* Vídeo sob demanda: pôster próprio + botão. O player de terceiro só entra
   depois do clique. Ver public/assets/js/site.js. */
.video {
    position: relative;
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: var(--raio-g);
    overflow: hidden;
    background: var(--navy);
}

.video__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    background: rgba(0, 30, 52, .18);
    cursor: pointer;
    transition: background-color .15s ease;
}

.video__play:hover { background: rgba(0, 30, 52, .34); }

.video__play svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }

.video .sobre-curso__video { width: 100%; height: 100%; }

.regua {
    border: 0;
    border-top: 2px solid var(--navy);
    margin: 0;
}

/* ------------------------------------------------------- como ingressar --- */

.ingresso { display: grid; gap: 16px; }

.ingresso__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 26px;
    background: var(--grad-azul-navy);
    border-radius: var(--raio);
    color: var(--branco);
    text-decoration: none;
}

.ingresso__nome { font-size: 1.35rem; font-weight: 700; }

.ingresso__sep { opacity: .6; margin-inline: 12px; }

.ingresso__desc { font-weight: 400; }

.ingresso__item:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------ grade CTA --- */

.faixa-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 48px;
}

.faixa-grade__esq {
    font-size: 2rem;
    font-weight: 700;
    color: var(--branco);
    border-right: 2px solid rgba(255, 255, 255, .5);
    padding-right: 40px;
}

.faixa-grade__dir { text-align: center; }
.faixa-grade__dir p { font-size: 1.2rem; }
/* Sem o botão da grade, a margem do último parágrafo deixava a faixa
   desalinhada. Ver o comentário do tipo curso-grade-cta. */
.faixa-grade__dir > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- footer --- */

.footer {
    background: var(--grad-navy-azul);
    color: var(--branco);
    padding: 64px 0 28px;
}

.footer__colunas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
}

.footer__coluna + .footer__coluna {
    border-left: 1px solid rgba(255, 255, 255, .35);
    padding-left: 40px;
}

.footer__titulo { font-size: 1.5rem; margin-bottom: .8em; }

.footer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.footer__lista a { text-decoration: none; }
.footer__lista a:hover { text-decoration: underline; }

.footer__seta { margin-right: .5em; }

.footer__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .3);
    font-size: .9rem;
}

.footer__logo { height: 46px; width: auto; }

.footer__redes { display: flex; gap: 16px; }

/* -------------------------------------------------------------- utilidade -- */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nota { font-size: .85rem; color: var(--texto-claro); }
.secao--azul .nota { color: rgba(255, 255, 255, .85); }

.centro { text-align: center; }

/* ------------------------------------------------------------ responsivo -- */

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__coluna + .footer__coluna { border-left: 0; padding-left: 0; }
}

@media (max-width: 780px) {
    .secao { padding: 44px 0; }
    .secao__titulo { font-size: 1.8rem; }

    .grid-2,
    .grid-3,
    .grid-4,
    .grid--meio,
    .grid--par,
    .sobre-curso,
    .faixa-grade,
    .footer__colunas { grid-template-columns: minmax(0, 1fr); }


    .hero-curso__conteudo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .hero-curso__texto { grid-column: 1; }
    .hero-curso__veu { background: rgba(0, 54, 92, .88); }

    .faixa-grade__esq { border-right: 0; padding-right: 0; border-bottom: 2px solid rgba(255,255,255,.5); padding-bottom: 20px; }

    .card--coordenador { grid-template-columns: minmax(0, 1fr); }
    .card--coordenador img { width: 100%; height: 220px; }

    .ingresso__item { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ingresso__sep { display: none; }

    .menu__lista { gap: 8px 18px; font-size: .95rem; }
}

/* Certificação, TCC e afins, dentro do bloco de corpo docente (rodada 6). */
.docentes__texto {
    max-width: 74ch;
    margin: 0 0 8px;
}

.docentes__texto p { margin: 0 0 10px; }
.docentes__texto > :last-child { margin-bottom: 0; }

/* ===========================================================================
   INGRESSO — rodada 7

   As páginas onde a mídia paga aterrissa: /enem/, /prova-de-bolsas/,
   /segunda-graduacao/, /transferencia-externa/, /simulador-de-mensalidade/ e
   /infos-vestibular/processo-seletivo/.

   É POUCO CSS DE PROPÓSITO. Os seis tipos de dobra novos reaproveitam o
   vocabulário que já existe — .secao, .secao--azul, .container, .grid--meio,
   .card, .btn —, e o que está aqui é só o que nenhuma classe anterior
   resolvia. Página de captação que estreia um sistema visual próprio é
   página que envelhece sozinha, e são seis a mais para manter.

   Escrito a partir dos prints de docs/_prints/ing-*.png, medidos no site
   publicado em 13/set/2026, e não de gosto.
   =========================================================================== */

/* A tira de imagem que abre as quatro páginas de conteúdo. Na origem é um PNG
   de 1920x250; aqui é o WebP que a migração converteu. `block` mata o espaço
   de linha-base que sobraria embaixo de uma imagem solta. */
.faixa-topo { background: var(--cinza); }

.faixa-topo__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1920px;
    margin-inline: auto;
}

/* ---------------------------------------------------- texto migrado ------ */

/*
 * O corpo de texto que veio do WordPress.
 *
 * Vale para os três lugares que recebem HTML de migração nestas páginas: a
 * coluna da esquerda, o texto do cartão e a nota de rodapé. A medida de linha
 * é limitada em ch, não em px: 74 caracteres é o que se lê sem perder a
 * linha, e o número não muda quando a caixa muda.
 */
.texto-rico { max-width: 74ch; }
.texto-rico p  { margin: 0 0 1em; }
.texto-rico ul { margin: 0 0 1em; padding-left: 1.2em; }
.texto-rico li { margin-bottom: .4em; }
.texto-rico h3 {
    font-size: 1.15rem;
    color: var(--azul-claro);
    margin: 1.4em 0 .5em;
}
.secao--azul .texto-rico h3 { color: var(--branco); }
.texto-rico > :last-child { margin-bottom: 0; }
.texto-rico--centro { max-width: 60ch; margin-inline: auto; text-align: center; }

/* ---------------------------------------------------- abertura e fecho --- */

.entrada__chamada {
    max-width: 70ch;
    margin: 0 auto 1.2em;
    text-align: center;
    font-size: 1.1rem;
}

/* A linha laranja acima do título na faixa de fecho do Enem. */
.entrada__chamada--destaque {
    font-weight: 700;
    color: var(--branco);
    opacity: .92;
}

.entrada__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 12px;
}

.entrada__fecho { text-align: center; }
.entrada__fecho .secao__titulo { margin-bottom: .5em; }

/* ---------------------------------------------------- texto + destaque --- */

.entrada__coluna { min-width: 0; }

/*
 * A ILUSTRAÇÃO NUNCA É AMPLIADA.
 *
 * `width: 100%` ampliava: a arte de abertura de /bolsas/ tem 140x278 px de
 * verdade — é um recorte pequeno, do mesmo tamanho em que o site publicado a
 * mostra — e a folha a esticava para 420x834, três vezes o original, borrada.
 * Com `width: auto` ela sai no tamanho que tem, e `max-width` continua
 * reduzindo a de /segunda-graduacao/, que tem 728 px, para os mesmos 420.
 */
.entrada__ilustra {
    display: block;
    width: auto;
    max-width: min(420px, 100%);
    height: auto;
    margin-bottom: 20px;
    border-radius: var(--raio-g);
}

/*
 * O cartão azul da direita.
 *
 * No site publicado ele é um arco — canto de cima arredondado, canto de baixo
 * reto — desenhado por um widget do Elementor. O arco é reproduzido com
 * border-radius, que é a mesma forma sem depender de imagem nem de widget.
 */
.destaque {
    background: var(--grad-azul-navy);
    border-radius: 220px 220px var(--raio-g) var(--raio-g);
    padding: 56px 36px 40px;
    text-align: center;
    color: var(--branco);
}

/* O disco do ícone. Na origem é um PNG de 128x128 dentro de um círculo
   branco; aqui é a forma, sem a requisição. */
.destaque__marca {
    display: block;
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--branco);
    box-shadow: var(--sombra);
}

.destaque__titulo {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: .6em;
}

.destaque .texto-rico { max-width: none; }

.destaque__passo {
    display: flex;
    gap: 10px;
    text-align: left;
    margin: 0 0 12px;
    font-size: .95rem;
}

/* O marcador de passo, que na origem é um ícone de "conferido". */
.destaque__passo::before {
    content: "\2713";
    flex: 0 0 auto;
    font-weight: 700;
}

.destaque .btn { margin: 8px 0 16px; }

/* A caixa larga das notas de asterisco, abaixo das duas colunas. */
.entrada__nota {
    max-width: none;
    margin-top: 32px;
    padding: 18px 22px;
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .10);
    font-size: .9rem;
}

/* ---------------------------------------------------- grade de cartões --- */

/*
 * Uma grade que não precisa saber quantos cartões existem.
 *
 * As grades fixas (.grid-3, .grid-4) servem a dobras cujo número de itens é
 * do desenho. Aqui não é: a Prova de Bolsas tem três cartões e o Processo
 * Seletivo tem seis, e os dois usam o mesmo tipo de dobra. `auto-fit` com
 * piso em 260 px resolve os dois e ainda quebra sozinha no celular, sem uma
 * consulta de mídia a mais.
 */
.grid-auto {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card--entrada {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.card--entrada .texto-rico { max-width: none; }
.card--entrada .btn { margin-top: auto; align-self: flex-start; }

.card__item { margin: 0 0 6px; }

/* ------------------------------------------------ ferramenta incorporada - */

/*
 * A moldura do simulador.
 *
 * A origem incorpora com <embed> e `style="height: 70vh"` no atributo. Os dois
 * saem: <embed> para HTML é legado, e altura em atributo é CSS em documento,
 * que é o que D8 elimina. A altura mora aqui, onde se lê e se muda.
 */
.moldura {
    display: block;
    width: 100%;
    height: min(70vh, 760px);
    min-height: 460px;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--branco);
}

/* ===========================================================================
   HOME — rodada 8

   Escrita a partir do IDEIA SITE UNIFAAT.pdf de 11/set/2026, onde o desenho
   aprovado manda sobre o site publicado (D-J). Cada divergência entre os dois
   está em docs/HOME_COMPARACAO.md.

   Como na rodada 7, é pouco CSS de propósito: as nove dobras novas montam-se
   com .secao, .container, .grid-auto, .card, .btn e .texto-rico, que já
   existiam. O que está aqui é o que nenhuma classe anterior resolvia.

   NADA AQUI É @media SOZINHO: a home nasce responsiva. Os dois carrosséis
   rolam por dentro em qualquer largura, as grades usam `auto-fit`, e o pouco
   que precisa mudar no celular está no fim do arquivo.
   =========================================================================== */

/* ------------------------------------------------------------- o hero ---- */

/*
 * O HERO USA O CARROSSEL COMUM — corrigido na rodada 9.
 *
 * A versão da rodada 8 era rolagem nativa com encaixe, e o comentário de então
 * defendia a escolha: "o pior caso é uma faixa que rola, não uma faixa em
 * branco". O pior caso virou o caso normal — os quatro banners apareciam
 * emendados, com barra de rolagem à vista, porque a rolagem nativa mostra o
 * próximo slide desde o primeiro instante.
 *
 * Agora é o mesmo motor de galeria e depoimentos: páginas empilhadas, uma
 * visível, `scrollWidth === clientWidth`. As regras estão em "carrossel", lá
 * em cima; aqui fica só o que é do hero.
 */
.hero-home { background: var(--navy); }

/* O hero ocupa a largura inteira: sem gutter, sem setas por fora da imagem. */
.carrossel--hero {
    --carrossel-col: 100%;     /* um slide por página */
    --carrossel-vao: 0px;
    position: relative;
    display: block;
}

.carrossel--hero .carrossel__trilho { gap: 0; }

/*
 * As setas flutuam sobre a imagem, como no desenho e no site publicado.
 *
 * `z-index: 3` e não 2: a página que viaja durante a troca sobe para 2, e com
 * o mesmo valor ela passava POR CIMA da seta da esquerda — vi isso num quadro
 * capturado no meio do deslizamento, na rodada 10. Controle encoberto pelo
 * conteúdo que ele comanda é controle que some justo na hora de clicar de novo.
 */
.carrossel--hero .carrossel__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: var(--branco);
    background: rgba(0, 40, 70, .35);
}

.carrossel--hero .carrossel__seta:hover { background: rgba(0, 40, 70, .6); }
.carrossel--hero .carrossel__seta--anterior { left: 8px; }
.carrossel--hero .carrossel__seta--proximo  { right: 8px; }

/* Os pontos ficam sobre a barra inferior da imagem. Sob eles vai um véu
   escuro: as artes claras engoliriam bolinha branca sobre fundo branco. */
.carrossel--hero .carrossel__pontos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Pelo mesmo motivo das setas: acima da página que viaja. */
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 32, 56, .45), rgba(0, 32, 56, 0));
}

.carrossel--hero .carrossel__ponto > span { background: rgba(255, 255, 255, .5); }
.carrossel--hero .carrossel__ponto--ativo > span { background: var(--branco); }

.hero-home__slide { min-width: 0; }
.hero-home__link { display: block; }

.hero-home__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------- a vitrine de cursos --- */

.vitrine__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-bottom: 28px;
}

.vitrine__cabeca .secao__titulo { margin-bottom: 0; }

/* O filete vertical entre o título e a chamada, como no desenho. */
.vitrine__chamada {
    margin: 0;
    padding-left: 20px;
    border-left: 2px solid var(--cinza-borda);
    font-size: 1.15rem;
    color: var(--texto-claro);
}

/*
 * A VITRINE USA O CARROSSEL COMUM — corrigida na rodada 9, pelo mesmo motivo
 * do hero: ela também rolava por dentro, com 9.891 px de conteúdo numa caixa
 * de 1.152 px.
 *
 * São 33 cursos de graduação e nenhuma grade os acomoda de uma vez; agora eles
 * vêm em páginas de quatro no computador e uma no celular, com setas e pontos.
 */
.carrossel--vitrine {
    --carrossel-col: 260px;
    --carrossel-vao: 24px;
    display: block;
    position: relative;
}

.carrossel--vitrine .carrossel__seta {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    /* 3, acima da página que viaja durante a troca — o mesmo do hero. */
    z-index: 3;
    background: var(--branco);
    box-shadow: var(--sombra);
}

.carrossel--vitrine .carrossel__seta--anterior { left: -10px; }
.carrossel--vitrine .carrossel__seta--proximo  { right: -10px; }

.card--vitrine {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 18px;
    overflow: hidden;
}

.card--vitrine__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.card--vitrine__nome {
    margin: 4px 18px 0;
    font-size: 1.1rem;
    text-align: center;
    color: var(--navy);
    text-transform: uppercase;
}

/*
 * O nome do curso é link, e link no dedo precisa de 44 px.
 *
 * Sem isto a varredura de celular contou 32 alvos abaixo de 44 px na home — um
 * por cartão do carrossel. A área cresce com padding; o tamanho da letra não
 * muda, e o texto continua centrado.
 */
.card--vitrine__nome a {
    display: block;
    padding-block: 10px;
    min-height: 44px;
    text-decoration: none;
}

.card--vitrine__nome a:hover { text-decoration: underline; }

.card--vitrine__tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 18px;
    /* Empurra os dois botões para a base: cartões de nomes com uma e com três
       linhas ficam com os botões alinhados na mesma altura. */
    flex: 1 0 auto;
}

.card--vitrine .btn { margin-inline: 18px; }

/*
 * Botão de largura cheia, CENTRADO, com o raio de pílula do desenho.
 *
 * Não é `.btn--bloco`: aquele é o "VEJA TODAS AS MATÉRIAS" da página de curso,
 * com gradiente, seta à direita e canto de 12 px. Reaproveitá-lo aqui daria um
 * botão de outra família — e mudá-lo mexeria nas 44 páginas por causa da home.
 */
.btn--largo {
    display: flex;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .95rem;
    /*
     * `align-self: stretch`, e não `width: 100%`.
     *
     * O cartão dá 18 px de margem lateral a estes botões; com largura de 100%
     * eles somavam 36 px a mais que o cartão e vazavam pela direita. Só ficou
     * visível a 390 px, porque no computador o `overflow: hidden` do cartão
     * escondia o estrago. Esticar respeita a margem.
     */
    align-self: stretch;
}

/* A pílula do cartão. Não é a .tag do hero do curso: aquela é sólida e escura,
   esta é de contorno, como o desenho mostra. */
.pilula {
    display: inline-block;
    padding: .3em 1.1em;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio-pill);
    font-size: .9rem;
    color: var(--texto-claro);
    text-align: center;
}

/* ------------------------------------------------------- sobre a home --- */

.sobre-home__sobretitulo {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1;
    color: var(--branco);
}

.sobre-home__texto .secao__titulo { font-size: 3rem; margin-top: 0; }
.sobre-home__texto .texto-rico { margin-bottom: 24px; }

.sobre-home__foto {
    width: 100%;
    height: auto;
    border-radius: var(--raio-g);
    align-self: center;
}

/* --------------------------------------------------------- os números --- */

.numeros-home { margin-top: 8px; }

.numero-home {
    margin: 0;
    padding: 22px 20px;
    border: 2px solid var(--azul-claro);
    border-radius: var(--raio);
    text-align: center;
}

.numero-home__valor {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul-claro);
}

.numero-home__rotulo {
    display: block;
    margin-top: 6px;
    color: var(--texto-claro);
}

/* ----------------------------------------------------------- a missão --- */

.missao { max-width: 68ch; text-align: center; }

.missao__titulo {
    font-size: 1.25rem;
    color: var(--azul-claro);
    margin-bottom: .8em;
}

/* Os dois filetes do desenho, acima e abaixo do texto. */
.missao__titulo::after,
.missao__texto::after {
    content: "";
    display: block;
    width: 200px;
    max-width: 60%;
    height: 2px;
    margin: .7em auto 0;
    background: var(--azul-claro);
}

.missao__texto { margin: 0; }

/* -------------------------------------------- principais áreas de ensino */

.area { display: flex; flex-direction: column; gap: 12px; }

.area__moldura {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 220px;
    padding: 18px;
    border-radius: var(--raio-g);
    overflow: hidden;
    background: var(--navy-escuro);
}

.area__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * O RÓTULO É UM <span>, e parece o que é.
 *
 * No site publicado estas três pílulas têm aparência de botão e não são link
 * nenhum — medido: nenhum <a> em volta das três. Aqui a pílula não tem estado
 * de foco nem cursor de mão: quem leva a algum lugar é o link de baixo.
 */
.area__rotulo {
    position: relative;
    padding: .7em 1.6em;
    border-radius: var(--raio-pill);
    background: var(--branco);
    color: var(--navy);
    font-weight: 700;
    text-align: center;
}

/* ------------------------------------------------------- opções e FAQ --- */

.card--opcao { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.card--opcao__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card--opcao__corpo { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.card--opcao__nome { margin: 0; font-size: 1.5rem; color: var(--azul-claro); }
.card--opcao__chamada { margin: 0; font-weight: 700; color: var(--navy); }
.card--opcao__corpo .texto-rico { max-width: none; }

/* O "Encontre seu curso >" e o "Ver mais >" do desenho. */
.link-seta {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 8px;
    font-weight: 600;
    text-decoration: none;
    /* 44 px de altura de toque sem mudar o tamanho da letra. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.link-seta::after { content: " \203A"; margin-left: .4em; font-weight: 700; }
.link-seta:hover { text-decoration: underline; }

/* As duas colunas de perguntas do desenho. */
.faq-home {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    align-items: start;
}

/* ---------------------------------------------- os cartões de notícia --- */

.card--noticia-home { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.card--noticia-home__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card--noticia-home__titulo {
    margin: 16px 18px 4px;
    font-size: 1.2rem;
    color: var(--navy);
}

.card--noticia-home__titulo a { text-decoration: none; }
.card--noticia-home__titulo a:hover { text-decoration: underline; }

.card--noticia-home__data {
    margin: 0 18px 8px;
    font-size: .85rem;
    color: var(--texto-claro);
}

.card--noticia-home__resumo {
    margin: 0 18px 18px;
    color: var(--texto-claro);
    /* O desenho corta o resumo em seis linhas e fecha com reticências. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================================================================
   CELULAR — rodada 6

   Medido antes de escrito: docs/CELULAR_REFERENCIA.md tem o que o site
   publicado faz em 360, 390 e 414 px, e o que a base nova fazia.

   O que estas regras corrigem, em ordem de gravidade:

     1. o menu de 26 links empilhava 906 px e empurrava o nome do curso para
        1.067 px do topo — três telas de índice antes do conteúdo, num site
        onde o candidato chega por anúncio e decide na primeira tela;
     2. o título do curso estourava a caixa: "ANÁLISE E DESENVOLVIMENTO DE
        SISTEMAS" media 370 px de conteúdo numa caixa de 281 px, a 329 px de
        largura;
     3. 44 alvos de toque abaixo de 44 px.

   O DESKTOP NÃO MUDA. Tudo aqui está dentro de @media (max-width: …), e a
   prova é a comparação de imagem do retorno: piso de ruído 0,0000%, e as
   páginas de desktop idênticas pixel a pixel depois da mudança.
   =========================================================================== */

/* ---------------------------------------------- o menu vira sanduíche ----- */

/* Desktop: o gatilho e o botão não existem. */
.menu__gatilho,
.menu__botao { display: none; }

@media (max-width: 900px) {
    .menu__barra {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-block: 6px;
    }

    /* A caixa de seleção fica fora da tela mas continua focável pelo teclado:
       display:none a tiraria da ordem de tabulação e o menu ficaria
       inalcançável sem mouse. */
    .menu__gatilho {
        display: block;
        position: absolute;
        opacity: 0;
        width: 44px;
        height: 44px;
        margin: 0;
        cursor: pointer;
    }

    .menu__botao {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 44x44 é o mínimo recomendado para alvo de toque. O site publicado
           usa 33x33; seguir o comportamento não obriga a copiar a medida. */
        width: 44px;
        height: 44px;
        cursor: pointer;
        color: var(--branco);
    }

    /* O ícone: três riscos feitos de um elemento só, com ::before e ::after. */
    .menu__risco,
    .menu__risco::before,
    .menu__risco::after {
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    .menu__risco { position: relative; }

    .menu__risco::before,
    .menu__risco::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu__risco::before { top: -7px; }
    .menu__risco::after  { top:  7px; }

    /* Foco visível: quem navega por teclado precisa ver onde está. */
    .menu__gatilho:focus-visible + .menu__botao {
        outline: 2px solid var(--branco);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* FECHADO por padrão. */
    .menu__lista {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 12px;
    }

    .menu__gatilho:checked ~ .menu__lista { display: flex; }

    .menu__lista > .menu__item {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    /* Alvo de toque: o link ocupa a linha inteira, com altura de dedo. */
    .menu__lista a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 2px;
    }

    /* O submenu já vinha aberto e indentado no celular (rodada 4). Mantido:
       com o menu fechado por padrão, ele não custa mais a primeira dobra. */
    .menu__submenu { padding-left: 14px; }
    /* 44px também nos subitens: eram 19 links abaixo do alvo mínimo, e num
       menu de dedo o subitem é tão clicável quanto o pai. */
    .menu__submenu a { min-height: 44px; opacity: .85; }
}

/* ------------------------------------------------ o título que estourava -- */

@media (max-width: 780px) {
    .hero-curso__titulo {
        /* Era clamp(2.4rem, 5vw, 4rem): o mínimo de 2,4rem (38,4px) não descia
           nunca, e "DESENVOLVIMENTO" não cabe em 281px nesse tamanho. Agora o
           piso acompanha a largura da tela. */
        font-size: clamp(1.6rem, 8.5vw, 2.4rem);
        /* Palavra longa demais quebra em vez de vazar. */
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .secao__titulo { overflow-wrap: break-word; }
}

/* ------------------------------------------------------- alvos de toque -- */

@media (max-width: 900px) {
    /* As setas do carrossel eram menores que o dedo. */
    .carrossel__seta {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    /* Links de rodapé e de lista, com espaço para errar o toque. */
    .footer__lista a,
    .footer__coluna a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Os ícones de rede tinham 24 px no topo e 30 px no rodapé — metade do
       alvo mínimo, e são links para fora que ninguém quer errar. */
    .topbar__redes a,
    .footer__redes a {
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* Os dois CTAs do hero, lado a lado, ficavam apertados. */
    .hero-curso__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-curso__ctas .btn { justify-content: center; }
}

/* ------------------------------------------------------- topbar no dedo -- */

@media (max-width: 900px) {
    /*
     * O CTA do topo quebrava em TRÊS linhas — "Inscreva-", "se", "!" — e o
     * botão ficava com 77 px de altura e cara de defeito. A linha era
     * `nowrap`, então o botão era espremido em vez de descer.
     *
     * Agora a linha pode quebrar e o rótulo não: em telas estreitas o botão
     * desce inteiro para a segunda linha, que é onde o polegar o alcança.
     */
    .topbar__linha {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 16px;
    }

    .topbar .btn {
        white-space: nowrap;
        padding: .55em 1.3em;
    }

    .topbar__marca { gap: 12px; }
}

/* ------------------------------------------------- ingresso no celular --- */

@media (max-width: 780px) {
    /*
     * O arco do cartão de destaque é desenhado para uma coluna de ~540 px.
     * Empilhado num celular de 360 px, um raio de 220 px come metade da
     * altura do cartão e empurra o texto para dentro da curva. Aqui ele vira
     * um canto arredondado normal.
     */
    .destaque {
        border-radius: var(--raio-g);
        padding: 32px 22px 28px;
    }

    .destaque__marca { width: 62px; height: 62px; margin-bottom: 14px; }
    .destaque__titulo { font-size: 1.25rem; }

    .entrada__ilustra { max-width: 100%; }
    .entrada__nota { padding: 14px 16px; }

    /* Um cartão por linha: 260 px de piso mais 24 px de vão não cabem em dois
       numa tela de 360 px, e `auto-fit` sozinho deixaria o segundo espremido. */
    .grid-auto { grid-template-columns: minmax(0, 1fr); }

    .card--entrada .btn { align-self: stretch; text-align: center; }

    /*
     * A FAIXA DE TOPO NÃO É RECORTADA NO CELULAR.
     *
     * Cheguei a recortá-la em 120 px de altura, porque a 390 px ela vira uma
     * tira de 51 px onde não se lê a chamada. Fui medir o que o site
     * publicado faz antes de manter: ele SERVE A IMAGEM INTEIRA, reduzida a
     * 390x51, sem recorte nenhum.
     *
     * Recortar pelo centro tirava a chamada da esquerda — "Use sua nota do
     * ENEM" — e deixava as fotos. Ficava melhor de olhar e pior de ler, e era
     * comportamento que ninguém aprovou. Fica como a origem faz, e o que essa
     * faixa deveria ser no celular é pergunta para a Milca, não decisão minha:
     * está no retorno, entre os pontos de decisão.
     */

    .moldura { height: 70vh; min-height: 420px; }
}

/* A faixa de botões é emitida sempre e fica vazia em quem não tem botão — o
   renderizador não tem condicional, e a alternativa seria uma bandeira que
   quem edita teria de manter à mão. Mesmo motivo, mesma solução que
   `.menu__submenu:empty`. */
.entrada__acoes:empty { display: none; }

/* Os itens de lista dos cartões ("Campus Atibaia", "Unidade Bragança
   Paulista") são links de 23 px de altura. No dedo isso erra: a varredura de
   celular contou dois alvos abaixo de 44 px na Prova de Bolsas, e eram estes.
   A área cresce sem que o texto mude de tamanho. */
.card__item a {
    display: inline-block;
    padding-block: 11px;
}

/* ----------------------------------------------------- home no celular --- */

@media (max-width: 780px) {
    /*
     * A home nasceu responsiva: os dois carrosséis já rolam por dentro em
     * qualquer largura e as grades usam `auto-fit`. O que muda aqui é só o
     * que a largura de dedo obriga.
     */

    /* Duas colunas de acordeão a 360 px dariam caixas de 150 px. Uma coluna. */
    .faq-home { grid-template-columns: minmax(0, 1fr); }

    /* Um cartão por página no celular: quem manda na conta é
       `--carrossel-col`, e 260 px não cabe duas vezes em 360. */

    /* O sobretítulo e o título de "Sobre a UNIFAAT" são de desktop. */
    .sobre-home__sobretitulo { font-size: 1.6rem; }
    .sobre-home__texto .secao__titulo { font-size: 2.1rem; }

    /* O filete vertical entre título e chamada vira espaço em branco quando
       os dois empilham — borda à esquerda de um bloco solto parece defeito. */
    .vitrine__chamada { padding-left: 0; border-left: 0; }

    .area__moldura { min-height: 180px; }
    .numero-home__valor { font-size: 2.2rem; }

    /*
     * OS CONTROLES DO HERO SAEM DE CIMA DA IMAGEM NO CELULAR.
     *
     * A arte que a home recebeu é a faixa de 1536x200 das páginas de ingresso:
     * a 390 px ela mede 51 px de altura. Seta de 44 px sobre faixa de 51 px
     * cobre a faixa inteira, e o ponto sobre a borda de baixo cobre o resto.
     * Aqui eles descem para uma barra abaixo da imagem, sobre o azul da dobra:
     * continuam com 44 px de alvo e param de esconder o que anunciam.
     *
     * A ordem no documento é — seta, janela, seta, pontos — e a grade coloca
     * cada um no seu lugar sem mexer na marcação.
     */
    .carrossel--hero {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
    .carrossel--hero .carrossel__janela { grid-column: 1 / -1; grid-row: 1; }
    .carrossel--hero .carrossel__seta {
        position: static;
        transform: none;
        grid-row: 2;
    }
    .carrossel--hero .carrossel__seta--anterior { grid-column: 1; }
    .carrossel--hero .carrossel__seta--proximo  { grid-column: 3; }
    .carrossel--hero .carrossel__pontos {
        position: static;
        background: none;
        grid-column: 2;
        grid-row: 2;
    }
    .carrossel--hero .carrossel__conta { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 480px) {
    /* Abaixo de 480 px as setas da vitrine não cabem nas bordas sem cobrir o
       cartão: encostam nelas. */
    .carrossel--vitrine .carrossel__seta--anterior { left: -14px; }
    .carrossel--vitrine .carrossel__seta--proximo  { right: -14px; }
}

/* =========================================================================
   A LISTAGEM DE CURSOS — /graduacao/ (rodada 11)
   ========================================================================= */

/*
 * A MESMA CONTA DE COLUNAS DO CARROSSEL, e de propósito: `auto-fill` com
 * `minmax(260px, 1fr)`. Quem decide quantos cartões cabem é a folha, o número
 * de cartões não muda nada na marcação, e o cartão é o MESMO objeto da vitrine
 * da home — mesmas classes, mesma proporção de imagem, mesmos dois botões.
 *
 * Aqui não há carrossel, e isso é a diferença de propósito entre as duas: a
 * vitrine da home é uma amostra que convida a entrar; a listagem existe para
 * mostrar TUDO de uma vez. O site publicado carrega de seis em seis conforme
 * se rola — sete cartões ao abrir, 33 depois de oito rolagens, medido na
 * rodada 11 —, e quem chega procurando um curso não deveria rolar oito vezes
 * para descobrir se ele existe. Página estática não precisa disso.
 */
.lista-cursos__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* `min-width: 0` em grade é o que impede um nome longo de esticar a coluna
   além da célula — foi assim que a vitrine estourou a caixa na rodada 9. */
.lista-cursos__grade > * { min-width: 0; }

.lista-cursos__cabeca { margin-bottom: 28px; }

.lista-cursos__chamada {
    margin: 6px 0 0;
    font-size: 1.15rem;
    color: var(--texto-claro);
}

/* O cartão da listagem tem fundo e sombra próprios: na vitrine ele herda os do
   carrossel, que aqui não existe. */
.lista-cursos__grade .card--vitrine {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

@media (max-width: 480px) {
    /* A 360 px, 260 px de coluna deixariam 52 px de margem de cada lado.
       Uma coluna, e o cartão ocupa a largura útil. */
    .lista-cursos__grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* A saída da vitrine da home, logo abaixo do carrossel (rodada 11). */
.vitrine__saida {
    margin: 26px 0 0;
    text-align: center;
}

/* O <h1> da listagem: o título da página, acima do primeiro título de seção. */
.lista-cursos__titulo {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-claro);
}

/* =========================================================================
   PÁGINAS INSTITUCIONAIS — /soae/ e /clinica/ (rodada 14)
   ========================================================================= */

/*
 * Coluna de leitura mais estreita que o container comum. Medido no ar: a
 * `/soae/` publicada dá 1.140 px de largura ao texto num viewport de 1.920, e
 * a `/clinica/`, 540 px na coluna de texto. Linha de 1.400 px de texto corrido
 * é linha que ninguém acompanha até o fim.
 */
.container--texto {
    max-width: 860px;
}

.institucional__titulo {
    margin: 0 0 8px;
    font-size: 2.4rem;
    color: var(--navy);
}

.institucional__secao {
    margin-top: 36px;
}

.institucional__secao:first-of-type {
    margin-top: 24px;
}

/*
 * A IMAGEM SAI ACIMA DO TEXTO, e isso é decisão registrada (D106).
 *
 * No ar, a `/clinica/` põe a imagem de abertura à esquerda e o texto à direita
 * no computador; a `/soae/` põe o logotipo acima, centralizado. A escolha por
 * seção não está no campo migrado — ela mora no JSON do Elementor, que este
 * projeto não converte (D11). Empilhar é o que as duas fazem no celular, e
 * inventar uma variável de lado seria inventar apresentação.
 */
.institucional__img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: var(--raio);
}

.institucional__h2 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    color: var(--navy);
}

.institucional__texto {
    color: var(--texto);
    line-height: 1.7;
}

.institucional__texto p { margin: 0 0 14px; }
.institucional__texto ul { margin: 0 0 14px; padding-left: 20px; }
.institucional__texto li { margin-bottom: 6px; }

/* O contato de cada clínica é uma lista de links — telefone, WhatsApp,
   e-mail. Alvo de 44 px porque no celular é onde se toca. */
.institucional__texto a {
    color: var(--azul-claro);
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}

@media (max-width: 480px) {
    .institucional__titulo { font-size: 1.9rem; }
    .institucional__h2 { font-size: 1.3rem; }
}

/* ======================================================== bolsas ========= */

/*
 * A BOLSA COM DATA-LIMITE — a seção que só existe quando há data.
 *
 * Quem decide se ela aparece é o compilador, não o CSS: `decide_vazio` na
 * variável `data` faz a dobra ser considerada vazia, e `vazio_como = esconder`
 * a tira do HTML. Não há `display: none` aqui, e não haveria como haver — o
 * site é estático, e a seção simplesmente não é escrita.
 *
 * O estilo existe para quando alguém preencher a data pela tela.
 */
.bolsa-prazo {
    margin: 0 0 14px;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--branco);
}

/* Sobre o fundo azul não há cor de destaque na paleta do projeto — o negrito
   já separa a bolsa do resto da frase. A data não quebra linha no meio. */
.bolsa-prazo__bolsa { color: var(--branco); }
.bolsa-prazo__data  { color: var(--branco); white-space: nowrap; }

.bolsa-prazo__ressalva {
    max-width: none;
    font-size: .92rem;
    color: var(--branco);
    opacity: .85;
}

/*
 * OS GRUPOS DE CARTÕES.
 *
 * Um título de grupo, um texto de abertura opcional e uma grade — três vezes
 * na mesma página. A grade é a `.grid-auto` que as páginas de ingresso já
 * usam: nenhuma medida nova, e a quebra no celular é a mesma.
 */
.grupo-cartoes + .grupo-cartoes { margin-top: 48px; }

/*
 * OS TRES ARRANJOS DE UM GRUPO DE CARTOES (rodada 18).
 *
 * O atributo vem da instancia da dobra, e os tres valores foram medidos no ar
 * com `tools/arranjo_colunas.mjs`. Sem atributo, nada muda — e e isso que
 * mantem `/bolsas/` como estava.
 */

/* Dois por fileira. Os quatro pilares de /institucional/ sao 2x2 no ar, e a
   grade automatica os punha 1x4 em 1920 px. */
[data-arranjo="duas-colunas"] .grupo-cartoes > .grid-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Texto a esquerda, cartoes a direita, na mesma fileira. E o bloco
   "Nascia a FAAT..." com o cartao "Formula de sucesso" ao lado. */
[data-arranjo="ao-lado"] .grupo-cartoes {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
}

[data-arranjo="ao-lado"] .grupo-cartoes > .grupo-cartoes__titulo,
[data-arranjo="ao-lado"] .grupo-cartoes > .grupo-cartoes__intro { grid-column: 1; }

/* `1 / -1` cobre os dois casos: grupo com titulo (duas linhas na coluna da
   esquerda) e grupo sem titulo (uma). */
[data-arranjo="ao-lado"] .grupo-cartoes > .grid-auto {
    grid-column: 2;
    grid-row: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
}

.grupo-cartoes__titulo {
    margin: 0 0 8px;
    font-size: 1.6rem;
    color: var(--navy);
}

.grupo-cartoes__intro {
    max-width: 74ch;
    margin-bottom: 24px;
    color: var(--texto-claro);
}

/*
 * O cartão de valor: título curto e um texto com percentuais em negrito. O
 * negrito vem da origem, dentro do HTML da seção — é ele que separa "20% de
 * desconto" do resto da frase, e é a única marcação que o extrator deixa
 * passar ali.
 */
.card--valor .texto-rico { max-width: none; }
.card--valor .texto-rico p:last-child { margin-bottom: 0; }
.card--valor strong { color: var(--navy); }

@media (max-width: 480px) {
    .grupo-cartoes__titulo { font-size: 1.3rem; }
    .grupo-cartoes + .grupo-cartoes { margin-top: 36px; }
}

/*
 * O LINK DENTRO DO CARTÃO É ALVO DE DEDO.
 *
 * Os cartões do FIES e do PROUNI trazem um e-mail no meio do texto, e medido
 * no celular ele tinha 23 px de altura — metade do alvo de 44 px. É a mesma
 * correção que `/clinica/` recebeu na rodada 14, pelo mesmo motivo: o link de
 * contato é onde se toca.
 */
.card--valor .texto-rico a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    color: var(--azul-claro);
}

/*
 * NO CELULAR, O TÍTULO VEM ANTES DA ILUSTRAÇÃO.
 *
 * Medido em /bolsas/ a 390 px: a foto de abertura, empilhada em largura
 * inteira, empurrava o <h1> para 980 px do topo — três telas abaixo do
 * começo. No computador ela fica AO LADO do texto e o título é a primeira
 * coisa que se lê; empilhar inverteu a ordem de leitura sem que ninguém
 * decidisse isso.
 *
 * A correção é de ordem, não de conteúdo: a ilustração continua na página,
 * depois do texto. Vale para as duas páginas que usam o tipo — /bolsas/ e
 * /segunda-graduacao/ —, e nas duas o <h1> sobe.
 *
 * O SELETOR É `:has(.entrada__ilustra)` de propósito: só a coluna que TEM
 * ilustração vira caixa flexível. Sem isso, /enem/ — que usa o mesmo tipo de
 * dobra sem imagem — crescia 18 px de altura só porque a caixa flexível não
 * junta margens como o bloco junta. Navegador que não conhece `:has()` ignora
 * a regra e fica com o empilhamento de antes, que não quebra nada.
 */
@media (max-width: 860px) {
    .entrada__coluna:has(.entrada__ilustra) { display: flex; flex-direction: column; }
    .entrada__coluna:has(.entrada__ilustra) .entrada__ilustra { order: 3; margin: 20px auto 0; }
    .entrada__coluna:has(.entrada__ilustra) .secao__titulo { order: 1; }
    .entrada__coluna:has(.entrada__ilustra) .texto-rico { order: 2; }
}

/* =================================================== institucional ======= */

/*
 * A FAIXA DE FOTOS.
 *
 * O número de colunas no computador vem de `data-colunas`, e não de `style`:
 * ele muda por instância — duas fotos de campus, oito de galeria — e o
 * Renderer só sabe imprimir variável. CSS inline em documento é D8, e o teste
 * pega. O seletor de atributo resolve sem sujar o HTML.
 *
 * `auto-fit` com piso cuida do resto: no celular a conta é a largura, não o
 * número declarado, e as oito viram quatro ou duas sozinhas.
 */
.faixa-fotos {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.faixa-fotos[data-colunas="2"] {
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/*
 * A CONTAGEM DECLARADA PASSOU A VALER (rodada 18).
 *
 * A semente dizia `colunas => '8'` para a galeria e a folha so tinha regra
 * para "2": o resto caia no `auto-fit` de 110 px, que em 1920 px da NOVE por
 * fileira — 9 + 7, com a segunda fileira desalinhada. O ar mostra 8 + 8.
 * Medido com `tools/arranjo_colunas.mjs`; o numero da semente deixou de ser
 * decorativo.
 */
.faixa-fotos[data-colunas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faixa-fotos[data-colunas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faixa-fotos[data-colunas="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.faixa-fotos[data-colunas="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.faixa-fotos__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--raio);
}

/* As duas fotos de campus são paisagem, e recortá-las em quadrado cortaria o
   prédio ao meio. */
.faixa-fotos[data-colunas="2"] .faixa-fotos__img { aspect-ratio: 14 / 10; }

/* ---------------------------------------------- corpo administrativo ---- */

.corpo-adm__grupo + .corpo-adm__grupo { margin-top: 40px; }

.corpo-adm__titulo {
    margin: 0 0 18px;
    font-size: 1.25rem;
    color: var(--branco);
    text-align: center;
}

/*
 * O CARTÃO DE PESSOA. A foto é quadrada e recortada pelo centro: as 21 vêm da
 * origem em 1920x1920, mas nem todas com o rosto no mesmo lugar, e `cover`
 * evita que uma delas fique esticada.
 */
.card--pessoa {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px;
}

.card--pessoa__foto {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--raio);
    margin-bottom: 8px;
}

.card--pessoa__nome {
    margin: 0;
    font-size: 1.05rem;
    color: var(--navy);
    line-height: 1.3;
}

.card--pessoa__cargo {
    margin: 0;
    color: var(--texto-claro);
    font-size: .9rem;
}

/*
 * O e-mail é alvo de dedo, como o das clínicas e o dos cartões de bolsa.
 *
 * ⚠️ O SELETOR PRECISA DA SEÇÃO, e o motivo foi medido percorrendo a página: o
 * bloco inteiro vive dentro de `.secao--azul`, e a regra `.secao--azul a
 * { color: var(--branco) }` da linha 115 pinta todo link de branco ali dentro.
 * O cartão é branco. O e-mail saía branco sobre branco — invisível, e
 * invisível de um jeito que nenhuma das medições pega: a caixa tem 221x44 px,
 * o link funciona, o texto está no HTML. Só olhando.
 *
 * É o mesmo caso de `.secao--azul a.btn--claro`, logo abaixo daquela linha, e
 * a solução é a mesma: dizer de novo, com especificidade que ganhe.
 */
.secao--azul .card--pessoa__email,
.card--pessoa__email {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    color: var(--azul-claro);
    font-size: .9rem;
    word-break: break-word;
}

@media (max-width: 480px) {
    .corpo-adm__titulo { font-size: 1.1rem; }
    .faixa-fotos { gap: 8px; }
}

/*
 * O CELULAR DESFAZ OS PAREAMENTOS — E ESTE BLOCO PRECISA FICAR AQUI, NO FIM.
 *
 * A primeira versao pos estas regras na consulta de midia geral, la em cima,
 * junto de `.grid-2` e companhia. Nao funcionou, e a causa nao e o seletor: a
 * especificidade e a MESMA das regras de computador, e em empate quem vence e
 * quem vem depois na folha. As regras de arranjo moram na secao de
 * `/institucional/`, bem abaixo daquela consulta, e sobrescreviam o celular.
 *
 * Medido em 390 px: antes desta mudanca, "Nascia a FAAT...", os quatro
 * pilares e Visao/Missao continuavam em DUAS colunas num aparelho de 390 px,
 * e a galeria saia com oito fotos de 48 px lado a lado.
 *
 * Nao subi a especificidade de proposito. Empilhar no celular e a regra mais
 * simples da folha, e ela nao deveria precisar de um seletor mais forte para
 * valer — precisa de vir depois, que e o que ela faz agora.
 */
@media (max-width: 780px) {
    [data-arranjo="ao-lado"] .grupo-cartoes { grid-template-columns: minmax(0, 1fr); }
    [data-arranjo="ao-lado"] .grupo-cartoes > .grid-auto { grid-column: 1; grid-row: auto; }
    [data-arranjo="duas-colunas"] .grupo-cartoes > .grid-auto { grid-template-columns: minmax(0, 1fr); }
    .faixa-fotos[data-colunas="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .faixa-fotos[data-colunas="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}