/* frontend/publico/styles/site.css
   ═══════════════════════════════════════════════════════════════════════════
   Página institucional do CMACE Som na Leste.

   Folha própria, sem nenhuma linha herdada dos portais. Os estilos de gestão,
   docente e aluno resolvem outro problema — densidade de informação em tela de
   trabalho — e trazem consigo sidebar, cards, tabelas e um corpo com
   `display:flex; height:100vh; overflow:hidden`, que impediria esta página de
   rolar. Aqui a métrica é outra: espaço em branco, hierarquia tipográfica e
   uma coluna de leitura.

   A paleta sai da fotografia da fachada: o azul do portal, o amarelo da
   pincelada, o marfim da parede.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Cor ── */
    --marfim:        #f7f3ec;  /* fundo da página */
    --marfim-claro:  #fbf9f5;  /* superfícies que precisam separar-se do fundo */
    --tinta:         #16181c;  /* texto principal — 15:1 sobre marfim */
    --tinta-suave:   #55585f;  /* texto secundário — 7:1 sobre marfim */
    --azul:          #1b4f9c;  /* estrutural: título, faixa, links */
    --azul-vivo:     #2a63c4;  /* o azul do portal, para blocos gráficos */
    --marinho:       #0c1728;  /* rodapé */
    --dourado:       #d99a12;  /* traço fino, pontos das pautas */
    --dourado-claro: #f0b429;  /* preenchimento de bloco e botão de destaque */
    --linha:         rgba(22, 24, 28, .16);
    --linha-clara:   rgba(255, 255, 255, .22);

    /* ── Tipografia ──
       Nenhuma fonte remota: a CSP desta página é `default-src 'self'`, que
       bloquearia Google Fonts, e uma requisição a menos é meio segundo a menos
       no celular da rua. As duas famílias são pilhas de sistema. */
    --serifada: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
                Georgia, 'Times New Roman', serif;
    --sem-serifa: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

    /* ── Ritmo ── */
    --respiro-secao: clamp(3.5rem, 8vw, 7.5rem);
    --largura-max:   1240px;
}

/* ═══════════════════════════ BASE ═══════════════════════════ */

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

html {
    /* Leva o "Conhecer os cursos" até a seção sem salto seco. Desligado mais
       abaixo para quem pediu menos movimento no sistema operativo. */
    scroll-behavior: smooth;
}

body.site {
    margin: 0;
    /* Guarda contra rolagem lateral: os blocos decorativos do hero e as pautas
       ultrapassam a coluna de texto de propósito, e um deslize de 2px numa
       tela estreita bastaria para nascer uma barra horizontal. */
    overflow-x: hidden;
    background: var(--marfim);
    color: var(--tinta);
    font-family: var(--sem-serifa);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* Só o sprite de símbolos: não ocupa espaço nem é lido por ninguém. */
.site__simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* O salto para o conteúdo, visível apenas ao receber foco pelo teclado. */
.site__pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: .75rem 1.25rem;
    background: var(--azul);
    color: #fff;
    font: 600 .875rem/1 var(--sem-serifa);
    text-decoration: none;
}
.site__pular:focus { left: 0; }

.envoltorio {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

/* ═══════════════════════ PEÇAS REUTILIZADAS ═══════════════════════ */

/* ── Botões ──
   Cantos de 2px, não pílulas: a página é editorial, e o arredondamento forte é
   justamente a assinatura do template que ela não deve parecer. */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;           /* 48px: alvo de toque confortável */
    padding: .75rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font: 600 .9375rem/1.2 var(--sem-serifa);
    letter-spacing: .01em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.botao--destaque {
    background: var(--dourado-claro);
    color: var(--tinta);        /* 10:1 — nunca branco sobre amarelo */
}
.botao--destaque:hover { background: var(--dourado); }

.botao--contorno {
    background: transparent;
    border-color: var(--tinta);
    color: var(--tinta);
}
.botao--contorno:hover { background: var(--tinta); color: var(--marfim); }

/* Sobre a faixa azul: contorno branco, preenchimento nenhum. */
.botao--claro {
    background: transparent;
    border-color: var(--linha-clara);
    color: #fff;
}
.botao--claro:hover { background: #fff; color: var(--azul); }

.botao--miudo {
    min-height: 2.5rem;
    padding: .5rem 1.125rem;
    font-size: .875rem;
}

/* ── Links de texto ──
   Sublinhado com deslocamento em vez de mudança de cor sozinha: a ação precisa
   ser reconhecível por quem não distingue o azul do preto. */
.elo {
    color: var(--tinta);
    font: 500 .9375rem/1 var(--sem-serifa);
    text-decoration: none;
    text-underline-offset: .35em;
    padding: .5rem 0;
}
.elo:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.elo--acao {
    background: none;
    border: 0;
    padding: .5rem 0;
    color: var(--azul);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.elo--acao:hover { text-decoration: underline; text-underline-offset: .35em; }

.elo--claro { color: rgba(255, 255, 255, .82); }
.elo--claro:hover { color: #fff; }

/* Um único anel de foco para tudo o que é operável pelo teclado. */
.botao:focus-visible,
.elo:focus-visible,
.site__pular:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
}
.botao--claro:focus-visible,
.elo--claro:focus-visible { outline-color: var(--dourado-claro); }

/* ── Pautas ──
   `aspect-ratio` casado com o viewBox do símbolo: sem isso o desenho seria
   centralizado com folga dentro do <svg> e as linhas apareceriam curtas. */
.pauta {
    display: block;
    color: var(--linha);        /* as linhas herdam por currentColor */
    pointer-events: none;
}
.pauta--hero {
    width: min(320px, 70%);
    aspect-ratio: 320 / 48;
    margin-top: clamp(2rem, 4vw, 3rem);
}
.pauta--escola {
    width: min(180px, 55%);
    aspect-ratio: 180 / 48;
    margin-top: 2rem;
}
/* Discreta e encostada à direita da faixa azul.
   Posicionada em absoluto, e não como item flex: dentro do flex a `flex-basis`
   venceria a `width`, a pauta esticaria para a largura toda da faixa e as
   linhas — pensadas para 320px — virariam cinco riscos atravessando a seção. */
.pauta--chamada {
    position: absolute;
    right: clamp(1.25rem, 4vw, 3.5rem);
    bottom: clamp(1.25rem, 3vw, 2rem);
    width: min(260px, 32%);
    aspect-ratio: 320 / 48;
    color: var(--linha-clara);
}

/* ── Aviso de destino ainda não disponível ── */
.aviso {
    max-width: 34rem;
    margin-top: 1.25rem;
    padding-left: .875rem;
    border-left: 2px solid var(--dourado);
    color: var(--tinta-suave);
    font-size: .9375rem;
}
.aviso--claro {
    border-left-color: var(--dourado-claro);
    color: rgba(255, 255, 255, .88);
}
.aviso[hidden] { display: none; }

/* ═══════════════════════════ CABEÇALHO ═══════════════════════════ */

.cabecalho {
    border-bottom: 1px solid var(--linha);
    background: var(--marfim);
}

.cabecalho__interior {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding-block: 1.25rem;
}

/* A logo é quase quadrada (527×473), não uma faixa horizontal: a mesma altura
   que daria presença a um logotipo deitado deixa este pequeno, porque não
   ganha largura nenhuma em troca. Daí a altura generosa. */
.cabecalho__logo {
    width: auto;
    height: clamp(56px, 6vw, 76px);
    flex: 0 0 auto;
}

.cabecalho__nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-right: auto;          /* empurra as ações para a direita */
}

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}

/* ═════════════════════════════ HERO ═════════════════════════════ */

.hero__interior {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6.5rem);
}

