/* O³ — visor de video de los casos (video.js marca los marcos con [data-video]) */
:root { --lux: cubic-bezier(.16, 1, .3, 1); --gold: #B8A88A; }

/* Marco con video: invita a tocar */
[data-video] { cursor: pointer; }
[data-video] img, [data-video] video { transition: transform 1.2s var(--lux); }
[data-video] [style*="border-radius: 50%"] { transition: background-color .5s var(--lux), border-color .5s var(--lux), color .5s var(--lux), transform .6s var(--lux); }
[data-video]:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
@media (hover: hover) {
  [data-video]:hover img, [data-video]:hover video { transform: scale(1.04); }
  [data-video]:hover [style*="border-radius: 50%"] { background-color: var(--gold) !important; border-color: var(--gold) !important; color: #050505 !important; transform: scale(1.08); }
}

/* Visor */
html.o3-lock, html.o3-lock body { overflow: hidden; }
.o3-vbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 64px 20px 72px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .8s; }
.o3-vbox.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.o3-vbox__veil { position: absolute; inset: 0; background: rgba(5, 5, 5, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity .7s var(--lux); }
.o3-vbox.is-open .o3-vbox__veil { opacity: 1; }
.o3-vbox__stage { position: relative; z-index: 1; width: min(calc((100vh - 136px) * 9 / 16), 100%); width: min(calc((100dvh - 136px) * 9 / 16), 100%); aspect-ratio: 9 / 16; background: #050505; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--lux); }
.o3-vbox.is-open .o3-vbox__stage { clip-path: inset(0); }
.o3-vbox video { display: block; width: 100%; height: 100%; object-fit: contain; background: #050505; }
.o3-vbox__close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; transition: transform .6s var(--lux); }
.o3-vbox__close::before, .o3-vbox__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 1px; background: #FAF9F6; transition: background-color .4s; pointer-events: none; }
.o3-vbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.o3-vbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.o3-vbox__close:hover { transform: rotate(90deg); }
.o3-vbox__close:hover::before, .o3-vbox__close:hover::after { background: var(--gold); }
.o3-vbox__cap { position: absolute; left: 20px; right: 20px; bottom: 26px; z-index: 1; text-align: center; font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .3em; color: var(--gold); opacity: 0; transition: opacity .8s ease .5s; }
.o3-vbox.is-open .o3-vbox__cap { opacity: 1; }

@media (max-width: 640px) {
  .o3-vbox { padding: 56px 0; }
  .o3-vbox__stage { width: min(calc((100vh - 112px) * 9 / 16), 100%); width: min(calc((100dvh - 112px) * 9 / 16), 100%); }
  .o3-vbox__cap { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .o3-vbox, .o3-vbox__veil, .o3-vbox__stage, .o3-vbox__cap, [data-video] img, [data-video] [style*="border-radius: 50%"] { transition: none !important; }
}