/* =========================================================================
   SECTION — Hero
   Mobile-first: a estrutura base é a do celular; o desktop entra a partir
   de 1024px, onde a vitrine assume as três colunas da referência.
   ====================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    padding-top: clamp(2rem, 1.25rem + 2.4vw, 3.25rem);
    padding-bottom: clamp(3rem, 1.75rem + 5vw, 5.5rem);
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   Fundo — apenas a malha técnica (`.tech-grid`, em components) sobre branco,
   sem halos de cor. Toda a cor da seção vem dos elementos sólidos da marca.
   ---------------------------------------------------------------------- */
.hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Bloco de texto
   ---------------------------------------------------------------------- */
.hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

.hero__title {
    display: flex;
    flex-direction: column;
    /* Largura travada para manter as duas linhas equilibradas em telas largas. */
    max-width: 17ch;
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--color-text);
}

.hero__title-line {
    display: block;
}

/* Palavra destacada + sublinhado desenhado à mão. */
.hero__accent {
    position: relative;
    display: inline-block;
    color: var(--brand-500);
    white-space: nowrap;
}

.hero__underline {
    position: absolute;
    left: 0;
    bottom: -0.12em;
    width: 100%;
    height: 0.24em;
    color: var(--brand-300);
    overflow: visible;
}

.hero__underline path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* O traço só é desenhado quando o título entra em tela. */
.hero__title.is-revealed .hero__underline path,
.no-js .hero__underline path {
    animation: draw-stroke var(--dur-slower) var(--ease-out) 320ms forwards;
}

.hero__subtitle {
    max-width: var(--content-max);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 340px;
    margin-top: var(--space-2);
}

/* No celular o CTA ocupa a largura toda: alvo de toque generoso. */
.hero__actions .btn-pair {
    justify-content: center;
}

.hero__actions .btn-pair .btn {
    flex: 1;
}

/* -------------------------------------------------------------------------
   Portas de entrada — órgão público | empresa privada | concursos

   Vidro leve, e não os cards sólidos da vitrine: este bloco fica ENTRE os
   CTAs e o retrato, e qualquer peso a mais aqui roubaria a atenção do botão
   principal, que continua sendo a ação da tela. Alvo de toque de 56px de
   altura no celular, onde a lista é vertical.
   ---------------------------------------------------------------------- */
.hero__audiences {
    width: 100%;
    max-width: 340px;
    margin-top: var(--space-5);
}

.hero__audiences-label {
    margin-bottom: var(--space-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

.hero__audiences-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
}

.hero__audience {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--dur-base) var(--ease-spring),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.hero__audience:hover {
    transform: translateY(-2px);
    border-color: var(--brand-200);
    box-shadow: var(--shadow-md);
}

.hero__audience-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    aspect-ratio: 1;
    color: var(--brand-600);
    background-color: var(--brand-50);
    border-radius: var(--radius-sm);
}

.hero__audience-icon .icon {
    width: 18px;
    height: 18px;
}

.hero__audience-body {
    display: grid;
    gap: 1px;
    line-height: var(--lh-snug);
}

.hero__audience-body strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.hero__audience-body small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* A seta só entra quando há espaço: no celular ela competiria com o texto
   dentro de uma caixa de 340px. */