.hero__sobrancelha {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
    color: var(--tinta-suave);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hero__titulo {
    font-family: var(--serifada);
    /* O mínimo é 2.5rem e não mais: em 320px de largura, "Transformar." em
       serifada já ocupa a coluna inteira. Acima disso a palavra transbordaria
       a caixa em vez de quebrar — não há onde quebrar uma palavra só. */
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 400;
    line-height: .97;
    letter-spacing: -.02em;
}
.hero__linha { display: block; }
.hero__linha--azul { color: var(--azul); }

.hero__resumo {
    max-width: 30rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--tinta-suave);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ── Composição fotográfica ──
   Quatro faixas verticais de alturas e alinhamentos diferentes: é o desencontro
   entre elas que produz a assimetria, não uma rotação ou uma sombra.

   Hoje há uma fotografia da casa, recortada em dois enquadramentos distintos
   (o portal e a palmeira), e dois blocos cromáticos. Quando houver fotografia
   própria de outras linguagens — artes visuais, dança, teatro —, troque o
   `background-image` de `--azul` e `--ouro` pelos novos arquivos em
   `assets/img/site/` e a composição passa a ser inteiramente fotográfica sem
   mudar uma linha de HTML. */
/* A faixa da fachada é larga e a composição é mais baixa do que alta por uma
   razão só: numa coluna estreita e muito alta, o `cover` corta as laterais até
   sobrar um retângulo de vidro que não se reconhece como entrada de prédio.
   A proporção da faixa e a do recorte em `assets/img/site/` andam juntas —
   mexer nestes números pede regerar o arquivo. */
.hero__composicao {
    display: grid;
    grid-template-columns: .45fr 1.9fr .85fr .35fr;
    gap: clamp(.5rem, 1.2vw, .875rem);
    height: clamp(300px, 36vw, 460px);
}

.hero__faixa {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Desce abaixo da linha de base das fotografias, em vez de terminar junto com
   elas. É o desencontro que dá o ar de composição montada à mão — alinhado ao
   rodapé das fotos, o bloco vira só mais uma coluna de uma grade. Deslocado
   por `transform`, não por margem: assim o desalinhamento é puramente visual e
   não empurra a altura da composição. */
.hero__faixa--azul   { align-self: end;    height: 58%; background-color: var(--azul-vivo);
                       transform: translateY(20%); }
/* Enquadra a porta de vidro com os violões ao fundo, não a placa: a faixa é
   estreita demais para a placa caber inteira, e placa cortada no meio de uma
   palavra lê-se como defeito. A fachada completa, com o nome legível, é o que
   a seção "A Escola" mostra — aqui é um fragmento, e fragmento de instrumento
   diz mais do que fragmento de letreiro. */
/* 35% na vertical: onde a faixa fica menos alta do que o recorte (tablet e
   celular), o `cover` corta em cima e em baixo, e é o letreiro com as portas
   que precisa sobreviver ao corte — não o chão nem o céu. */
.hero__faixa--portal { align-self: stretch; height: 100%;
                       background-image: url('../../assets/img/site/fachada-portal.webp');
                       background-position: center 35%; }
/* O recorte tem proporção quase igual à da faixa (240×600, ~0,40), de forma
   que o `cover` mal precise cortar: entra a parede superior com a pincelada
   amarela, e não só as folhas da palmeira ampliadas. Recorte e faixa andam
   juntos — mudar a largura de uma coluna do hero pede rever o outro. */
.hero__faixa--patio  { align-self: start;  height: 76%;
                       background-image: url('../../assets/img/site/fachada-patio.webp');
                       background-position: center; }
.hero__faixa--ouro   { align-self: center; height: 34%; background-color: var(--dourado-claro); }

/* ═══════════════════════ CURSOS EM DESTAQUE ═══════════════════════ */

.catalogo { padding-block: var(--respiro-secao); }

.catalogo__cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.catalogo__titulo {
    font-family: var(--serifada);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.015em;
}

.catalogo__subtitulo {
    max-width: 30rem;
    margin-top: .875rem;
    color: var(--tinta-suave);
    font-size: 1rem;
}

.catalogo__lista { border-top: 1px solid var(--linha); }

/* ── Caixa com rolagem ──
   Todas as linhas estão no DOM; é a altura que decide quantas se veem. O corte
   cai no meio da quinta linha de propósito: meia linha visível é o que avisa
   que o catálogo continua abaixo. Barra de rolagem sozinha não avisa nada —
   em trackpad ela só aparece durante o gesto, e quem nunca gesticula ali nunca
   descobre que há mais.

   `overscroll-behavior: contain` impede que chegar ao fim da caixa empurre a
   página inteira, que é o comportamento que faz a pessoa perder o lugar. */
.catalogo__lista--rolavel {
    /* Valor de partida apenas. Quem manda é o `max-height` que a UI escreve em
       linha depois de medir as linhas reais — a altura de uma linha depende do
       tamanho da ementa, e um número fixo aqui mostraria sete cursos numa
       escola e dois e meio noutra. */
    max-height: 23.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Se a barra é sobreposta ou ocupa espaço, quem decide é o sistema
       operativo — no Windows ela é permanente e larga, no macOS aparece só
       durante o gesto. Por isso o aviso de que há mais catálogo não pode
       depender dela: é a meia linha cortada na base que cumpre esse papel em
       toda parte. `stable` reserva a calha onde a barra é permanente, para a
       lista não mudar de largura ao passar por "Ver todos". */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 24, 28, .32) transparent;
}

.catalogo__lista--rolavel:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 4px;
}

