/* ==========================================================================
   Componentes reutilizáveis — servem a todas as páginas do site.
   Depende de tokens.css e base.css.
   ========================================================================== */

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--sp-3) var(--sp-6);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  background: var(--us-orange);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover {
  background: var(--us-orange-dark);
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  width: 1.15em;
  height: 1.15em;
}

/* Contornado. O default segue --color-link, que em superfície escura vira o
   Light Brand Orange — assim o contorno nunca cai abaixo de AA. */
.btn--outline {
  --btn-color: var(--color-link);
  color: var(--btn-color);
  background: transparent;
  border-color: var(--btn-color);
}

/**
 * O rótulo no hover: o fundo passa a ser --btn-color, então o texto precisa
 * contrastar com ELE, e não com a faixa atrás.
 *
 * Era `color: var(--white)` fixo, e nas faixas coloridas (.media-block--blue,
 * --green e --orange) o --color-link é branco — o hover dava branco sobre branco e o
 * botão virava um retângulo vazio. Foi o que aconteceu no CTA "Conheça a CLESAM Vet".
 *
 * O branco é FALLBACK do var(), e não uma declaração em .btn--outline. Se fosse
 * declarado no próprio botão, a declaração local venceria o valor herdado da faixa e
 * o override não funcionaria — foi exatamente o erro da primeira tentativa de
 * conserto. Custom property declarada no elemento ganha da herdada.
 */
.btn--outline:hover {
  color: var(--btn-color-rotulo-hover, var(--white));
  background: var(--btn-color);
}

/* Neutro claro, usado no "Ambiente Acadêmico" do header */
.btn--quiet {
  color: var(--color-text);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  background: var(--white);
  border-color: var(--color-border-strong);
}

.btn--quiet:hover {
  color: var(--us-blue);
  background: var(--gray-100);
  border-color: var(--gray-400);
}

/* Contorno neutro: a mesma caixa do --outline em cinza, como as âncoras e os
   links de unidade nos frames das páginas de unidade. */
.btn--muted {
  --btn-color: var(--color-text-muted);
}

/* Preenchido com gradiente da modalidade (ver .is-* abaixo) */
.btn--gradient {
  --btn-from: var(--us-orange);
  --btn-to: var(--us-yellow);
  background-image: linear-gradient(90deg, var(--btn-from), var(--btn-to));
  background-color: var(--btn-from);
}

.btn--gradient:hover {
  background-image: linear-gradient(90deg, var(--btn-to), var(--btn-from));
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: 3.25rem;
  padding-inline: var(--sp-8);
  font-size: var(--fs-md);
}

/* Paletas por modalidade — aplicáveis a botões, badges e barras de card */
.is-presencial {
  --c: var(--us-orange);
  --c-light: var(--us-yellow);
}

.is-digital {
  --c: var(--us-purple);
  --c-light: var(--us-purple-light);
}

.is-semipresencial {
  --c: var(--us-green);
  --c-light: var(--us-green-light);
}

/* Só para badges: "Presencial" da Pós no drawer mobile sai em sky no frame. */
.is-sky {
  --c: var(--us-sky);
  --c-light: var(--us-sky);
}

.is-presencial .btn--gradient,
.is-digital .btn--gradient,
.is-semipresencial .btn--gradient,
.btn--gradient.is-presencial,
.btn--gradient.is-digital,
.btn--gradient.is-semipresencial {
  --btn-from: var(--c);
  --btn-to: var(--c-light);
}

/* ==========================================================================
   Link com seta ("Saiba Mais →")
   ========================================================================== */

.link-arrow {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--color-link);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  transition: gap var(--dur) var(--ease);
}

.link-arrow .icon {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 1.5;
}