.hero__audience-arrow {
    display: none;
    flex: none;
    margin-left: auto;
    color: var(--ink-400);
    transition: transform var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

.hero__audience-arrow .icon {
    width: 16px;
    height: 16px;
}

.hero__audience:hover .hero__audience-arrow {
    transform: translate(2px, -2px);
    color: var(--brand-500);
}

/* -------------------------------------------------------------------------
   Vitrine — retrato, cards laterais e métricas
   ---------------------------------------------------------------------- */
.hero__showcase {
    display: grid;
    gap: var(--space-6);
    margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
}

/* Abaixo do desktop a leitura é vertical e a ordem do HTML (que existe para
   colocar o retrato no centro das três colunas) não serve: o retrato tem de
   vir primeiro, seguido pelos números e só então pelas provas sociais. */
@media (max-width: 1023px) {
    .hero__figure   { order: 1; }
    .hero__metrics  { order: 2; }
    .hero__aside--right { order: 3; }
    .hero__aside--left  { order: 4; }

    /* O número desta coluna já aparece na faixa de métricas. */
    .hero__aside--left .hero__stat {
        display: none;
    }
}

/* Retrato sobre o arco vermelho (assinatura da referência).
   A geometria é governada pela ALTURA: o retrato é de corpo inteiro
   (proporção ~1:2,9), então é a altura que define a presença dele na
   composição — o arco fica mais estreito e a figura o ultrapassa em cima,
   exatamente como no layout de referência. */
.hero__figure {
    position: relative;
    display: grid;
    place-items: end center;
    width: 100%;
    max-width: 460px;
    height: clamp(380px, 108vw, 520px);
    margin-inline: auto;
}

.hero__arc {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* Domo largo e baixo, com a cabeça acima da curva — é essa relação
       figura/fundo que a referência usa. No celular fica contido na coluna
       para não encostar nas bordas da tela. */
    width: min(100%, 340px);
    height: 56%;
    background-color: var(--brand-500);
    border-radius: 50% 50% var(--radius-2xl) var(--radius-2xl) / 42% 42% var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    transform: translateX(-50%);
}

.hero__portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2xl);
}

.hero__portrait img {
    object-fit: contain;
    object-position: bottom center;
    /* Sombra que acompanha o recorte do PNG, não a caixa da imagem.
       O raio é curto de propósito: drop-shadow sobre imagem com canal alfa
       é caro de pintar, e num celular um blur grande atrasa visivelmente
       o primeiro desenho da foto. */
    filter: drop-shadow(0 10px 16px rgba(20, 16, 15, 0.20));
}

/* Enquanto o retrato definitivo não chega, o marcador fica translúcido
   para não esconder o arco da marca que está atrás dele. */
