/* ============================================================
   NOSSOS ESTUDANTES
   A tela é clara, como no desenho: fundo branco, escrita azul-escura e
   o dourado da marca no realce. O resto do site é escuro, então as
   cores desta tela ficam todas aqui dentro, presas ao #view-estudantes.
   ============================================================ */
#view-estudantes {
  --al-tinta: #10243c;
  --al-tinta-suave: #4d5b6b;
  --al-ouro: #b9862f;
  --al-linha: #e6e3dd;
  --al-creme: #faf6ee;
  background: #fff;
  color: var(--al-tinta);
}

.alunos { padding: 1.4rem 0 3rem; }

/* a trilha de migalhas, no alto */
.alunos__trilha {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .86rem;
  color: var(--al-tinta-suave);
}
.alunos__trilha a { color: var(--al-tinta-suave); }
.alunos__trilha a:hover { color: var(--al-tinta); text-decoration: underline; }
.alunos__trilha svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.alunos__trilha span { color: var(--al-tinta); }

/* a mesma letra dos outros títulos do site, não a serifa */
.alunos__titulo {
  margin-top: 1.1rem;
  font-family: var(--titulo, "Playfair Display", Georgia, serif);
  font-size: clamp(1.7rem, 6.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--al-tinta);
}
.alunos__titulo span { color: var(--al-ouro); }

.alunos__lema {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: clamp(.95rem, 3.6vw, 1.05rem);
  line-height: 1.58;
  color: var(--al-tinta-suave);
}

/* As três abas dividem a linha e cabem juntas: nada de rolar de lado,
   que escondia a última aba atrás da borda. */
.alunos__filtros {
  margin-top: 1.7rem;
  display: flex;
  border-bottom: 1px solid var(--al-linha);
}
.alunos__filtro {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .65rem .3rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: inherit;
  font-size: .82rem;
  color: var(--al-tinta-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.alunos__filtro svg { width: 17px; height: 17px; flex: none; }
/* numa tela bem estreita o desenho sai e fica só a palavra */
@media (max-width: 369.98px) { .alunos__filtro svg { display: none; } }
@media (min-width: 700px) {
  .alunos__filtro { flex: none; gap: .5rem; padding: .75rem 1.1rem; font-size: .95rem; }
  .alunos__filtro svg { width: 21px; height: 21px; }
}
.alunos__filtro:hover { color: var(--al-tinta); }
.alunos__filtro.is-active {
  color: var(--al-ouro);
  border-bottom-color: var(--al-ouro);
  font-weight: 600;
}

/* duas colunas, como no desenho, já a partir do celular */
.alunos__grade {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}
@media (min-width: 900px) {
  .alunos__grade { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
}

/* O cartão é a foto inteira, com a escrita por cima. O véu de baixo é
   que segura a leitura: sem ele, a frase sumia nas fotos claras. */
.alunos__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #d9d5cd;
  color: #fff;
}
/* a foto e o véu ficam em camadas positivas: com z-index negativo os
   dois caíam atrás do próprio fundo do cartão e a foto sumia */
.alunos__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.alunos__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(8, 14, 22, .8), rgba(8, 14, 22, .26) 46%, transparent 66%);
}
.alunos__selo, .alunos__pe, .alunos__play { z-index: 2; }

/* a etiqueta de cima: clara, com o alfinete do lugar */
.alunos__selo {
  position: absolute;
  top: .55rem;
  left: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: calc(100% - 1.1rem);
  padding: .28rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--al-tinta);
  font-size: .63rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(8, 14, 22, .18);
}
.alunos__selo svg { width: 13px; height: 13px; flex: none; color: var(--al-ouro); }
.alunos__selo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A etiqueta entra depois do cartão, vinda da esquerda, e o desenho dá
   um giro curto ao chegar. */