/* Navegadores que ainda não seguem `scrollbar-color`. */
.catalogo__lista--rolavel::-webkit-scrollbar { width: 5px; }
.catalogo__lista--rolavel::-webkit-scrollbar-track { background: transparent; }
.catalogo__lista--rolavel::-webkit-scrollbar-thumb { background: rgba(22, 24, 28, .32); }

/* ── A linha do catálogo ──
   Flex e não grid: a miniatura é opcional e a informação complementar tem
   largura variável. Numa grade de colunas fixas, curso sem imagem deixaria uma
   coluna vazia e o texto começaria desalinhado dos vizinhos.

   `align-items: baseline` é o que faz o número grande sentar na mesma linha de
   base do nome — é dessa coincidência que vem a aparência de catálogo
   impresso. */
.curso {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-block: clamp(1.25rem, 2.5vw, 1.875rem);
    border-bottom: 1px solid var(--linha);
}

.curso__miniatura {
    flex: 0 0 112px;
    width: 112px;
    height: 72px;
    align-self: center;
    object-fit: cover;
    background: var(--linha);
}

.curso__numero {
    flex: 0 0 auto;
    min-width: 2.75ch;
    color: var(--dourado);
    font-family: var(--serifada);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.curso__corpo { flex: 1 1 20rem; min-width: 0; }

.curso__nome {
    font-family: var(--serifada);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 400;
    line-height: 1.15;
}

.curso__ementa {
    margin-top: .375rem;
    max-width: 38rem;
    color: var(--tinta-suave);
    font-size: .9375rem;
}

.curso__complemento {
    flex: 0 1 15.5rem;
    color: var(--tinta-suave);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: right;
}

/* Marca tipográfica, não botão: não há página de curso para onde ir, e uma
   seta que muda de cor ao passar o rato prometeria um clique inexistente. */
.curso__marca {
    flex: 0 0 auto;
    color: var(--linha);
    font-size: 1.25rem;
}

/* ── Estados ── */
.curso--esqueleto { border-bottom-color: var(--linha); }
.curso--esqueleto .curso__corpo { display: grid; gap: .625rem; }

.curso__barra {
    display: block;
    height: .75rem;
    background: var(--linha);
    opacity: .5;
    animation: pulsar 1.4s ease-in-out infinite;
}
.curso__barra--titulo { height: 1.25rem; width: 45%; }
.curso__barra:not(.curso__barra--titulo) { width: 72%; }

@keyframes pulsar { 50% { opacity: .22; } }

.curso--aviso {
    justify-content: flex-start;
    color: var(--tinta-suave);
    font-size: .9375rem;
}

/* ═══════════════════════ BLOCO INSTITUCIONAL ═══════════════════════ */

.escola {
    display: grid;
    grid-template-columns: .8fr 1fr 1.1fr;
    align-items: stretch;
}

.escola__lema {
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 5vw, 4rem);
    background: var(--dourado-claro);
}

