/* =====================================================
   assets/css/destaques.css (2026-10-14)
   Áreas de destaques (banners) da Homepage — sem moldura, sem fundo
   próprio. A palavra "banner" é evitada nos nomes públicos
   (bloqueadores de anúncio). Respiro: 48px (desktop) / 32px (mobile).
   ===================================================== */
.stieen-dst { padding: 48px 0; background: transparent; --dst-gap: 24px; }
.stieen-dst + .stieen-pilares { margin-top: 0; }

.stieen-dst-item a { display: block; height: 100%; }
.stieen-dst-item picture { display: block; height: 100%; }
.stieen-dst-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Horizontal: ocupa toda a largura do conteúdo; rodízio em fade ---- */
.stieen-dst-horiz { position: relative; width: 100%; aspect-ratio: 8 / 1; }
.stieen-dst-horiz .stieen-dst-item {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.stieen-dst-horiz .stieen-dst-item.is-ativo { opacity: 1; visibility: visible; z-index: 1; transition-delay: 0s; }

/* ---- Verticais (1:1 e 4:5): 3 por vez no desktop, 2 no tablet, 1 no celular ---- */
.stieen-dst-vert { --dst-n: 3; overflow: hidden; }
.stieen-dst-trilho { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dst-gap); }
.stieen-dst-vert .stieen-dst-item {
  flex: 0 0 calc((100% - (var(--dst-n) - 1) * var(--dst-gap)) / var(--dst-n));
  aspect-ratio: var(--dst-ar, 1 / 1);
  min-width: 0;
}
.stieen-dst-vert.is-carrossel .stieen-dst-trilho { flex-wrap: nowrap; justify-content: flex-start; will-change: transform; }
.stieen-dst-vert.is-manual { overflow-x: auto; }
.stieen-dst-vert.is-manual .stieen-dst-trilho { flex-wrap: nowrap; justify-content: flex-start; }

@media (max-width: 900px) { .stieen-dst-vert { --dst-n: 2; } }
@media (max-width: 720px) {
  .stieen-dst { padding: 32px 0; --dst-gap: 16px; }
  .stieen-dst-horiz.tem-mobile { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) { .stieen-dst-vert { --dst-n: 1; } }
@media (prefers-reduced-motion: reduce) {
  .stieen-dst-horiz .stieen-dst-item { transition: none; }
}
[data-movimento="reduzido"] .stieen-dst-horiz .stieen-dst-item { transition: none; }