/* Home: números no "Quem somos" e a seção "Cursos gratuitos" antes do Blog
   (cursos-home.php; números do mockup /mockups/home-cursos-numeros e cursos da
   N2 de /mockups/home-cursos-v2, 04/10) */

/* ===== números: 2 × 2 embaixo dos parágrafos ===== */
.hx-num { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; font-family: Quicksand, sans-serif; }
.hx-num div { padding: 20px 22px; border-radius: 10px; background: #fff; }
.hx-num b { display: block; font-size: 38px; font-weight: 700; line-height: 1; color: var(--c); letter-spacing: -.02em; }
.hx-num span { display: block; margin-top: 8px; color: #6b6560; font-size: 14px; font-weight: 500; line-height: 1.4; }

/* ===== cursos: fundo branco; título e fatos em cima, as faixas de cursos de ponta a ponta
   (as pílulas dos logos dos parceiros, em rosinha, e o movimento deles) e o botão embaixo ===== */
.hx-cur { padding: 110px 0; background: #fff; overflow-x: clip; font-family: Quicksand, sans-serif; color: #1f1e1a; }
/* a caixa na largura do header (amace-header-nova: min(1208px, 100% - 32px)), borda com borda */
.hx-cur__caixa { width: min(1208px, 100% - 32px); margin: 0 auto; }

.hx-cur__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 48px; }
/* o titulozinho no tamanho do "Quem somos?" (o Novidades do Blog é menor) */
body .hx-cur .hx-eb-extra { font-size: 14px; }
.hx-cur .hx-eb-extra .hx-eb-coracao { width: 16px; height: 16px; }
body .hx-cur h2 { max-width: 520px; margin: 0; font-family: Quicksand, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: #1f1e1a; }
/* a descrição numa linha só no computador */
body .hx-cur p.hx-cur__texto { margin: 0 0 18px; color: #6b6560; font-size: 16px; line-height: 1.7; white-space: nowrap; }

/* os três fatos em pílulas rosinha, com o ícone numa bolinha amarela */
.hx-cur__fatos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0; list-style: none; }
.hx-cur__fatos li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 6px; border-radius: 999px; background: #f9f0f0; color: #1f1e1a; font-size: 14px; font-weight: 700; line-height: 1.2; }
.hx-cur__bola { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fcce45; color: #1f1e1a; }
.hx-cur__bola svg { width: 16px; height: 16px; }

/* as faixas: as mesmas medidas e a mesma animação de base dos logos (hx-logos) */
.hx-cur__faixas { display: grid; gap: 16px; }
.hx-cur__faixa { overflow: hidden; }
.hx-cur__trilho { display: flex; width: max-content; animation: hx-cur-anda calc(var(--itens, 6) * 6s) linear infinite; }
.hx-cur__faixa--volta .hx-cur__trilho { animation-direction: reverse; }
.hx-cur__grupo { display: flex; gap: 16px; padding-right: 16px; }
@keyframes hx-cur-anda { to { transform: translateX(-25%); } }

.hx-cur__p { display: flex; align-items: center; justify-content: center; gap: 16px; flex: 0 0 auto; box-sizing: border-box; min-width: 230px; height: 110px; padding: 0 40px 0 18px; border-radius: 999px; background: #f9f0f0; color: #1f1e1a; text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-drag: none; transition: background .35s ease, color .35s ease; }
.hx-cur__p b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.hx-cur__av { flex: none; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; }
.hx-cur__av img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; pointer-events: none; transition: scale .6s var(--amace-curva); }
/* no hover a pílula pinta na cor da área do curso */
body .hx-cur a.hx-cur__p:is(:hover, :focus-visible) { background: var(--c); color: var(--t); }
.hx-cur a.hx-cur__p:is(:hover, :focus-visible) .hx-cur__av img { scale: 1.08; }
/* o ícone do curso (do CRM) na bolinha branca, no lugar da foto */
.hx-cur__av--icone { display: grid; place-items: center; background: #fff; }
.hx-cur__ic { display: block; width: 66%; height: 66%; background: var(--ic-cor, #cd212a); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; transition: scale .6s var(--amace-curva); }
/* no hover, a capa do curso nasce do centro da bolinha e cobre o ícone, sem a mola (a pedido)
   */
.hx-cur__av--icone { position: relative; }
.hx-cur__capa { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transform: scale(0); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.hx-cur a.hx-cur__p:is(:hover, :focus-visible) .hx-cur__capa { transform: scale(1); }
/* o branco da bolinha some junto, senão aparece como um serrilhado na borda da foto */
.hx-cur a.hx-cur__p .hx-cur__av--icone { transition: background-color .3s ease; }
.hx-cur a.hx-cur__p:is(:hover, :focus-visible) .hx-cur__av--icone:has(.hx-cur__capa) { background-color: transparent; }
.hx-cur a.hx-cur__p:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 2px; }
/* curso que não está no site no momento: apagado, sem link, com o pontinho da área */
.hx-cur__p--fora { flex-direction: column; gap: 4px; padding: 0 40px; background: #fcf7f7; }
.hx-cur__p--fora b { display: inline-flex; align-items: center; gap: 10px; color: #a39a96; }
.hx-cur__p--fora i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.hx-cur__p--fora small { color: #b9adaa; font-size: 13px; font-weight: 700; }
/* "em breve" com o ícone do curso: a mesma bolinha branca, com o ícone apagado em cinza, e o nome ao lado */
.hx-cur__p--fora.hx-cur__p--com-icone { flex-direction: row; gap: 16px; padding: 0 40px 0 18px; }
.hx-cur__p--com-icone .hx-cur__ic { opacity: .45; }
.hx-cur__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.hx-cur__pe { margin-top: 40px; }

@media (max-width: 1024px) {
  .hx-cur__topo { grid-template-columns: 1fr; gap: 24px; }
  body .hx-cur p.hx-cur__texto { white-space: normal; }
}
@media (max-width: 767px) {
  .hx-num { gap: 10px; }
  .hx-num div { padding: 16px; }
  .hx-num b { font-size: 28px; }
  .hx-num span { font-size: 13px; }
  .hx-cur { padding: 72px 0; }
  .hx-cur__caixa { width: calc(100% - 2 * var(--amace-lado, 20px)); }
  .hx-cur__topo { margin-bottom: 32px; }
  body .hx-cur h2 { font-size: 25px; }
  body .hx-cur p.hx-cur__texto { font-size: 14px; }
  .hx-cur__faixas { gap: 12px; }
  .hx-cur__grupo { gap: 12px; padding-right: 12px; }
  .hx-cur__p { min-width: 160px; height: 80px; gap: 12px; padding: 0 26px 0 12px; }
  .hx-cur__p b { font-size: 18px; }
  .hx-cur__av { width: 56px; height: 56px; }
  .hx-cur__p--fora { padding: 0 26px; }
  .hx-cur__p--fora.hx-cur__p--com-icone { gap: 12px; padding: 0 26px 0 12px; }
  /* no celular, na metade da velocidade (antes do script assumir e sem ele) */
  .hx-cur__trilho { animation-duration: calc(var(--itens, 6) * 12s); }
  .hx-cur__pe { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-cur__trilho { animation: none; }
  .hx-cur__faixa { overflow-x: auto; scrollbar-width: none; }
}

/* a onda no topo da seção de cursos, vindo do rosinha do "No que acreditamos" (79d5a63,
   #f9f4f3), como a do topo do Blog, só que espelhada para não repetir a curva */
.hx-cur { position: relative; padding-top: calc(clamp(56px, 6.5vw, 100px) + 70px); }
.hx-cur::before { content: ""; position: absolute; z-index: 0; top: -1px; left: 0; right: 0; height: clamp(56px, 6.5vw, 100px); pointer-events: none; transform: scaleX(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f9f4f3' d='M0 0H1440V40C1330 66 1190 34 1020 48S710 98 470 72C300 54 150 30 0 60Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; }
.hx-cur > * { position: relative; z-index: 1; }
@media (max-width: 767px) { .hx-cur { padding-top: calc(clamp(56px, 6.5vw, 100px) + 36px); } }