.alunos__selo {
  animation: alunos-selo .42s cubic-bezier(.22, 1.3, .4, 1) .16s both;
}
.alunos__selo svg { animation: alunos-selo-ico .5s cubic-bezier(.22, 1.4, .4, 1) .24s both; }
@keyframes alunos-selo {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes alunos-selo-ico {
  from { opacity: 0; transform: rotate(-35deg) scale(.6); }
  to   { opacity: 1; transform: none; }
}
/* e acompanha o cartão quando o dedo encosta */
.alunos__card:hover .alunos__selo { background: #fff; }

/* O toque no cartão: um lustro claro atravessa a foto na diagonal
   enquanto um fio dourado acende a borda por dentro e a foto se
   aproxima um instante. O anel que havia antes era um risco que
   crescia e sumia — este responde ao dedo sem tirar o olho da foto. */
.alunos__toque {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  animation: alunos-aura .62s ease forwards;
}
/* a faixa é bem mais larga que o cartão: assim ela entra e sai de fora,
   sem nascer nem morrer no meio da foto */
.alunos__toque::before {
  content: "";
  position: absolute;
  inset: -30% -70%;
  background: linear-gradient(104deg,
    transparent 42%,
    rgba(255, 255, 255, .18) 47%,
    rgba(255, 255, 255, .58) 50%,
    rgba(255, 255, 255, .18) 53%,
    transparent 58%);
  animation: alunos-lustro .62s cubic-bezier(.3, .65, .3, 1) forwards;
}
@keyframes alunos-aura {
  0%   { box-shadow: inset 0 0 0 0 rgba(213, 164, 78, 0), inset 0 0 0 rgba(213, 164, 78, 0); }
  28%  { box-shadow: inset 0 0 0 2px rgba(213, 164, 78, .9), inset 0 0 26px rgba(213, 164, 78, .4); }
  100% { box-shadow: inset 0 0 0 2px rgba(213, 164, 78, 0), inset 0 0 26px rgba(213, 164, 78, 0); }
}
@keyframes alunos-lustro {
  from { transform: translateX(-72%); }
  to   { transform: translateX(72%); }
}
/* o cartão afunda um tico e a foto vem para a frente: o dedo empurra a
   moldura e a imagem responde */
.alunos__card { transition: transform .16s ease; }
.alunos__card:active { transform: scale(.985); }
.alunos__card.is-tocado img { animation: alunos-aproxima .62s cubic-bezier(.25, .8, .3, 1); }
@keyframes alunos-aproxima {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .alunos__selo, .alunos__selo svg, .alunos__toque, .alunos__toque::before { animation: none; }
  .alunos__toque { display: none; }
  .alunos__card.is-tocado img { animation: none; }
  .alunos__card { transition: none; }
  .alunos__card:active { transform: none; }
}

.alunos__pe {
  position: absolute;
  inset: auto 0 0;
  padding: .7rem .75rem .75rem;
  display: grid;
  gap: .15rem;
}
.alunos__frase {
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.32;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.alunos__nome { font-size: .74rem; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.alunos__escola { font-size: .72rem; line-height: 1.35; color: rgba(255, 255, 255, .78); }

/* o botão de tocar, no canto de baixo à direita */
.alunos__play {
  position: absolute;
  right: .6rem;
  bottom: .7rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 16, 24, .3);
  color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.alunos__play svg { width: 15px; height: 15px; margin-left: 2px; }
.alunos__card:hover .alunos__play { background: rgba(10, 16, 24, .6); transform: scale(1.06); }

.alunos__vazio { margin-top: 1.4rem; color: var(--al-tinta-suave); }

/* O convite do pé: uma linha só, creme, com o botão dourado do desenho.
   Antes o botão caía numa segunda fileira embaixo do título e sobrava
   um vazio à direita — agora os três ficam na mesma fileira, o recado
   no meio e a ação no fim, que é onde o olho termina de ler. */
.alunos__convite {
  position: relative;
  overflow: hidden;
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .55rem;
  border: 1px solid var(--al-linha);
  border-radius: 14px;
  background: linear-gradient(118deg, #fffdf8, #f7f0e2 62%, #f3e9d6);
  box-shadow: 0 6px 18px rgba(24, 38, 58, .05);
}
/* um fio dourado no alto e um brilho atrás da casinha: é o que dá
   acabamento à faixa sem engordá-la */
.alunos__convite::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 164, 78, .6) 22%, rgba(213, 164, 78, .6) 78%, transparent);
}
.alunos__convite::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 110px;
  height: 110px;
  margin-top: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 164, 78, .16), transparent 68%);
  pointer-events: none;
}
.alunos__convite__ico {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(185, 134, 47, .32);
  background: linear-gradient(140deg, #fffaf0, #f2e3c8);
  color: var(--al-ouro);
  box-shadow: 0 2px 8px rgba(185, 134, 47, .16);
}
.alunos__convite__ico svg { width: 24px; height: 24px; }
.alunos__convite__texto { position: relative; flex: 1 1 auto; min-width: 0; }
.alunos__convite__texto h2 {
  font-family: var(--titulo, "Playfair Display", Georgia, serif);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--al-tinta);
}
.alunos__convite__botao {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .38rem .62rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #d5a44e, #b9862f);
  color: #fff;
  font-weight: 600;
  font-size: .7rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(185, 134, 47, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.alunos__convite__botao:hover,
.alunos__convite__botao:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(185, 134, 47, .3);
}
.alunos__convite__botao svg { width: 13px; height: 13px; flex: none; }
.alunos__convite__seta { width: 12px; height: 12px; transition: transform .18s ease; }
.alunos__convite__botao:hover .alunos__convite__seta { transform: translateX(2px); }

/* Nas telas mais estreitas a fileira não cabe inteira: a seta sai e a
   casinha encolhe, em vez de o botão quebrar de linha. Abaixo de 340px
   a casinha sai de vez — ela é enfeite, e os 34px dela são o que falta
   para o recado caber em duas linhas em vez de quatro. */
@media (max-width: 339.98px) {
  .alunos__convite__ico { display: none; }
  .alunos__convite { padding-left: .6rem; }
}
@media (max-width: 429.98px) {
  .alunos__convite__seta { display: none; }
}
@media (max-width: 379.98px) {
  .alunos__convite { gap: .45rem; padding: .5rem .45rem; }
  .alunos__convite__ico { width: 34px; height: 34px; }
  .alunos__convite__ico svg { width: 20px; height: 20px; }
  .alunos__convite__texto h2 { font-size: .76rem; }
  .alunos__convite__botao { padding: .36rem .55rem; font-size: .66rem; }
}

@media (min-width: 760px) {
  .alunos__convite { gap: .8rem; padding: .6rem 1rem; }
  .alunos__convite__ico { width: 44px; height: 44px; }
  .alunos__convite__ico svg { width: 26px; height: 26px; }
  .alunos__convite__texto h2 { font-size: .92rem; }
  .alunos__convite__botao { padding: .45rem .85rem; font-size: .76rem; }
}

/* Ao trocar de aba os cartões entram de baixo, um logo depois do outro:
   sem isso a grade trocava de conteúdo num piscar, sem dizer que mudou. */
@keyframes alunos-entra {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.alunos__card {
  animation: alunos-entra .34s cubic-bezier(.22, 1.2, .4, 1) both;
}
/* o risco dourado da aba escolhida cresce do meio para os lados */
@keyframes alunos-aba { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.alunos__filtro.is-active { position: relative; }
.alunos__filtro.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--al-ouro);
  animation: alunos-aba .28s cubic-bezier(.22, 1.2, .4, 1);
}
@media (prefers-reduced-motion: reduce) {
  .alunos__card, .alunos__filtro.is-active::after { animation: none; }
}