.hero__portrait.is-empty .media-slot__fallback {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

.hero__portrait.is-empty .media-slot__fallback small {
    color: rgba(255, 255, 255, 0.7);
}

/* Ícones em órbita — flutuam e reagem ao mouse (parallax). */
.hero__orbit {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(40px, 9vw, 52px);
    aspect-ratio: 1;
    color: var(--brand-600);
    background-color: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: float-soft 6s var(--ease-in-out) infinite;
    /* O parallax escreve --px/--py; a flutuação continua no keyframe. */
    translate: var(--px, 0) var(--py, 0);
}

/* No celular os ícones ficam dentro da caixa do retrato; no desktop podem
   avançar para fora, ganhando o ar de composição solta da referência. */
.hero__orbit--1 { top: 14%;   left: 0;   animation-delay: 0s; }
.hero__orbit--2 { top: 5%;    right: 0;  animation-delay: 1.2s; }
.hero__orbit--3 { bottom: 30%; left: 0;  animation-delay: 2.4s; }
.hero__orbit--4 { bottom: 16%; right: 0; animation-delay: 3.6s; }

/* Cards laterais em vidro. */
.hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.hero__quote {
    position: relative;
    display: grid;
    gap: var(--space-2);
}

.hero__quote-mark {
    font-size: 2.5rem;
    font-weight: var(--fw-bold);
    line-height: 0.6;
    color: var(--brand-200);
}

.hero__quote blockquote {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.hero__quote figcaption {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

.hero__stat {
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.hero__stat-value {
    font-family: var(--font-numeric);
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-tighter);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.hero__stat-label {
    max-width: 22ch;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

/* Avaliação. */
.hero__rating {
    display: flex;
    gap: 2px;
    color: #F5A623;
}

.hero__star .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke-width: 1;
}

.hero__review {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.hero__reviewer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.hero__avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
}

.hero__reviewer-info {
    display: grid;
    line-height: var(--lh-snug);
}

.hero__reviewer-info strong {
    font-size: var(--fs-sm);
}

.hero__reviewer-info small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Métricas — versão condensada dos cards laterais, exibida até o desktop.
   Três colunas fixas: nada cortado na borda da tela, sem rolagem lateral. */
.hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.hero__metric {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.hero__metric-value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}

.hero__metric-label {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

/* =========================================================================
   Destaques — "em alta agora", entre os CTAs e as portas de entrada

   POR QUE ELE NÃO TEM MOLDURA PRÓPRIA
   -------------------------------------------------------------------------
   Uma versão anterior deste bloco vivia acima do título, com fundo branco e
   uma linha fina embaixo — uma prateleira. Ali a moldura era necessária, para
   ele não se misturar à composição. Aqui ela seria o contrário: o bloco ESTÁ
   dentro da composição, e uma caixa em volta o faria parecer um anúncio colado
   no meio do hero.

   Então ele não tem fundo, não tem borda e não tem canto: tem um rótulo
   discreto em cima, os cartões no meio e os controles embaixo, os três no
   mesmo eixo central do badge, do título, do subtítulo e dos botões.

   A HIERARQUIA CONTRA O BLOCO DE BAIXO
   -------------------------------------------------------------------------
   Logo abaixo vêm as três portas de entrada, que também são cartões. Dois
   blocos de cartões do mesmo peso, um debaixo do outro, viram ruído — então a
   diferença de escala é deliberada: aqui, cartão alto com marca vermelha de
   88px, título em `--fs-md` e fichas; ali, linha discreta de 56px com ícone
   em tom claro.

   O TRILHO É ROLAGEM NATIVA, E ISSO É A DECISÃO CENTRAL
   -------------------------------------------------------------------------
   Nada de `transform: translateX()` comandado por JavaScript. O trilho é um
   `overflow-x: auto` com `scroll-snap`, e o resultado disso não é economia de
   código — é comportamento que nenhum carrossel artesanal entrega:

     · o arrasto no celular tem a INÉRCIA do sistema operacional, com a curva
       de desaceleração do aparelho, e não uma aproximação escrita à mão;
     · o trackpad de dois dedos, a roda horizontal e o gesto de voltar do
       navegador continuam funcionando;
     · o teclado rola a região sozinho, e o navegador leva o cartão focado para
       dentro da área visível sem que ninguém peça;
     · com o JavaScript desligado, o trilho continua sendo uma lista que rola.
       Um carrossel de `transform` sem script é uma lista cortada na primeira
       peça.

   O JavaScript aqui só ACRESCENTA: setas, avanço automático e as marcas de
   progresso. Tirá-lo degrada, não quebra.

   POR QUE A IMAGEM NUNCA É O CARTÃO
   -------------------------------------------------------------------------
   O pedido veio com um receio junto: "com imagens vai deixar o site muito
   feio". Ele tem fundamento — um carrossel de fotos na primeira dobra depende
   de arte consistente, e arte inconsistente aparece exatamente ali.

   Então a foto entra como MARCA quadrada, recortada, e o cartão é feito de
   tipografia. Sem imagem cadastrada, o mesmo quadrado recebe o ícone sobre o
   vermelho da marca: muda o conteúdo do quadrado, não a composição. É o que
   permite à cliente cadastrar um destaque em trinta segundos, sem pedir arte a
   ninguém, e a primeira dobra do site continuar de pé.
   ====================================================================== */
.hero__highlights {
    display: grid;
    gap: var(--space-3);
    /* `.hero__intro` centraliza os filhos (`align-items: center`), e sem isto o
       bloco encolheria até a largura do conteúdo dele — o trilho precisa da
       coluna inteira para saber o que cabe e o que transborda. */
    align-self: stretch;
    width: 100%;
    margin-top: var(--space-2);
}

.hero__highlights-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

/* O mesmo ponto pulsante do selo do topo (`.badge__dot`). Repetido aqui, e não
   reaproveitado por classe, porque são dois contextos com tamanhos próprios —
   e porque o dia em que o selo mudar, este não deve mudar junto. */
.hero__highlights-pulse {
    position: relative;
    width: 6px;
    height: 6px;
    flex: none;
    background-color: var(--brand-500);
    border-radius: 50%;
}

.hero__highlights-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-500);
    border-radius: 50%;
    animation: pulse-ring 2.4s var(--ease-out) infinite;
}

/* -------------------------------------------------------------------------
   Controles — seta · marcas · seta, numa linha só, no eixo central

   Revelados pelo JS apenas quando o trilho transborda. Botão de rolar uma
   lista que já cabe inteira na tela é controle que não faz nada.
   ---------------------------------------------------------------------- */
.hero__highlights-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.hero__highlights-arrow {
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    color: var(--ink-600);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-spring),
        opacity var(--dur-fast) var(--ease-out);
}

.hero__highlights-arrow .icon {
    width: 16px;
    height: 16px;
}

.hero__highlights-arrow:hover {
    color: var(--brand-600);
    border-color: var(--brand-200);
    transform: scale(1.06);
}

/* Ponta do trilho: o botão continua no fluxo (nada salta de lugar quando o
   estado muda) e para de responder ao clique. */
.hero__highlights-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Marcas de progresso

   Traços, e não bolinhas: são também os BOTÕES de cada página do trilho, e um
   traço de 18px é alvo de toque honesto onde um ponto de 8px não é. O alvo
   real tem 22px de altura — o traço fica no meio de uma área transparente.
   ---------------------------------------------------------------------- */
.hero__highlights-ticks {
    display: flex;
    gap: var(--space-1);
}

.hero__highlights-tick {
    display: grid;
    place-items: center;
    width: 24px;
    height: 22px;
    background: none;
    border: 0;
    cursor: pointer;
}

.hero__highlights-tick::before {
    content: "";
    width: 100%;
    height: 3px;
    background-color: var(--ink-200);
    border-radius: var(--radius-pill);
    transition:
        background-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-spring);
}

.hero__highlights-tick.is-active::before {
    background-color: var(--brand-500);
    transform: scaleY(1.34);
}

/* -------------------------------------------------------------------------
   O trilho

   A sangria lateral é o que faz o cartão seguinte APARECER cortado na borda da
   tela do celular. Sem ela o trilho termina no mesmo lugar que o resto do
   conteúdo, e nada na tela informa que há mais coisa à direita — a rolagem
   horizontal existe e ninguém a descobre.
   ---------------------------------------------------------------------- */
.hero__highlights-rail {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    overflow-x: auto;
    /* `proximity`, e não `mandatory`: com `mandatory` um arrasto curto é
       sempre desfeito pelo navegador, e no celular a pessoa sente que o trilho
       está preso. */
    scroll-snap-type: x proximity;
    /* Impede o gesto lateral de escapar para o "voltar" do navegador quando o
       trilho chega ao fim. */
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    /* Espaço vertical para três coisas que a caixa de rolagem cortaria: a
       sombra do cartão, o levantar de 3px do ponteiro e — a que mais importa —
       o anel de foco do teclado, que o site desenha 3px FORA do elemento
       (`:focus-visible` em base.css). Sem esta folga, quem navega por Tab vê
       meio anel. */
    padding-block: 6px var(--space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* A barra de rolagem some porque a borrada do cartão seguinte e as marcas de
   progresso já dizem que há mais conteúdo — e porque uma barra cinza atravessada
   sob a faixa é a peça mais feia que este bloco poderia ter. */
.hero__highlights-rail::-webkit-scrollbar {
    display: none;
}

.hero__highlights-item {
    /* Não encolhe: quando os destaques não cabem, o trilho rola — nunca
       espreme os cartões até o texto quebrar. */
    flex: 0 0 auto;
    width: min(84vw, 380px);
    scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
   O cartão

   Duas faixas separadas por uma linha: em cima a identidade (marca, etiqueta,
   título, chamada); embaixo os detalhes que vêm do curso vinculado e a ação.
   O rodapé é empurrado para o fim por `margin-top: auto`, então cartões de
   alturas de texto diferentes terminam alinhados — que é a única forma de uma
   fileira de cartões não parecer torta.
   ---------------------------------------------------------------------- */
.highlight-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-4);
    /* `.hero__intro` centraliza o texto de tudo que está dentro dele. O cartão
       é o único bloco daquela coluna que se lê da esquerda para a direita —
       título centralizado sobre uma marca alinhada à esquerda é o tipo de
       desalinho que ninguém sabe nomear e todo mundo percebe. */
    text-align: left;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--dur-base) var(--ease-spring),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.highlight-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-200);
    box-shadow: var(--shadow-md);
}

