/* ==========================================================================
   Carrossel de destaques — o topo da página inicial, como no portal da
   UniRovuma. Conteúdo gerido em Website › Destaques.
   ========================================================================== */
/* Os diapositivos ficam todos na mesma célula de uma grelha: o carrossel
   cresce até à altura do mais alto, em vez de ter uma altura fixa que corta o
   texto quando o título ocupa mais linhas ou o ecrã é mais baixo. */
.carrossel {
  position: relative; overflow: hidden; color: #fff;
  display: grid; min-height: clamp(440px, 64vh, 640px); background: var(--marinho);
}
.carrossel__item {
  grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
  background: linear-gradient(135deg, #001a45, var(--marinho) 55%, #0b3a8a);
}
.carrossel__item.activo { opacity: 1; visibility: visible; transition: opacity .7s ease; z-index: 1; }
.carrossel__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .6; transform: scale(1.06); transition: transform 9s ease-out;
}
.carrossel__item.activo .carrossel__fundo { transform: scale(1); }
.carrossel__veu {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #00225a 0%, rgba(0, 34, 90, .62) 45%, rgba(0, 34, 90, 0) 100%);
}
.carrossel__conteudo {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(12px, 2vh, 20px); padding-top: clamp(36px, 6vh, 64px); padding-bottom: 72px;
}
.carrossel__etiqueta {
  display: inline-flex; padding: 6px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  background: var(--amarelo); color: #1a1300; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.carrossel__titulo {
  margin: 0; max-width: 20ch; color: #fff;
  font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; font-weight: 900;
  font-style: italic; text-transform: uppercase; letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.carrossel__titulo span { display: block; font-style: normal; color: var(--amarelo); }
.carrossel__texto {
  margin: 0; max-width: 46rem; font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 300; line-height: 1.55; opacity: .92;
}
.carrossel__prazo {
  margin: 0; padding-left: 12px; border-left: 3px solid var(--amarelo);
  font-weight: 700; font-style: italic; color: var(--amarelo);
}
.carrossel__botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.carrossel__botao { padding: 14px 28px; border-radius: 12px; font-weight: 800; border: 0; }
.carrossel__botao--principal { background: var(--amarelo); color: #1a1300; }
.carrossel__botao--principal:hover { filter: brightness(1.06); }
.carrossel__botao--secundario { background: #2563eb; color: #fff; }
.carrossel__botao--secundario:hover { background: #1d4ed8; }

/* Cores de realce. */
.carrossel__item--laranja .carrossel__etiqueta,
.carrossel__item--laranja .carrossel__botao--principal { background: #f97316; color: #fff; }
.carrossel__item--laranja .carrossel__titulo span,
.carrossel__item--laranja .carrossel__prazo { color: #fb923c; border-color: #fb923c; }
.carrossel__item--azul .carrossel__etiqueta,
.carrossel__item--azul .carrossel__botao--principal { background: #3b82f6; color: #fff; }
.carrossel__item--azul .carrossel__titulo span,
.carrossel__item--azul .carrossel__prazo { color: #93c5fd; border-color: #93c5fd; }

.carrossel__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0, 20, 60, .35); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(4px);
}
.carrossel__seta:hover { background: rgba(0, 20, 60, .6); }
.carrossel__seta--anterior { left: 16px; }
.carrossel__seta--seguinte { right: 16px; }
.carrossel__pontos {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 8px;
}
.carrossel__pontos button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: width .3s, background .3s;
}
.carrossel__pontos button[aria-selected="true"] { width: 30px; background: var(--amarelo); }
.carrossel :focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }

@media (max-width: 760px) {
  .carrossel { min-height: 0; }
  .carrossel__seta { display: none; }
  .carrossel__veu { background: linear-gradient(180deg, rgba(0,34,90,.55), #00225a 85%); }
}
@media (prefers-reduced-motion: reduce) {
  .carrossel__item, .carrossel__fundo { transition: none; }
}