/* Celulares do banner com cara de Reels: desenho nosso, sem o logo nem o nome do Instagram
   (as regras da Meta pedem permissão para usar telas dela em propaganda). */
.carrossel .celular { container-type: inline-size; }
.carrossel .celular canvas, .carrossel .celular .vitrine-video { height: calc(100% - 13cqw); }
.carrossel .celular figcaption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: none; }
.carrossel .celular .selo-celular { top: 4cqw; right: 4cqw; z-index: 4; }

.reels-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #fff; font-family: Rubik, system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.reels-ui::before { content: ""; position: absolute; left: 0; right: 0; bottom: 13cqw; height: 52%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6)); }
.reels-ui svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.ru-acoes { position: absolute; right: 3.5cqw; bottom: calc(13cqw + 5cqw); display: flex; flex-direction: column; align-items: center; gap: 5.5cqw; }
.ru-acoes .ic { width: 8.4cqw; }
.ru-acoes .ic-mais { width: 6cqw; }
.ru-audio { width: 9cqw; height: 9cqw; border: .7cqw solid #fff; border-radius: 2.4cqw; background: #fff; overflow: hidden; display: grid; place-items: center; }
.ru-audio img { width: 82%; }

.ru-info { position: absolute; left: 4cqw; right: 17cqw; bottom: calc(13cqw + 5cqw); display: flex; flex-direction: column; gap: 2.4cqw; }
.ru-perfil { display: flex; align-items: center; gap: 2.4cqw; font-size: 5.2cqw; min-width: 0; }
.ru-avatar { width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff; padding: 1cqw; flex: none; }
.ru-nome { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ru-seguir { flex: none; border: .4cqw solid rgba(255, 255, 255, .85); border-radius: 2cqw; padding: .9cqw 2.6cqw; font-size: 4.4cqw; font-weight: 700; }
.ru-legenda { margin: 0; font-size: 5cqw; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-legenda span { opacity: .75; }
.ru-musica { margin: 0; display: flex; align-items: center; gap: 1.6cqw; font-size: 4.4cqw; white-space: nowrap; overflow: hidden; }
.ru-musica .ic { width: 4.4cqw; flex: none; }
.ru-musica span { overflow: hidden; text-overflow: ellipsis; }

.ru-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 13cqw; background: #000; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-around; align-items: center; padding: 0 3cqw; }
.ru-barra .ic { width: 6.4cqw; }
.ru-barra .ic-eu { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: #fff; padding: .6cqw; }