.highlight-card__topo {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Vermelho CLARO, e não sólido.
   ------------------------------------------------------------------------
   A primeira versão usava `--brand-500` cheio. Quatro quadrados vermelhos de
   88px numa fileira, no meio de uma composição que já tem o botão principal
   vermelho logo acima e o arco vermelho logo abaixo, saturam a dobra inteira —
   e "chamar atenção" deixa de funcionar quando tudo grita junto.

   O tom claro com o ícone escuro é exatamente o tratamento que as três portas
   de entrada logo abaixo já usam (`.hero__audience-icon`). Repetir aquela
   fórmula não é falta de ideia: é o que faz os dois blocos parecerem do mesmo
   site. O vermelho forte deste cartão fica onde ele decide alguma coisa — na
   etiqueta e no "Ver curso". */
.highlight-card__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 76px;
    aspect-ratio: 1;
    overflow: hidden;
    color: var(--brand-600);
    background-color: var(--brand-50);
    border-radius: var(--radius-lg);
}

.highlight-card__mark .icon {
    width: 30px;
    height: 30px;
}

.highlight-card__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight-card__body {
    display: grid;
    gap: 4px;
    /* `min-width: 0` num filho de flex é o que autoriza o texto a ser cortado
       em vez de esticar a caixa: sem ele, um título longo alarga o cartão e a
       reticência nunca aparece. */
    min-width: 0;
}