.link-arrow:hover {
  gap: var(--sp-4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem var(--sp-3);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentcolor;
  border-radius: var(--radius-sm);
}

/* Contornado, texto na cor da borda */
.badge--outline {
  color: var(--c, var(--us-orange));
  background: transparent;
}

/* Preenchido */
.badge--solid {
  color: var(--white);
  background: var(--c, var(--us-orange));
  border-color: transparent;
}

/* Sobre imagem escura */
.badge--onDark {
  color: var(--white);
  background: transparent;
  border-color: var(--white);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.card__media {
  position: relative;
  aspect-ratio: 364 / 130;
  background: var(--gray-200);
}

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

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

/* Empurra o link/CTA para o rodapé do card, alinhando entre irmãos */
.card__footer {
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* Variante em fundo escuro (seção Pesquisa e Inovação) */
.card--dark {
  --color-link: var(--us-orange-light);
  color: var(--gray-200);
  background: var(--gray-800);
  box-shadow: none;
}

.card--dark .card__title {
  color: var(--white);
}

.card--dark .card__text {
  color: var(--gray-300);
}

/* Barra colorida no topo (cards de curso) */
.card--barred {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--c) 0%, var(--c) 45%, var(--c-light) 100%) 1;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs {
  container-type: inline-size;
}

/**
 * As abas quebram em linhas em vez de rolar na horizontal: nos frames mobile
 * elas aparecem todas, em duas ou três linhas, e a rolagem escondida deixava as
 * últimas fora da tela sem nenhuma pista visual.
 */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* No mobile as abas são mais compactas para caberem duas por linha, como no frame. */
.tabs__tab {
  flex: none;
  min-height: 2.75rem;
  padding: var(--sp-3) var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/**
 * `:not([aria-selected="true"])` é o que impede o hover de apagar o rótulo da aba
 * ativa. Sem ele o seletor tinha especificidade maior que a regra de aba ativa e
 * repintava o texto com a cor de destaque — que na aba ativa é justamente a cor do
 * FUNDO. Resultado: passar o mouse na aba ativa deixava o botão como um retângulo
 * colorido vazio. Acontecia nas duas variantes, e era mais visível na azul, porque
 * ali a pessoa acabava de clicar e o ponteiro ficava parado sobre o botão.
 */
.tabs__tab:not([aria-selected="true"]):hover {
  color: var(--us-orange);
  border-color: var(--us-orange);
}

@media (min-width: 48rem) {
  .tabs__tab {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-sm);
  }
}

.tabs__tab[aria-selected="true"] {
  color: var(--white);
  font-weight: var(--fw-medium);
  background: var(--tab-active, var(--us-orange));
  border-color: transparent;
}

/* Variante azul (Impacto Social e Sustentabilidade) */
.tabs--blue {
  --tab-active: var(--us-blue-light);
}

.tabs--blue .tabs__tab:not([aria-selected="true"]):hover {
  color: var(--us-blue-light);
  border-color: var(--us-blue-light);
}

.tabs__panel[hidden] {
  display: none;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.accordion__item {
  overflow: hidden;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

/* <summary> como gatilho: acessível e funcional sem JS. */
.accordion__trigger {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  color: var(--color-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: left;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

/* Remove o triângulo nativo em ambos os motores. */
.accordion__trigger::-webkit-details-marker {
  display: none;
}

.accordion__trigger::marker {
  content: "";
}

/* Cor do ícone do gatilho: instâncias sobrescrevem via --accordion-icon,
   sem precisar competir em especificidade. */
.accordion__trigger > .icon:first-of-type {
  color: var(--accordion-icon, var(--us-orange));
}

.accordion__chevron {
  margin-left: auto;
  color: var(--color-text-subtle);
  transition: transform var(--dur) var(--ease);
}

.accordion__item[open] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 0 var(--sp-6) var(--sp-6);
}

/**
 * O drawer e o footer reaproveitam o accordion só pelo comportamento (o
 * accordion.js anima o que estiver em .accordion__panel); o desenho é o de cada
 * um, então aqui o padding do card sai do caminho.
 */
.mobile-nav .accordion__panel,
.footer-block .accordion__panel {
  padding: 0;
}

/* ==========================================================================
   Carrossel
   ========================================================================== */

.carousel {
  position: relative;
}

/* Scroll-snap horizontal: funciona sem JS e o JS só adiciona setas/dots. */
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* As setas também aparecem no mobile, menores — é assim nos frames de 393px. */
.carousel__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  /* Alvo de toque de 44px mesmo com o ícone menor no mobile. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--white);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  transition: opacity var(--dur) var(--ease);
}

.carousel__arrow .icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.6;
}

@media (min-width: 48rem) {
  .carousel__arrow .icon {
    width: 3rem;
    height: 3rem;
  }
}

.carousel__arrow--prev { left: var(--sp-4); }
.carousel__arrow--next { right: var(--sp-4); }

.carousel__arrow:hover { opacity: 0.75; }

.carousel__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* Dots */
.carousel__dots {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-6);
}

.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  background: var(--gray-300);
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.carousel__dot[aria-current="true"] {
  width: 1.5rem;
  background: var(--us-orange);
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
}

.input {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  color: var(--color-text);
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input::placeholder {
  color: var(--color-text-subtle);
}

.input:focus {
  outline: none;
  border-color: var(--us-blue-light);
  box-shadow: 0 0 0 3px rgb(7 107 143 / 18%);
}

.input[aria-invalid="true"] {
  border-color: var(--us-coral);
}

.form-error {
  color: var(--us-coral);
  font-size: var(--fs-sm);
}

.form-error:empty {
  display: none;
}

/* ==========================================================================
   Item com ícone + rótulo + valor (blocos de estatística e de ingresso)
   ========================================================================== */

.stat {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.stat__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--c, var(--us-orange));
  stroke-width: 2;
}

.stat__label {
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stat__value {
  color: var(--gray-200);
  font-size: var(--fs-md);
  text-transform: uppercase;
}

/* ==========================================================================
   Bloco de mídia + texto

   Duas colunas: imagem numa, texto na outra. O lado da imagem e o tema de fundo
   variam por instância — é o componente que carrega a maior parte das páginas
   internas, então vive aqui e não no CSS de uma página específica.

   Modificadores:
     --reverse   imagem à direita (default: à esquerda)
     --alt       fundo cinza claro
     --dark      faixa escura com gradiente
     --blue      faixa azul com gradiente
     --green     faixa sky -> verde
     --orange    faixa laranja -> coral
   ========================================================================== */

.media-block {
  padding-block: var(--section-py);
}

.media-block__inner {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .media-block__inner {
    gap: var(--sp-10);
    /* 558px de imagem + 462px de texto, como no frame */
    grid-template-columns: minmax(0, 558fr) minmax(0, 462fr);
  }

  .media-block--reverse .media-block__inner {
    grid-template-columns: minmax(0, 462fr) minmax(0, 558fr);
  }

  .media-block--reverse .media-block__media {
    order: 2;
  }
}

.media-block__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.media-block__media img {
  width: 100%;
  aspect-ratio: 558 / 420;
  object-fit: cover;
}

.media-block__text > * + * {
  margin-top: var(--sp-4);
}

.media-block__title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, var(--fs-h1));
}

.media-block__sub {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.9rem + 0.5vw, var(--fs-h3));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

.media-block__body {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

.media-block__cta {
  margin-top: var(--sp-6);
}

/* ---------- Temas ---------- */

.media-block--alt {
  background: var(--surface-alt);
}

/**
 * Faixas escuras e coloridas. Trocar --color-link junto com as cores de texto
 * faz o botão contornado (.btn--outline) acompanhar automaticamente.
 */
.media-block--dark,
.media-block--blue,
.media-block--green,
.media-block--orange {
  --color-heading: var(--white);
  --color-text: var(--white);
  --color-text-muted: var(--white);
  color: var(--white);
}

.media-block--dark {
  --color-link: var(--us-orange-light);
  background: var(--band-dark);
}

/**
 * As três faixas coloridas põem --color-link em branco, então precisam dizer qual
 * cor o rótulo do .btn--outline assume no hover — senão sai branco sobre branco.
 *
 * O valor é uma cor SÓLIDA, e não a própria faixa: --band-* são gradientes, e
 * gradiente não serve como `color`. Peguei o tom mais escuro de cada gradiente, que
 * é o que garante contraste sobre o branco do fundo no hover.
 */
.media-block--blue {
  --color-link: var(--white);
  --btn-color-rotulo-hover: var(--us-blue);
  background: var(--band-blue);
}

.media-block--green {
  --color-link: var(--white);
  --btn-color-rotulo-hover: var(--us-green);
  background: var(--band-green);
}

.media-block--orange {
  --color-link: var(--white);
  --btn-color-rotulo-hover: var(--us-orange-dark);
  background: var(--band-orange);
}

/* ==========================================================================
   Cabeçalho de página interna (breadcrumb + H1 + subtítulo)
   ========================================================================== */

/* Vive aqui, e não no CSS de uma página, porque três páginas já usam o bloco
   (Formas de Ingresso, as páginas de forma e as de unidade) e cada uma carrega
   um $page_css diferente. */
.page-intro {
  padding-block: var(--sp-5) var(--sp-10);
}

.page-intro__breadcrumb {
  margin-bottom: var(--sp-5);
}

.page-head__title {
  font-size: clamp(2rem, 1.35rem + 2.6vw, var(--fs-h1));
}

.page-head__sub {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.9rem + 0.6vw, var(--fs-h3));
  font-weight: var(--fw-regular);
}

/**
 * "Cursos em Destaque" — escondida em TODAS as páginas onde aparece (home,
 * Formas de Ingresso e as 4 de unidade), a pedido.
 *
 * Uma regra só resolve as quatro porque a seção é o mesmo include
 * (includes/secoes/cursos-destaque.php).
 *
 * Para trazer de volta, basta apagar este bloco — o markup continua no lugar.
 */
.cursos-destaque {
  display: none;
}

/* ==========================================================================
   Seções compartilhadas entre páginas

   "Preço Fixo" e "Cursos em Destaque" aparecem na home e em Formas de
   Ingresso (includes/sections/comum/). O CSS vive aqui, e não num arquivo de
   página, justamente para não depender de qual $page_css a página carregou.
   ========================================================================== */

/* ==========================================================================
   Preço Fixo
   ========================================================================== */

.preco-fixo {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .preco-fixo {
    gap: var(--sp-12);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.preco-fixo__text .section-head {
  margin-bottom: var(--sp-6);
}

.preco-fixo__body {
  max-width: 30em;   /* 542px @18px, como no frame */
  margin-bottom: var(--sp-6);
}

/**
 * REATIVADO — deck, slide 13. Estava com `display: none` enquanto a rota interna
 * `/preco-fixo` não existia; o deck deu o destino externo e o CTA virou botão.
 *
 * A margem só existe porque o botão é o último elemento da coluna de texto e o
 * parágrafo acima já traz o próprio espaçamento.
 */
.preco-fixo__saiba {
  margin-top: var(--sp-5);
}

/**
 * O vídeo do Preço Fixo — o player do YouTube que substituiu a imagem estática.
 *
 * `overflow: hidden` no contêiner porque o iframe não respeita `border-radius`
 * aplicado nele mesmo em todos os navegadores; quem recorta é o pai. O
 * `aspect-ratio` de 16/9 reserva a altura antes de o player chegar, então a seção
 * não salta quando ele carrega (CLS) — e é a proporção nativa do vídeo.
 */
.preco-fixo__video {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.video-thumb img {
  width: 100%;
  transition: transform var(--dur) var(--ease);
}

.video-thumb:hover img {
  transform: scale(1.03);
}

.video-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--us-orange);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease);
}

.video-thumb__play .icon {
  width: 4rem;
  height: 4rem;
}

.video-thumb:hover .video-thumb__play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ==========================================================================
   Cursos em Destaque
   ========================================================================== */

.curso-list {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .curso-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .curso-list {
    gap: var(--sp-5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.curso {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--white);
}

.curso[hidden] {
  display: none;
}

.curso__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
}

.curso__nivel {
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.curso__nivel--onDark {
  color: var(--gray-300);
}

.curso__nome {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.curso__nome--onDark {
  color: var(--white);
}

.curso__preco {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.curso__preco-label {
  color: var(--c);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.curso__preco-de {
  color: var(--color-text-subtle);
  font-size: var(--fs-sm);
}

.curso__preco-por {
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.curso__preco-nota {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* Duração e Unidades lado a lado, como no frame; a segunda coluna absorve
   nomes longos de unidade quebrando em várias linhas. */
.curso__meta {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  font-size: var(--fs-sm);
}

.curso__meta-item:only-child {
  grid-column: 1 / -1;
}

.curso__meta dt {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

.curso__meta dd {
  margin: 0;
  color: var(--color-text-muted);
}

.curso__cta {
  margin-top: auto;
}

/* ---------- Card do teste vocacional ---------- */

.curso--teste {
  --color-link: var(--us-orange-light);
  color: var(--gray-300);
  background: var(--gray-900);
  border-top: 4px solid var(--us-orange);
  border-radius: var(--radius-md);
}

.curso--teste .badge--solid {
  --c: var(--us-orange);
}

.curso__teste-texto {
  padding-bottom: var(--sp-4);
  color: var(--gray-300);
  font-size: var(--fs-md);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.curso__teste-media {
  display: grid;
  place-items: center;
  margin-block: auto;
  padding-block: var(--sp-2);
}

.curso__teste-media img {
  width: 100%;
  max-width: 15rem;
}

.curso-list__empty {
  margin-top: var(--sp-6);
  color: var(--color-text-muted);
  text-align: center;
}


/* ==========================================================================
   Cards das formas de ingresso

   Usados em "Formas de Ingresso" e em "Vestibular" (seção "Veja outras formas
   de ingresso"). Vive aqui, e não no CSS de uma página, pelo mesmo motivo de
   Preço Fixo e Cursos em Destaque.
   ========================================================================== */

/* Duas colunas já no mobile — é assim nos frames de 393px. */
.forma-list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .forma-list {
    gap: var(--sp-6);
  }
}

/**
 * `auto-fit` em vez de um número fixo de colunas porque a lista varia de tamanho:
 * cinco cards na página "Formas de Ingresso" e quatro nas páginas de cada forma,
 * que escondem a própria. Com `repeat(4, …)` os cinco quebravam em 4+1 — uma linha
 * cheia e um card solto embaixo, de altura diferente.
 *
 * O mínimo de 11rem é o que faz cinco caberem na largura do container; abaixo disso
 * o próprio grid reduz a contagem de colunas.
 */
@media (min-width: 64rem) {
  .forma-list {
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

.forma {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Cada tema é uma cor plana da paleta (amostrado do frame). */
.forma--verde { --c: var(--us-green); }
.forma--sky   { --c: var(--us-sky); }
.forma--azul  { --c: var(--us-blue); }
.forma--coral { --c: var(--us-coral); }

.forma__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  height: 100%;
  /* Em duas colunas o card tem ~172px no mobile: padding menor para o texto caber. */
  padding: var(--sp-5) var(--sp-4);
  color: var(--white);
  text-align: center;
  background: var(--c);
  border-radius: var(--radius-md);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (min-width: 48rem) {
  .forma__link {
    padding: var(--sp-6) var(--sp-5);
  }
}

.forma__link:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Círculo escurecido atrás do ícone, como no frame. */
.forma__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: rgb(0 0 0 / 14%);
  border-radius: var(--radius-pill);
}

@media (min-width: 48rem) {
  .forma__icon {
    width: 3.5rem;
    height: 3.5rem;
  }
}

.forma__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* Tipografia menor no mobile: em duas colunas o card tem ~172px de largura. */
.forma__nome {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/**
 * Selo "Preço Fixo" no topo do card — deck, slide 32.
 *
 * Contorno claro sobre a cor plana do card, e não um `background` sólido: os cinco
 * temas têm luminâncias bem diferentes (do sky ao gray-800), e um selo opaco teria
 * de ganhar uma cor por tema. Com borda translúcida ele funciona nos cinco.
 *
 * `align-self: flex-start` porque o .forma__link centraliza os filhos; o selo é o
 * único que fica à esquerda, como no slide.
 */
.forma__selo {
  align-self: flex-start;
  padding: 0.15rem var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--radius-pill);
}

/**
 * A frase de venda substituiu os três bullets. `margin-block: auto` empurra o CTA
 * para a base do card: os cinco textos têm comprimentos diferentes e sem isso o
 * "Saiba mais" ficava numa altura distinta em cada um.
 */
.forma__texto {
  margin-block: auto;
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.forma__cta {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.forma__cta .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur) var(--ease);
}

.forma__link:hover .forma__cta .icon {
  transform: translateX(3px);
}

@media (min-width: 48rem) {
  .forma__nome,
  .forma__texto,
  .forma__cta {
    font-size: var(--fs-md);
  }
}

/* Tema escuro — card "Reabertura" */
.forma--escuro { --c: var(--gray-800); }

/* ==========================================================================
   Tela de carregamento

   Véu claro e esmaecido (o GIF da coruja é desenhado para fundo claro: o
   contorno cinza vai se preenchendo com as cores da marca). O blur "apaga" o
   conteúdo por trás sem escurecer demais.

   O failsafe em CSS é obrigatório: se o loader.js não rodar, a animação abaixo
   dispensa a cortina em 6s. Sem isso um erro de JS esconderia o site inteiro.
   ========================================================================== */

.page-loader {
  /**
   * DESATIVADO a pedido. Para reativar, troque por `display: grid`.
   * Todo o resto (markup em includes/loading.php, loader.js, failsafe em CSS)
   * continua no lugar.
   */
  display: none;

  position: fixed;
  z-index: calc(var(--z-drawer) + 100);
  inset: 0;
  place-items: center;
  background: rgb(247 248 250 / 92%);
  backdrop-filter: blur(6px) saturate(0.85);
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
  transition: opacity 400ms var(--ease), visibility 400ms var(--ease);
  animation: page-loader-failsafe 0s 6s forwards;
}

.page-loader__logo {
  width: clamp(11rem, 45vw, 17.5rem);
  height: auto;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

.page-loader[hidden] {
  display: none;
}

@keyframes page-loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Sem animação: o loader ainda cumpre a função, só não desaparece suavemente. */
@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition-duration: 0ms;
  }
}

/* ==========================================================================
   Aviso de cookies

   Barra fixa no rodapé. Não bloqueia a página (não é um modal): o Consent Mode
   já começa em 'denied', então navegar sem decidir é seguro e não custa nada ao
   usuário.
   ========================================================================== */

.consent {
  position: fixed;
  z-index: calc(var(--z-drawer) + 50);
  right: 0;
  bottom: 0;
  left: 0;
  padding-block: var(--sp-4);
  color: var(--gray-200);
  background: var(--gray-900);
  box-shadow: 0 -4px 24px rgb(32 36 45 / 28%);
  opacity: 0;
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.consent.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 56rem) {
  .consent__inner {
    gap: var(--sp-8);
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.consent__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}

.consent__text strong {
  color: var(--white);
}

.consent__text a {
  color: var(--us-orange-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__text a:hover {
  color: var(--white);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.consent__btn {
  flex: 1;
  min-width: 9rem;
  white-space: nowrap;
}

@media (min-width: 56rem) {
  .consent__btn {
    flex: none;
  }
}

/* ==========================================================================
   Página 404
   ========================================================================== */

.erro-404 {
  text-align: center;
}

.erro-404__codigo {
  color: var(--us-orange);
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.erro-404__titulo {
  margin-top: var(--sp-2);
}

.erro-404 .lead {
  margin-inline: auto;
  margin-top: var(--sp-4);
}

.erro-404__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-8);
}

/* ==========================================================================
   "Em construção" — destino dos redirects das rotas que ainda não existem

   Mesmo bloco centrado da 404, mas com ícone em vez do número grande, e uma
   lista de atalhos para o que já está no ar.
   ========================================================================== */

.em-obra {
  text-align: center;
}

.em-obra__icone {
  display: inline-grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  color: var(--us-orange);
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
}

.em-obra__icone .icon {
  width: 3rem;
  height: 3rem;
  color: currentcolor;
}

.em-obra__titulo {
  margin-top: var(--sp-6);
}

.em-obra__lead {
  margin-inline: auto;
  margin-top: var(--sp-4);
}

.em-obra__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-8);
}

.em-obra__atalhos {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--color-border);
}

.em-obra__atalhos-titulo {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.em-obra__lista {
  display: grid;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-6);
}

@media (min-width: 48rem) {
  .em-obra__lista {
    grid-template-columns: repeat(2, minmax(0, auto));
  }
}

/* ==========================================================================
   Parcerias — faixa escura de logos

   Vive aqui, e não em home.css, porque a seção é include
   (includes/secoes/parcerias.php) e aparece na home e em Responsabilidade
   Social, que carregam $page_css diferentes.
   ========================================================================== */

.parcerias {
  padding-block: var(--sp-10);
  background: var(--gray-800);
}

.parcerias__title {
  margin-bottom: var(--sp-8);
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  text-align: center;
}

.parcerias__carousel {
  /* Reserva a calha das setas: no frame os logos vão de 268 a 1211 dentro de
     um container de 1140, ou seja ~72px de recuo em cada lado. */
  padding-inline: var(--sp-12);
}

@media (min-width: 64rem) {
  .parcerias__carousel {
    padding-inline: 4.5rem;
  }
}

.parcerias__track {
  align-items: center;
}

.parcerias__slide {
  flex: 0 0 50%;
  scroll-snap-align: center;
}

@media (min-width: 40rem) {
  .parcerias__slide {
    flex-basis: 33.333%;
  }
}

@media (min-width: 64rem) {
  .parcerias__slide {
    flex-basis: 20%;
  }
}

.parcerias__link {
  display: grid;
  padding-inline: var(--sp-3);
  place-items: center;
  height: 4.5rem;
  opacity: 0.9;
  transition: opacity var(--dur) var(--ease);
}

.parcerias__link:hover {
  opacity: 1;
}

/**
 * O logo PREENCHE a caixa de 4.5rem do link, em vez de aparecer no tamanho natural.
 *
 * Era `width: auto; max-width: 100%; max-height: 4.5rem`, que só limita: logo menor
 * que a caixa ficava pequeno. Com cinco logos de tamanho parecido isso não aparecia;
 * com doze, sete deles vindos do site antigo em ~100px, a faixa ficou com pesos
 * ópticos muito diferentes — CNPq ocupando os 72px de altura ao lado de um Sebrae de
 * 56px.
 *
 * `object-fit: contain` é o que mantém isso seguro: cada logo cresce até encostar na
 * caixa pelo lado que chegar primeiro, sem distorcer. Marca larga e fina (Autodesk,
 * IBM SkillsBuild) fica limitada pela largura; marca alta (CAPES, CPB) pela altura.
 *
 * A altura é `4.5rem`, e NÃO `100%`. O pai é um grid com `place-items: center`, que
 * desliga o stretch — então `height: 100%` não tem contra o que resolver, cai para o
 * tamanho intrínseco e a linha cresce junto: o CPB, que é o logo mais alto, esticava
 * a caixa dele para 219px e desalinhava a faixa inteira. Com a altura declarada a
 * caixa é a mesma para os doze.
 */
.parcerias__logo {
  width: 100%;
  height: 4.5rem;
  object-fit: contain;
}

.parcerias .carousel__arrow {
  color: var(--gray-400);
}

/* Uma única página de logos: sem setas nem indicadores. */
.carousel[data-single-page] .carousel__arrow,
.carousel[data-single-page] .carousel__dots {
  display: none;
}

.parcerias .carousel__arrow--prev { left: 0; }
.parcerias .carousel__arrow--next { right: 0; }

/* Em Responsabilidade Social o frame põe dois parágrafos entre o título e os
   logos, e alinha o bloco à esquerda em vez de centralizar. */
.parcerias--com-intro .parcerias__title {
  margin-bottom: var(--sp-4);
  font-size: clamp(1.5rem, 1.16rem + 1.4vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  text-align: left;
}

.parcerias__intro {
  display: grid;
  gap: var(--sp-4);
  max-width: 44em;
  margin-bottom: var(--sp-8);
  color: var(--gray-300);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}