/* ==========================================================================
   sections/works.css
   Sección TRABAJOS REALES: videos verticales (reels).
   ========================================================================== */
.reels { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; perspective: 1200px; }
.reel { position: relative; width: min(260px, 70vw); aspect-ratio: 9/16; margin: 0; border-radius: 24px; overflow: hidden; cursor: pointer; background: #111; border: 1px solid var(--line-2); box-shadow: 0 40px 70px -30px rgba(0,0,0,.9); transition: transform .5s var(--ease), box-shadow .5s, border-color .4s, opacity .9s var(--ease) var(--d, 0ms); }
.reel:nth-child(odd) { transform: rotate(-2deg); } .reel:nth-child(even) { transform: rotate(2deg) translateY(24px); }
.reel.reveal:not(.in) { transform: translateY(40px); }
.reel:hover { transform: translateY(-10px) rotate(0) scale(1.02); border-color: rgba(227,38,43,.6); box-shadow: 0 40px 80px -30px rgba(227,38,43,.6); }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 40px 14px 14px; font-weight: 700; font-size: .9rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); }
.reel__badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--red); flex: none; box-shadow: 0 0 0 0 rgba(227,38,43,.6); animation: ping 2s infinite; }
.reel__badge .ico { width: 16px; height: 16px; }
.reel--cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 30%, rgba(227,38,43,.45), transparent 60%), linear-gradient(160deg, #1b1b22, #0b0b0f); }
.reel--cta b { font-family: var(--font-d); font-size: 1.3rem; }
.reel--cta > span:not(.btn) { color: var(--muted); font-size: .9rem; }
.reel__cta-ico { display: flex; gap: 10px; margin-bottom: 8px; }
.reel__cta-ico .ico { width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: rgba(255,255,255,.08); }
.reel--cta .btn { margin-top: 8px; }
.lightbox--video { width: auto; max-width: 100%; background: #000; }