.highlight-card__tag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand-600);
}

/* Duas linhas, e não uma: cabe o nome inteiro da maioria dos cursos ("Pregão
   eletrônico e sessão pública na prática"), que numa linha só sairia cortado
   justamente no assunto. */
.highlight-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Uma linha, cortada com reticências. Duas linhas custam 18px em cima do H1 —
   e a linha de apoio é data, cidade e formato: quem escreve já põe o que
   importa na frente. */
.highlight-card__meta {
    overflow: hidden;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highlight-card__pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    /* Cola no fim do cartão: é o que alinha os rodapés de uma fileira inteira,
       independentemente de o título de cada um ter uma ou duas linhas. */
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.highlight-card__fichas {
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    overflow: hidden;
}

.highlight-card__ficha {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.highlight-card__ficha .icon {
    flex: none;
    color: var(--ink-400);
}

.highlight-card__go {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 4px;
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--brand-600);
    white-space: nowrap;
    transition: gap var(--dur-base) var(--ease-out);
}

.highlight-card__go .icon {
    width: 14px;
    height: 14px;
}

.highlight-card:hover .highlight-card__go {
    gap: 8px;
}

/* -------------------------------------------------------------------------
   Prova social
   ---------------------------------------------------------------------- */
.hero__trust {
    margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

/* Tablet — CTAs lado a lado. */
@media (min-width: 600px) {
    .hero__actions {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }

    .hero__actions .btn-pair .btn {
        flex: none;
    }

    /* As três portas lado a lado — a comparação entre elas é o ponto, e
       empilhadas o visitante lê a primeira e para. */
    .hero__audiences {
        max-width: 840px;
        text-align: center;
    }

    .hero__audiences-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .hero__audience {
        height: 100%;
    }

    .hero__audience-arrow {
        display: block;
    }
}

@media (min-width: 768px) {
    .hero__showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    /* O retrato ocupa a linha inteira acima dos cards. */
    .hero__figure {
        grid-column: 1 / -1;
    }

    .hero__metrics {
        grid-column: 1 / -1;
        gap: var(--space-4);
    }

    .hero__metric {
        padding: var(--space-4);
    }

}

/* Desktop — composição em três colunas da referência:
   card | retrato | card, com os cards avançando sobre o arco. */
@media (min-width: 1024px) {
    .hero__showcase {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 1.35fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(1rem, -1rem + 4vw, 2.5rem);
        margin-top: clamp(1rem, -1rem + 4vw, 2rem);
    }

    .hero__figure {
        grid-column: 2;
        grid-row: 1;
        max-width: 460px;
        height: clamp(520px, 44vw, 660px);
    }

    /* A vitrine inteira entra na mesma dobra: o escalonamento das entradas
       só existe aqui. Abaixo do desktop cada bloco aparece sozinho durante a
       rolagem, e qualquer atraso viraria espera. */
    .hero__aside--left  { --delay: 260ms; }
    .hero__aside--right { --delay: 300ms; }
    .hero__trust        { --delay: 160ms; }

    .hero__portrait img {
        filter: drop-shadow(0 24px 40px rgba(20, 16, 15, 0.22));
    }

    /* No desktop há espaço lateral: o domo transborda a coluna e os ícones
       flutuam para fora, soltando a composição. */
    .hero__arc {
        width: min(124%, 540px);
    }

    .hero__orbit--1 { left: -6%; }
    .hero__orbit--2 { right: -4%; }
    .hero__orbit--3 { left: -9%; }
    .hero__orbit--4 { right: -7%; }

    .hero__aside {
        grid-row: 1;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-color: transparent;
        box-shadow: none;
        padding: 0;
    }

    .hero__aside--left {
        grid-column: 1;
        justify-self: start;
        max-width: 300px;
        /* Alinha o bloco com a curva do arco, como no layout de referência. */
        margin-bottom: clamp(0rem, -4rem + 8vw, 4rem);
    }

    .hero__aside--right {
        grid-column: 3;
        justify-self: end;
        max-width: 300px;
        text-align: left;
        margin-bottom: clamp(0rem, -6rem + 10vw, 6rem);
    }

    .hero__stat,
    .hero__reviewer {
        border-top-color: var(--color-border);
    }

    /* As métricas são a versão condensada dos cards: só no mobile/tablet. */
    .hero__metrics {
        display: none;
    }

    /* -------------------------------------------------------------------
       Os destaques no computador

       Marca maior, cartões que crescem para preencher a linha e sangria
       trocada por uma folga mínima: aqui há margem de sobra dentro do
       container, e um cartão cortado na borda da JANELA — longe do conteúdo —
       pareceria defeito de layout em vez de convite a rolar.
       ---------------------------------------------------------------- */
    .hero__highlights-rail {
        /* 4px, e não zero: é a folga do anel de foco do teclado. A margem
           negativa devolve o alinhamento com o rótulo acima — a faixa continua
           começando na coluna do container. */
        padding-inline: 4px;
        margin-inline: -4px;
        scroll-padding-inline: 4px;
    }

    /* Crescem para fechar a linha quando são poucos, e viram trilho quando são
       muitos — sem mudar de tamanho entre um caso e outro mais do que o
       necessário. O teto existe para dois destaques não virarem dois cartazes. */
    .hero__highlights-item {
        flex: 1 0 340px;
        width: auto;
        max-width: 440px;
    }

    .highlight-card__mark {
        width: 88px;
    }

    .highlight-card__mark .icon {
        width: 34px;
        height: 34px;
    }

}

@media (min-width: 1440px) {
    .hero__figure {
        max-width: 500px;
        height: 680px;
    }

    .hero__aside--left,
    .hero__aside--right {
        max-width: 320px;
    }
}

/* Sem suporte a backdrop-filter: superfícies sólidas equivalentes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* A faixa de destaques ficou de fora desta lista de propósito: o cartão e
       as setas dela são superfície SÓLIDA (`--color-surface`), e não vidro —
       ela tem fundo branco próprio, e vidro sobre branco não borra nada. */
    .hero__aside,
    .hero__metric,
    .hero__orbit {
        background-color: rgba(255, 255, 255, 0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__orbit,
    .hero__highlights-pulse::after {
        animation: none;
    }

    /* O avanço automático do carrossel já é desligado no JavaScript. Isto aqui
       cobre o que sobra: o `scroll-behavior: smooth` que as setas e as marcas
       de progresso aplicam, e que é movimento tanto quanto o resto. */
    .hero__highlights-rail {
        scroll-behavior: auto;
    }

    .hero__underline path {
        stroke-dashoffset: 0;
    }
}