/* Ojo Avizor: sala A, círculo clásico. Todo el estilo queda dentro de main.ow. */
@font-face { font-family: 'OW Russo'; src: url('../assets/fonts/russo-one-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
main.ow { --ow-bg: #08060f; --ow-panel: #1b1236; --ow-line: #554977; --ow-ink: #f1ecff; --ow-muted: #c7bce5; --ow-gold: #ffd23f; --ow-pink: #ff6c89; box-sizing: border-box; max-width: 1180px; margin: 10px auto 28px; padding: 0 0 24px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 15%, #2a1a4a 0%, #140c26 52%, #08060f 100%); color: var(--ow-ink); }
.ow *, .ow *::before, .ow *::after { box-sizing: border-box; }
.ow h1, .ow h2, .ow h3 { font-family: 'OW Russo', Inter, 'Segoe UI', system-ui, sans-serif; font-weight: 400; line-height: 1.15; }
.ow h1 { font-size: clamp(2rem, 5vw, 3rem); }
.ow h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ow-gold); }
.ow h3 { font-size: 1.1rem; }
.ow p, .ow dd, .ow li { line-height: 1.5; overflow-wrap: anywhere; }
.ow a { color: #ffe080; }
.ow a:focus-visible, .ow button:focus-visible, .ow input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ow .btn { background: var(--ow-panel); border: 1px solid var(--ow-line); color: var(--ow-ink); }
.ow .btn:hover { border-color: var(--ow-gold); }
.ow .btn.pri { background: var(--ow-gold); border-color: var(--ow-gold); color: #251a00; }
.ow .btn.pri:hover { background: #ffe06f; }
.ow-lead { max-width: 65ch; color: var(--ow-muted); font-size: 1.1rem; }
.ow-muted { color: var(--ow-muted); }
.ow-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: center; padding: 42px 28px 24px; }
.ow-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.ow-sec { padding: 26px 28px 8px; }
.ow-sec > h2 { margin-bottom: 16px; }
.ow-steps, .ow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ow-steps { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ow-steps li, .ow-card { min-width: 0; background: var(--ow-panel); border: 1px solid var(--ow-line); border-radius: 14px; padding: 16px; }
.ow-steps li > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ow-gold); color: #251a00; margin-bottom: 10px; }
.ow-steps h3, .ow-card h3 { margin-bottom: 6px; }
.ow-steps p, .ow-card p { margin: 0; color: var(--ow-muted); }
.ow-card h2 { font-size: 1.35rem; margin-bottom: 10px; }
.ow-example { margin-top: 12px !important; padding: 8px 10px; border-radius: 8px; background: #2a1d4c; color: var(--ow-ink) !important; }
.ow-state { display: inline-block; color: var(--ow-muted); border: 1px solid var(--ow-line); border-radius: 99px; padding: 2px 9px; font-size: .8rem; margin-bottom: 9px; }
.ow-state.ow-on { color: #fff1ac; border-color: var(--ow-gold); }
.ow-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ow-faq dt { font-weight: 700; margin-top: 16px; }
.ow-faq dd { margin: 4px 0 0; color: var(--ow-muted); max-width: 75ch; }
.ow-cat { margin: 28px 12px 0; padding: 16px 18px; border-radius: 14px; background: #f1ecff; color: #16121e; }
.ow-cat h2 { color: #241834; }
.ow-cat a { color: #392b72; }
.ow-cat .btn { background: #fff; color: #241834; border-color: #8c83a4; }
.ow-cat .btn.pri { background: #5b358d; color: #fff; border-color: #5b358d; }

/* Vista estática de la sala A. Las posiciones usan porcentajes para que el círculo escale. */
.ow-scene { position: relative; width: 100%; min-width: 0; aspect-ratio: 1 / 1; border: 2px solid var(--ow-line); border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, #352056 0%, #1a1030 58%, #0a0713 100%); box-shadow: 0 0 32px #0008; }
.ow-orbit { position: absolute; inset: 18% 8%; border: 2px dashed #ffffff38; border-radius: 50%; }
.ow-aim { position: absolute; left: 49%; top: 30%; width: 2px; height: 24%; border-left: 3px dashed var(--ow-gold); transform: rotate(-32deg); transform-origin: bottom; opacity: .8; }
.ow-eye { position: absolute; left: 50%; top: 48%; width: 25%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid #1a1030; background: radial-gradient(circle at 36% 30%, #fff, #eee7f8 64%, #afa1ca); box-shadow: 0 8px 18px #0009; }
.ow-iris { position: absolute; width: 42%; aspect-ratio: 1; left: 24%; top: 22%; border-radius: 50%; background: radial-gradient(circle, #9456f2, #6032af); border: 3px solid #362052; animation: ow-look 5s ease-in-out infinite alternate; }
.ow-pupil { position: absolute; inset: 26%; border-radius: 50%; background: #0a0612; }
.ow-pupil::after { content: ''; position: absolute; left: 5%; top: 2%; width: 35%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.ow-lens { position: absolute; width: 65%; aspect-ratio: 1; left: 36%; top: 28%; border-radius: 50%; border: clamp(3px, .7vw, 8px) solid var(--ow-gold); background: #bfe8ff12; }
.ow-handle { position: absolute; left: 90%; top: 83%; width: 4%; height: 62%; border-left: 3px dashed var(--ow-gold); transform: rotate(-25deg); transform-origin: top; }
.ow-prompt { position: absolute; left: 23%; right: 23%; top: 68%; text-align: center; }
.ow-prompt small { display: block; color: var(--ow-muted); }
.ow-prompt b { color: var(--ow-gold); font-size: clamp(.75rem, 1.5vw, 1.2rem); }
.ow-seat { position: absolute; width: 18%; text-align: center; transform: translate(-50%, -50%); font-size: clamp(.55rem, 1vw, .8rem); }
.ow-seat-1 { left: 50%; top: 11%; }.ow-seat-2 { left: 78%; top: 21%; }.ow-seat-3 { left: 90%; top: 48%; }.ow-seat-4 { left: 78%; top: 75%; }.ow-seat-5 { left: 50%; top: 87%; }.ow-seat-6 { left: 22%; top: 75%; }.ow-seat-7 { left: 10%; top: 48%; }.ow-seat-8 { left: 22%; top: 21%; }
.ow-avatar { display: grid; place-items: center; width: clamp(24px, 5vw, 42px); aspect-ratio: 1; margin: auto; border-radius: 50%; background: #6336a3; border: 2px solid #a68cda; color: #fff; font-weight: 700; }
.ow-target .ow-avatar { background: #a65a27; border-color: var(--ow-gold); box-shadow: 0 0 16px var(--ow-gold); }
.ow-seat-name { display: block; padding: 1px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 5px; background: #0009; }
.ow-lives { display: flex; justify-content: center; gap: 3px; }
.ow-lives i { width: 6px; height: 6px; background: var(--ow-pink); border-radius: 50%; }
@keyframes ow-look { to { transform: translate(18%, 10%); } }

/* Canal y ficha */
main.ow-page { padding: 26px 28px 30px; }
.ow-page > .ow-card, .ow-page > .ow-grid { margin-top: 16px; }
.ow-channel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ow-channel > div:nth-child(2) { flex: 1; min-width: 180px; }
.ow-channel-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #6336a3; border: 2px solid var(--ow-gold); font: 2rem 'OW Russo', sans-serif; }
.ow-channel .ow-state { margin: 8px 0 0; }
.ow-page .ow-ranks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ow-rank { padding-left: 0; margin: 0; list-style: none; counter-reset: ow-rank; }
.ow-rank li { counter-increment: ow-rank; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 3px 8px; padding: 5px 0; border-bottom: 1px solid var(--ow-line); }
.ow-rank li::before { content: counter(ow-rank); color: var(--ow-muted); }
.ow-rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-rank li small { grid-column: 2; color: var(--ow-muted); }
.ow-rank li b { grid-column: 3; grid-row: 1 / 3; color: var(--ow-gold); }
.ow-podium { margin: 8px 0 0; padding-left: 24px; }
.ow-podium li { padding: 4px 0; }.ow-podium span { color: var(--ow-muted); margin-left: 10px; }
.ow-stats { margin: 0; }.ow-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ow-line); }.ow-stats dt { color: var(--ow-muted); }.ow-stats dd { margin: 0; text-align: right; font-weight: 700; }
.ow-who { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }.ow-who p { margin: 0; }
.ow-level { display: flex; align-items: center; gap: 20px; }.ow-level > div:last-child { flex: 1; min-width: 0; }
.ow-level-ring { flex: none; display: grid; place-content: center; text-align: center; width: 96px; height: 96px; border: 4px solid var(--ow-gold); border-radius: 50%; }.ow-level-ring b { font: 2rem 'OW Russo', sans-serif; }.ow-level-ring span { color: var(--ow-muted); font-size: .75rem; }
.ow-bar { height: 14px; border: 1px solid var(--ow-line); border-radius: 9px; overflow: hidden; background: #08060f; }.ow-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8d57d7, var(--ow-gold)); }
.ow-missions { padding: 0; margin: 0; list-style: none; }.ow-missions li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ow-line); }.ow-missions li b { flex: none; }.ow-done { color: #a8f4c8; }
.ow-dev { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 20px; }.ow-dev input { display: block; max-width: 100%; padding: 9px; border: 1px solid var(--ow-line); border-radius: 7px; background: var(--ow-panel); color: var(--ow-ink); }
.ow-error { padding: 10px 14px; border: 1px solid #ff9aae; border-radius: 8px; color: #ffd7df; }
@media (max-width: 900px) { .ow-hero { grid-template-columns: 1fr; }.ow-scene { max-width: 560px; margin: auto; }.ow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ow-page .ow-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { main.ow { margin: 4px 0 20px; border-radius: 0; }.ow-hero { padding: 24px 16px 10px; }.ow-sec { padding: 22px 16px 4px; }.ow-steps, .ow-grid, .ow-two, .ow-page .ow-ranks { grid-template-columns: 1fr; }.ow-scene { width: min(100%, 420px); }.ow-prompt { left: 18%; right: 18%; }.ow-page { padding: 20px 16px !important; }.ow-level { flex-direction: column; align-items: flex-start; }.ow-cat { margin: 24px 0 0; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .ow-iris { animation: none; } }