/* ==========================================================================
   RECURSOS MINISTERIAIS — esteira horizontal de botões

   Oito frentes passando devagar, em movimento contínuo. O botão traz só o
   símbolo grande e o nome: quem lê em movimento não lê parágrafo.

   O laço é feito duplicando o conjunto e deslocando o trilho em -50%; ao
   chegar lá, a posição é idêntica ao início e o corte não aparece. A cópia
   leva aria-hidden para o leitor de tela não anunciar dezesseis botões.

   Para clicar é preciso alcançar — então a esteira para no ponteiro, no
   foco por teclado e para quem pediu menos movimento no sistema.
   ========================================================================== */

.rec-esteira {
  position: relative;
  overflow: hidden;
  padding: 4px 0 10px;
  /* A esteira acompanha o alinhamento das demais seções — não vaza para as
     bordas da tela. O esmaecimento nas pontas é o que sugere continuidade
     além do que se vê. Medida fixa em px, para o fade não encolher junto
     com o container em telas menores. */
  --rec-fade: 96px;
  mask-image: linear-gradient(90deg,
    transparent 0,
    black var(--rec-fade),
    black calc(100% - var(--rec-fade)),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    black var(--rec-fade),
    black calc(100% - var(--rec-fade)),
    transparent 100%);
}

.rec-trilho {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: recAndar var(--rec-dur, 58s) linear infinite;
}
@keyframes recAndar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.rec-esteira:hover .rec-trilho,
.rec-esteira:focus-within .rec-trilho { animation-play-state: paused; }

/* ---------------- O botão ---------------- */
.rec {
  position: relative;
  flex: none;
  width: 208px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px 18px 26px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface2), var(--surface));
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

/* Halo que mora atrás do botão e acende no toque */
.rec::before {
  content: "";
  position: absolute;
  inset: -40% -30%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, var(--rec-cor, var(--acc)), transparent 62%);
  opacity: 0.20;
  transition: opacity var(--t-med) var(--ease);
}
/* Trama fina, para a superfície não ficar chapada */
.rec::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 75%);
  pointer-events: none;
}

.rec:hover,
.rec:focus-visible {
  transform: translateY(-6px);
  border-color: var(--rec-cor, var(--acc));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5),
              0 0 34px color-mix(in srgb, var(--rec-cor, var(--acc)) 42%, transparent);
  outline: none;
}
.rec:hover::before, .rec:focus-visible::before { opacity: 0.46; }

/* ---------------- O símbolo ---------------- */
.rec-sim {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 24px;
  background: rgba(7, 13, 26, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--rec-cor, var(--acc));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.rec-sim svg { width: 38px; height: 38px; stroke-width: 1.5; }
.rec:hover .rec-sim, .rec:focus-visible .rec-sim {
  transform: scale(1.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 30px color-mix(in srgb, var(--rec-cor, var(--acc)) 55%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--rec-cor, var(--acc)) 22%, transparent);
}

.rec-nome {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--tx);
  text-wrap: balance;
}

/* Uma cor por frente — variações do azul institucional, com o de
   assinatura puxando para o céu claro por ser o que leva à conversão */
.rec[data-rec="cursos"]      { --rec-cor: #4EA8FF; }
.rec[data-rec="trilhas"]     { --rec-cor: #3FBFD8; }
.rec[data-rec="estudos"]     { --rec-cor: #5B93E8; }
.rec[data-rec="series"]      { --rec-cor: #4A7FE0; }
.rec[data-rec="mentorias"]   { --rec-cor: #6AA6F0; }
.rec[data-rec="eventos"]     { --rec-cor: #3D8FE0; }
.rec[data-rec="comunidades"] { --rec-cor: #57B4E8; }
.rec[data-rec="assinatura"]  { --rec-cor: #7FD3FF; }
.rec[data-rec="assinatura"]  { border-color: var(--prata-dim); }

/* Quem pediu menos movimento recebe uma grade parada e navegável */
@media (prefers-reduced-motion: reduce) {
  .rec-trilho {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rec-esteira { mask-image: none; -webkit-mask-image: none; }
  .rec:hover, .rec:focus-visible { transform: none; }
  .rec:hover .rec-sim { transform: none; }
}

@media (max-width: 560px) {
  .rec { width: 168px; padding: 24px 14px 22px; }
  .rec-sim { width: 64px; height: 64px; border-radius: 20px; }
  .rec-sim svg { width: 32px; height: 32px; }
}

@media (max-width: 700px) {
  .rec-esteira { --rec-fade: 48px; }
}