/* Componente compartilhado: cada raiz possui navegação e estado independentes. */
.activity-carousel { --card-width: min(76vw,410px); position: relative; max-width: 960px; margin-inline: auto; }
.activity-carousel .carousel-track { position: relative; display: flex; flex-wrap: nowrap; gap: 24px; overflow-x: auto; padding: 30px calc((100% - var(--card-width)) / 2) 38px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.activity-carousel .subject-card { box-sizing: border-box; flex: 0 0 var(--card-width); min-width: 0; display: flex; flex-direction: column; scroll-snap-align: center; transform: scale(.92); opacity: .7; transition: transform .25s ease; }
.activity-carousel .subject-card.is-active { transform: scale(1); opacity: 1; box-shadow: 0 8px 24px #12345b18; }
.carousel-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.carousel-track.is-dragging a { user-select: none; }
.carousel-controls { display: flex; justify-content: center; padding-bottom: 12px; }
.activity-carousel .carousel-arrow { position: absolute; top: 45%; z-index: 2; width: 44px; min-height: 44px; padding: 0; border: 1px solid #c9dae7; border-radius: 50%; background: white; color: #12345b; font-size: 1.4rem; cursor: pointer; }
.carousel-arrow[data-prev] { left: 4px; } .carousel-arrow[data-next] { right: 4px; }
.carousel-arrow:disabled { opacity: .35; cursor: default; }
.carousel-dots { display: flex; gap: 2px; }
.activity-carousel .carousel-dot { width: 36px; min-height: 44px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.carousel-dot::after { content: ''; width: 7px; height: 7px; border-radius: 8px; background: #b9cbd8; }
.carousel-dot[aria-pressed="true"]::after { width: 22px; background: #17659a; }
.carousel-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.carousel-track:focus-visible,.carousel-controls button:focus-visible { outline: 3px solid #17659a; outline-offset: 3px; }
@media(max-width:580px) { .activity-carousel { --card-width: min(85vw,calc(100vw - 56px)); } .activity-carousel .carousel-arrow { width: 32px; } }
@media(prefers-reduced-motion:reduce) { .activity-carousel .subject-card { transition: none; } }