@font-face { font-family: Inter; src: url("vendor/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Inter; src: url("vendor/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fondo: #0b0f24;
  --panel: rgba(12, 17, 40, 0.86);
  --texto: #eef1ff;
  --suave: #a9b3d8;
  --acento: #ffb347;
  --borde: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fondo); color: var(--texto); font-family: Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }

.visor { position: fixed; inset: 0; overflow: hidden; }
.escena, .visor video { position: absolute !important; inset: 0; }
.gestos { position: absolute; inset: 0; z-index: 2; touch-action: none; }

.inicio { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 30% 20%, #26306a 0, transparent 55%), radial-gradient(circle at 80% 90%, #4a2a12 0, transparent 50%), var(--fondo); }
.inicio[hidden] { display: none; }
.inicio-caja { max-width: 360px; text-align: center; }
.serie { margin: 0; color: var(--suave); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.inicio h1 { margin: 6px 0 14px; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.saludo { margin: 0 0 26px; color: var(--suave); font-size: 17px; line-height: 1.45; }
.boton-principal { width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--acento); color: #1b1300; font-weight: 700; font-size: 18px; }
.boton-principal:disabled { opacity: 0.6; }
.nota { margin: 14px 0 0; color: var(--suave); font-size: 13px; line-height: 1.4; }

.buscar { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 18px; pointer-events: none; }
.buscar[hidden] { display: none; }
.marco { width: min(52vw, 230px); aspect-ratio: 70 / 120; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18); animation: latir 1.8s ease-in-out infinite; }
.buscar p { margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--panel); font-weight: 600; font-size: 15px; }
@keyframes latir { 50% { transform: scale(1.04); opacity: 0.7; } }

.ficha { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; max-width: 520px; margin: 0 auto; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 18px; background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-height: 60vh; overflow: auto; }
.ficha[hidden] { display: none; }
.ficha-cabeza { display: flex; align-items: center; gap: 12px; }
.ficha-cabeza > div { flex: 1; min-width: 0; }
.punto { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--acento); box-shadow: 0 0 12px currentColor; }
.ficha h2 { margin: 0; font-size: 22px; line-height: 1.1; }
.ficha-cabeza p { margin: 2px 0 0; color: var(--suave); font-size: 14px; }
.ficha-cuerpo p { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.ficha-cuerpo[hidden] { display: none; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0 0; }
dt { color: var(--suave); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.curioso { color: var(--acento); }
.creditos { color: var(--suave); font-size: 12px !important; }
.creditos a { color: inherit; }

.boton-chico { min-height: 40px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 14px; font-weight: 600; white-space: nowrap; }
.barra { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 6; display: flex; gap: 8px; }
.barra .boton-chico { background: var(--panel); }
.barra [hidden] { display: none; }

.aviso { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: 8; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 12px; background: var(--panel); font-size: 14px; text-align: center; }
.aviso[hidden] { display: none; }