.escola__frase {
    color: var(--tinta);        /* 10:1 sobre o amarelo — nunca branco aqui */
    font-family: var(--serifada);
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}

.escola__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4rem);
    background: var(--marfim-claro);
}

.escola__titulo {
    font-family: var(--serifada);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
}

.escola__resumo {
    max-width: 26rem;
    margin-top: 1.125rem;
    color: var(--tinta-suave);
    font-size: 1rem;
}

.escola__foto { position: relative; overflow: hidden; }

.escola__foto img {
    width: 100%;
    height: 100%;
    min-height: clamp(260px, 30vw, 420px);
    object-fit: cover;
    object-position: center 45%;
}

/* Véu azul discreto, para a fotografia pertencer à paleta sem perder o prédio.
   `multiply` a 22% escurece as sombras e tinge a parede; a placa azul e a
   pincelada amarela continuam legíveis. */
.escola__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--azul);
    mix-blend-mode: multiply;
    opacity: .22;
    pointer-events: none;
}

/* ═════════════════════════ CHAMADA FINAL ═════════════════════════ */

.chamada {
    background: var(--azul);
    color: #fff;
}

.chamada__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
}

.chamada__titulo {
    flex: 1 1 24rem;
    color: #fff;                /* fixo: o token de texto seguiria o marfim */
    font-family: var(--serifada);
    font-size: clamp(1.875rem, 4.4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
}

.chamada__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    flex: 0 1 auto;
}

.chamada .aviso { flex: 1 1 100%; }

/* ═══════════════════════════════ RODAPÉ ═══════════════════════════════ */

.rodape {
    background: var(--marinho);
    color: rgba(255, 255, 255, .78);
}

.rodape__interior {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* A logo entra como está: fundo transparente, sem placa nem caixa por baixo.
   Chegou a ter uma placa marfim aqui, por causa do "Som na Leste" em
   azul-escuro sobre o marinho do rodapé — mas o retângulo claro no canto do
   rodapé lia-se como adesivo colado, e o selo tem borda dourada e as casinhas
   coloridas, que se sustentam sozinhas sobre fundo escuro. */
.rodape__logo { height: 88px; width: auto; }

.rodape__descricao {
    margin-top: 1rem;
    max-width: 18rem;
    font-size: .8125rem;
    letter-spacing: .04em;
}

.rodape__contatos { display: grid; gap: .875rem; }
.rodape__contatos[hidden] { display: none; }

.rodape__rotulo {
    color: rgba(255, 255, 255, .55);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rodape__valor {
    margin: .1875rem 0 0;
    color: #fff;
    font-size: .9375rem;
}

.rodape__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

/* Assinatura da plataforma: presente, discreta, e nunca do tamanho da marca da
   escola — quem assina a página é o CMACE. */
.rodape__assinatura {
    grid-column: 1 / -1;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--linha-clara);
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
    letter-spacing: .08em;
}

/* ═══════════════════════════ RESPONSIVO ═══════════════════════════ */

/* ── Tablet ──
   O hero passa a uma coluna e a composição fotográfica vai para baixo do
   texto, deitada. O bloco institucional quebra em duas linhas: lema e texto
   lado a lado, fotografia atravessando por baixo. */
@media (max-width: 960px) {

    .hero__interior {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 3rem);
    }

    /* Mais alta e com a faixa da fachada mais estreita do que no desktop: aqui
       a composição ocupa a largura inteira, e sem isto as faixas ficariam
       deitadas — o recorte é vertical e o corte comeria o letreiro. */
    .hero__composicao {
        height: clamp(280px, 44vw, 400px);
        grid-template-columns: .45fr 1.2fr .9fr .3fr;
    }

    .pauta--hero { width: min(280px, 60%); }

    .escola { grid-template-columns: 1fr 1fr; }
    .escola__foto { grid-column: 1 / -1; grid-row: 2; }
    .escola__foto img { min-height: clamp(240px, 34vw, 340px); }

    .rodape__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rodape__nav {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .25rem 1.5rem;
    }
}

