/* ==========================================================================
   Instagram best reels
   ========================================================================== */
.reels { background: var(--tinta); color: var(--marfim); overflow: hidden; }
.reels-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(36px, 5vw, 60px); }
.reels-cab .hc-rot { color: var(--blush); }
.reels-cab .h2 { max-width: 640px; }
.reels-perfil { display: inline-flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border: 1px solid var(--linha-clara); border-radius: 999px; color: inherit; text-decoration: none; font-size: 14px; transition: background .35s var(--ease), color .35s var(--ease); }
.reels-perfil .ico { font-size: 18px; }
.reels-perfil b { font-weight: 500; padding: 9px 16px; border-radius: 999px; background: var(--marfim); color: var(--tinta); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.reels-perfil:hover { background: rgba(255, 255, 255, .06); }

/* full-width strip that runs without stopping; two identical laps slide one lap */
.reels-trilho { position: relative; overflow: hidden; padding-top: 4%; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.reels-fita { display: flex; align-items: flex-end; gap: clamp(12px, 1.4vw, 20px); width: max-content; animation: reels-corre var(--duracao, 48s) linear infinite; }
@keyframes reels-corre { to { transform: translateX(calc(-50% - clamp(12px, 1.4vw, 20px) / 2)); } }
.reels-trilho:hover .reels-fita, .reels-trilho.parado .reels-fita, .reels-trilho.com-som .reels-fita { animation-play-state: paused; }
.reels-fita .reel { flex: 0 0 clamp(190px, 18vw, 270px); }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--borda); overflow: hidden; background: var(--tinta-2); isolation: isolate; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.reel::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 22%, transparent 58%, rgba(0, 0, 0, .78) 100%); pointer-events: none; }
.reel-link { position: absolute; inset: 0; z-index: 2; }
.reel-link:focus-visible { outline: 2px solid var(--marfim); outline-offset: -4px; border-radius: var(--borda); }
.reel-ig { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 20px; pointer-events: none; }
.reel-pe { position: absolute; left: 16px; right: 60px; bottom: 16px; z-index: 3; pointer-events: none; }
.reel-pe b { display: block; font-weight: 400; font-size: 18px; line-height: 1.2; }
.reel-pe span { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; opacity: .8; }
.reel-pe .ico { font-size: 13px; }
.reel-som { position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; cursor: pointer; }
.reel-som svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reel-som .on { display: none; }
.reel-som[aria-pressed="true"] .on { display: block; }
.reel-som[aria-pressed="true"] .off { display: none; }
.reel-som:focus-visible { outline: 2px solid var(--marfim); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .reel video { transition: none; }
  .reels-fita { animation: none; }
  .reels-trilho { overflow-x: auto; }
}
html .reels .h2 .s, html[data-tema] .reels .h2 .s { color: var(--blush); }

/* ---- Dock effect ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  /* space above so the enlarged reel doesn't run into the title */
  .reels-trilho { padding-top: clamp(80px, 10vw, 150px); }
  .reel { transform-origin: 50% 100%; transition: scale .32s var(--ease), translate .32s var(--ease), box-shadow .32s var(--ease); will-change: scale, translate; }
  .reels-trilho.doca .reel { transition-duration: .16s; }
  .reels-trilho.doca .reel { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
  .reels-cab { margin-bottom: clamp(8px, 1.5vw, 20px); }
}
@media (prefers-reduced-motion: reduce) { .reel { transition: none; } }
.reel-pe small { display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }