.alma-if {
  --alma-if-gap: 15px;
  --alma-if-per-view: 5;
  --alma-if-brand: #510424;
  position: relative;
  width: 100%;
  overflow: visible;
}

.alma-if * { box-sizing: border-box; }

.alma-if-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  outline: none;
}

.alma-if-track {
  display: flex;
  gap: var(--alma-if-gap);
  width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.alma-if-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--alma-if-gap) * (var(--alma-if-per-view) - 1))) / var(--alma-if-per-view));
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  text-decoration: none !important;
  color: #fff !important;
  isolation: isolate;
  -webkit-user-drag: none;
}

.alma-if-card:focus-visible {
  outline: 2px solid var(--alma-if-brand);
  outline-offset: -2px;
}

.alma-if-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .28s ease;
  pointer-events: none;
  user-select: none;
}

.alma-if-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 45%, rgba(0,0,0,.74) 100%);
  transition: opacity .22s ease;
}

.alma-if-type {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.38));
}

.alma-if-type svg,
.alma-if-stat svg,
.alma-if-nav svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alma-if-type svg {
  color: #fff;
  stroke-width: 1.8;
}

.alma-if-type .alma-if-play { fill: #fff; stroke: #fff; }

.alma-if-meta {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: opacity .18s ease, transform .18s ease;
}

/* Avatar no padrão "story ativo": gradiente externo + respiro branco + logo confinada ao círculo. */
.alma-if-avatar-story {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(
    from 215deg,
    #f9ce34 0deg,
    #f77737 58deg,
    #e1306c 130deg,
    #c13584 205deg,
    #833ab4 275deg,
    #e1306c 325deg,
    #f9ce34 360deg
  );
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.alma-if-avatar-inner {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--alma-if-brand);
}

.alma-if-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--alma-if-brand);
}

.alma-if-meta-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
}

.alma-if-meta-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alma-if-meta-text small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
}

.alma-if-hover {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(0,0,0,.46);
  opacity: 0;
  transition: opacity .2s ease;
}

.alma-if-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
}

.alma-if-stat svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.alma-if-stat strong {
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .alma-if-card:hover .alma-if-hover,
  .alma-if-card:focus-visible .alma-if-hover { opacity: 1; }

  .alma-if-card:hover .alma-if-meta,
  .alma-if-card:focus-visible .alma-if-meta {
    opacity: 0;
    transform: translateY(5px);
  }

  .alma-if-card:hover .alma-if-shade,
  .alma-if-card:focus-visible .alma-if-shade { opacity: 0; }

  .alma-if-card:hover .alma-if-media,
  .alma-if-card:focus-visible .alma-if-media { transform: scale(1.025); }
}

/* Setas Modelar: grandes, vinho e totalmente transparentes em todos os estados. */
.alma-if-nav,
.alma-if-nav:hover,
.alma-if-nav:focus,
.alma-if-nav:focus-visible,
.alma-if-nav:active {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 62px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 11px;
  transform: translateY(-50%);
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--alma-if-brand) !important;
  cursor: pointer;
  opacity: 1;
}

.alma-if-nav svg {
  width: 40px;
  height: 40px;
  stroke: var(--alma-if-brand);
  stroke-width: 1.85;
  fill: none;
}

.alma-if-prev { left: -8px; }
.alma-if-next { right: -8px; }

.alma-if-empty {
  padding: 14px 16px;
  border: 1px dashed #c3c4c7;
  border-radius: 8px;
  font: 14px/1.45 system-ui, sans-serif;
}

@media (max-width: 1599px) {
  .alma-if { --alma-if-per-view: 4; }
}

@media (max-width: 991px) {
  .alma-if { --alma-if-per-view: 3; }
}

@media (max-width: 767px) {
  .alma-if { --alma-if-per-view: 1; }
  .alma-if-card { border-radius: 9px; }

  .alma-if-nav,
  .alma-if-nav:hover,
  .alma-if-nav:focus,
  .alma-if-nav:focus-visible,
  .alma-if-nav:active {
    width: 50px;
    height: 60px;
    padding: 9px;
  }

  .alma-if-nav svg {
    width: 34px;
    height: 34px;
  }

  .alma-if-prev { left: 0; }
  .alma-if-next { right: 0; }
}