/* ── Cabeçalho estreito ──
   A navegação desce para uma segunda linha em vez de virar menu sanfonado: são
   três links, e escondê-los atrás de um botão custaria um clique e um script
   para não ganhar nada. */
@media (max-width: 860px) {

    .cabecalho__interior {
        flex-wrap: wrap;
        gap: .75rem 1.5rem;
        padding-block: 1rem;
    }

    .cabecalho__logo { height: 56px; margin-right: auto; }

    .cabecalho__nav {
        order: 3;
        width: 100%;
        margin-right: 0;
        padding-top: .75rem;
        border-top: 1px solid var(--linha);
        gap: 1.5rem;
        justify-content: flex-start;
    }

    .cabecalho__acoes { order: 2; }
}

/* ── Celular ──
   O que sai é decoração; o que fica é hierarquia. O título continua grande,
   os botões ocupam a largura toda e a listagem de cursos vira três linhas
   empilhadas por curso. */
@media (max-width: 640px) {

    .hero__interior { padding-block: 2.5rem 3rem; }

    .hero__acoes { flex-direction: column; align-items: stretch; }
    .hero__acoes .botao { width: 100%; }

    .hero__composicao {
        height: 250px;
        /* O bloco azul sai: é o único elemento sem informação nenhuma, e o
           espaço vale mais para as duas fotografias. */
        grid-template-columns: 1.25fr 1fr .35fr;
    }
    .hero__faixa--azul { display: none; }

    .pauta--hero { width: 200px; margin-top: 1.75rem; }
    .pauta--escola { width: 150px; }
    /* Volta ao fluxo: em coluna, os botões ocupam a largura toda e a pauta
       absoluta cairia por cima do último deles. */
    .pauta--chamada {
        position: static;
        width: 200px;
        margin-top: 1.75rem;
    }

    .catalogo__cabecalho { flex-direction: column; align-items: flex-start; gap: 1rem; }

    .curso {
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem .875rem;
        padding-block: 1.125rem;
    }
    .curso__miniatura { flex: 0 0 64px; width: 64px; height: 44px; }
    .curso__numero { font-size: 1.125rem; min-width: 2.25ch; align-self: center; }
    .curso__corpo { flex: 1 1 60%; }
    .curso__complemento { flex: 1 1 100%; text-align: left; font-size: .75rem; }
    /* Decorativa e sem espaço: some sem levar informação junto. */
    .curso__marca { display: none; }

    .escola { grid-template-columns: minmax(0, 1fr); }
    .escola__foto { grid-row: auto; }
    .escola__foto img { min-height: 220px; }

    .chamada__interior { flex-direction: column; align-items: flex-start; }
    /* Em coluna, o `flex-grow` que dá ao título a coluna esquerda no desktop
       passa a esticá-lo na vertical — abria um vão vazio entre a pergunta e os
       botões, do tamanho de meia tela. */
    .chamada__titulo { flex: 0 0 auto; }
    .chamada__acoes { width: 100%; flex-direction: column; align-items: stretch; }
    .chamada__acoes .botao { width: 100%; }

    .rodape__interior { grid-template-columns: minmax(0, 1fr); }
}

/* ── Telas muito estreitas (≤360px) ── */
@media (max-width: 380px) {
    .cabecalho__logo { height: 48px; }
    .botao--miudo { padding: .5rem .875rem; font-size: .8125rem; }
    .hero__composicao { height: 225px; grid-template-columns: 1.3fr 1fr; }
    .hero__faixa--ouro { display: none; }
}

/* ═══════════════════════ MOVIMENTO REDUZIDO ═══════════════════════ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .curso__barra { animation: none; }
    * { transition-duration: .01ms !important; }
}