/* ============ MIENTRAS COINCIDIMOS · estilos ============ */
@font-face { font-family: 'Outfit'; src: url('../vendor/fonts/outfit-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; src: url('../vendor/fonts/outfit-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noche: #071126; --oro: #F4C76B; --coral: #F28C82; --cian: #65D8E8; --lavanda: #B7A1E8;
  --texto: #FFF7EA; --texto2: rgba(255, 247, 234, .78);
  --t: 1.2s; --ease: cubic-bezier(.22, .8, .24, 1);
  --fuente: 'Outfit', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noche); color: var(--texto); font-family: var(--fuente);
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: none; }
body.cursor-on, body.cursor-pers { cursor: default; }
img { -webkit-user-drag: none; }
canvas#scene, canvas#top { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#top { pointer-events: none; z-index: 30; }
video#cam { position: fixed; width: 2px; height: 2px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

/* Escenario lógico 1920×1080 escalado al área segura (lo calcula experiencia.js) */
#stage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; z-index: 10; pointer-events: none; }
#stage button, #stage input, #stage .teclado { pointer-events: auto; }

.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility 0s linear var(--t); }
.scr.on { opacity: 1; visibility: visible; transition: opacity var(--t) var(--ease), visibility 0s; }

/* Tipografía grande, pensada para 2–3 m */
.titulo { position: absolute; left: 0; right: 0; top: 52px; margin: 0; text-align: center; font-weight: 300; font-size: 104px; letter-spacing: .01em;
  color: var(--texto); text-shadow: 0 0 40px rgba(244, 199, 107, .35), 0 4px 30px rgba(0, 0, 0, .6); }
.invitacion { position: absolute; left: 0; right: 0; top: 192px; margin: 0; text-align: center; font-size: 44px; font-weight: 400; color: var(--oro);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7); animation: respira 4.5s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

.frase { position: absolute; left: 160px; right: 160px; top: 64px; margin: 0; text-align: center; font-weight: 400; font-size: 62px; line-height: 1.16;
  text-wrap: balance; text-shadow: 0 0 30px rgba(7, 17, 38, .95), 0 2px 18px rgba(0, 0, 0, .8); transition: opacity .8s var(--ease); }
.frase.grande { font-size: 74px; font-weight: 400; top: 56px; }
.frase.grande ~ .sub { top: 262px; font-size: 44px; font-weight: 400; color: var(--oro); }
.sub { position: absolute; left: 200px; right: 200px; top: 220px; margin: 0; text-align: center; font-size: 38px; font-weight: 300; color: var(--texto2);
  text-wrap: balance; text-shadow: 0 2px 16px rgba(0, 0, 0, .85); transition: opacity .8s var(--ease); }
.hint { position: absolute; left: 200px; right: 200px; bottom: 210px; margin: 0; text-align: center; font-size: 36px; font-weight: 400; color: var(--oro);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .9); transition: opacity .8s var(--ease); }
.frase:empty, .sub:empty, .hint:empty { opacity: 0; }

/* Botones */
.mc-btn { position: relative; overflow: hidden; display: none; align-items: center; justify-content: center; min-width: 300px; min-height: 96px; padding: 0 54px;
  border-radius: 60px; border: 2px solid rgba(244, 199, 107, .85); background: rgba(10, 22, 52, .62); backdrop-filter: blur(10px);
  color: var(--texto); font: 500 38px/1 var(--fuente); letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 0 34px rgba(244, 199, 107, .22), inset 0 0 22px rgba(244, 199, 107, .12); transition: transform .25s var(--ease), box-shadow .25s, background .25s, opacity .6s; }
.mc-btn.on { display: inline-flex; animation: aparece .9s var(--ease); }
.mc-btn.sec { border-color: rgba(255, 247, 234, .45); box-shadow: 0 0 24px rgba(255, 247, 234, .08); }
.mc-btn.grande { min-width: 420px; min-height: 116px; font-size: 46px; }
.mc-btn.hover, .mc-btn:focus-visible, .mc-btn.foco { transform: scale(1.05); box-shadow: 0 0 50px rgba(244, 199, 107, .55), inset 0 0 30px rgba(244, 199, 107, .25); outline: none; }
.mc-btn:active { transform: scale(.97); }
.mc-btn .lbl { position: relative; z-index: 2; }
.prog { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, rgba(244, 199, 107, .18), rgba(244, 199, 107, .48));
  z-index: 1; pointer-events: none; }
@keyframes aparece { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

#atrTitulo { } #scrAtraccion .mc-btn { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); }
#scrAtraccion .mc-btn.hover { transform: translateX(-50%) scale(1.05); }
#scrAtraccion .mc-btn.on { display: inline-flex; animation: none; }

#botonera { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: center; gap: 40px; pointer-events: none; }
#intenciones { position: absolute; left: 0; right: 0; bottom: 190px; display: flex; justify-content: center; gap: 28px; pointer-events: none; }
#intenciones .mc-btn { min-width: 0; padding: 0 40px; font-size: 34px; min-height: 90px; }
#intenciones .mc-btn.elegida { background: rgba(244, 199, 107, .35); }
.int[data-int="0"] { border-color: var(--oro) } .int[data-int="1"] { border-color: var(--cian) } .int[data-int="2"] { border-color: var(--coral) } .int[data-int="3"] { border-color: var(--lavanda) }

.sugerencia { position: absolute; left: 0; right: 0; top: 226px; margin: 0; text-align: center; font-size: 32px; font-style: italic; color: rgba(255, 247, 234, .7);
  opacity: 0; transition: opacity 1s; }
.sugerencia.on { opacity: 1; }
.privacidad { position: absolute; left: 60px; bottom: 26px; margin: 0; font-size: 20px; color: rgba(255, 247, 234, .55); opacity: 0; transition: opacity 1s; }
.privacidad.on { opacity: 1; }

#esquina { position: absolute; left: 50px; top: 40px; display: flex; gap: 16px; pointer-events: none; }
.mini-btn { position: relative; overflow: hidden; display: none; min-height: 60px; min-width: 150px; padding: 0 26px; border-radius: 32px;
  border: 1px solid rgba(255, 247, 234, .25); background: rgba(7, 17, 38, .45); color: rgba(255, 247, 234, .72); font: 400 24px/1 var(--fuente); cursor: pointer; }
.mini-btn.on { display: inline-flex; align-items: center; justify-content: center; }
.mini-btn.hover { color: var(--texto); border-color: var(--oro); }
.mini-btn .lbl { position: relative; z-index: 2; }

#firma { position: absolute; right: 40px; bottom: 22px; margin: 0; font-size: 20px; letter-spacing: .03em; color: rgba(255, 247, 234, .55); }

/* Avisos */
.aviso { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); display: flex; align-items: center; gap: 28px;
  padding: 34px 56px; border-radius: 34px; background: rgba(7, 17, 38, .78); border: 1px solid rgba(244, 199, 107, .55); backdrop-filter: blur(14px);
  font-size: 44px; color: var(--texto); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s linear .8s; z-index: 5; }
.aviso.on { pointer-events: auto; cursor: pointer; opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s; }
.mano-ico { width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--oro); position: relative; flex: none; animation: respira 2s infinite; }
.mano-ico::after { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 24px var(--oro); }

/* Personalización */
#scrPers .card { position: absolute; left: 50%; top: 60px; width: 1180px; transform: translateX(-50%); padding: 46px 70px 40px; border-radius: 40px;
  background: rgba(7, 17, 38, .82); border: 1px solid rgba(244, 199, 107, .35); backdrop-filter: blur(16px); text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transition: top .6s var(--ease); }
#scrPers.con-teclado .card { top: 70px; padding-top: 34px; padding-bottom: 34px; }
#scrPers.con-teclado .card > :not(.campos) { display: none !important; }
#scrPers h2 { margin: 0 0 10px; font-weight: 400; font-size: 56px; }
#scrPers .sub { position: static; font-size: 30px; margin: 0 0 22px; }
#scrPers .mini { margin: 6px 0; font-size: 26px; color: var(--texto2); }
#scrPers .nota { margin: 18px 0 22px; font-size: 24px; color: rgba(255, 247, 234, .6); }
.pills { display: flex; justify-content: center; gap: 22px; margin: 6px 0 22px; }
.pill { position: relative; overflow: hidden; width: 96px; height: 80px; border-radius: 40px; border: 2px solid rgba(255, 247, 234, .3); background: rgba(255, 255, 255, .05);
  color: var(--texto); font: 500 38px/1 var(--fuente); cursor: pointer; }
.pill.sel { border-color: var(--oro); background: rgba(244, 199, 107, .22); box-shadow: 0 0 24px rgba(244, 199, 107, .35); }
.pill.hover { border-color: var(--oro); }
.campos { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.campo { display: flex; align-items: center; gap: 20px; width: 820px; }
.campo.off { display: none; }
.campo .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.dot.c0 { background: var(--coral); box-shadow: 0 0 16px var(--coral); } .dot.c1 { background: var(--cian); box-shadow: 0 0 16px var(--cian); }
.dot.c2 { background: var(--lavanda); box-shadow: 0 0 16px var(--lavanda); }
.campo input { flex: 1; min-width: 0; height: 78px; padding: 0 28px; border-radius: 22px; border: 1px solid rgba(255, 247, 234, .28); background: rgba(255, 255, 255, .06);
  color: var(--texto); font: 400 36px var(--fuente); outline: none; user-select: text; -webkit-user-select: text; cursor: text; }
.campo input:focus { border-color: var(--oro); box-shadow: 0 0 22px rgba(244, 199, 107, .3); }
.campo input::placeholder { color: rgba(255, 247, 234, .35); }
.toggle { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 18px; margin: 22px auto 0; padding: 14px 30px; border-radius: 40px;
  border: 1px solid rgba(183, 161, 232, .5); background: rgba(183, 161, 232, .08); color: var(--texto); font: 400 30px var(--fuente); cursor: pointer; }
.toggle.hover { border-color: var(--lavanda); }
.toggle .sw { width: 64px; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, .18); position: relative; flex: none; z-index: 2; transition: background .3s; }
.toggle .sw::after { content: ''; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: left .3s var(--ease); }
.toggle[aria-pressed="true"] .sw { background: var(--lavanda); } .toggle[aria-pressed="true"] .sw::after { left: 32px; }
.toggle .t { position: relative; z-index: 2; }
.fila { display: flex; justify-content: center; gap: 28px; }
#scrPers .mc-btn { display: inline-flex; }

.teclado { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: none; flex-direction: column; gap: 10px; padding: 22px; border-radius: 28px;
  background: rgba(7, 17, 38, .9); border: 1px solid rgba(244, 199, 107, .35); }
.teclado.on { display: flex; }
.teclado .fk { display: flex; gap: 10px; justify-content: center; }
.teclado button { min-width: 84px; height: 66px; border-radius: 16px; border: 1px solid rgba(255, 247, 234, .2); background: rgba(255, 255, 255, .07);
  color: var(--texto); font: 400 32px var(--fuente); cursor: pointer; }
.teclado button:active { background: rgba(244, 199, 107, .35); }
.teclado button.ancha { min-width: 420px; } .teclado button.media { min-width: 170px; }

/* ===== Panel de operador interno ===== */
#zonaPanel { position: fixed; left: 0; top: 0; width: 110px; height: 110px; z-index: 40; }
.panel { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(4, 9, 22, .985); color: #eee; font: 15px/1.45 'Segoe UI', system-ui, sans-serif;
  cursor: default; user-select: text; -webkit-user-select: text; }
.panel.on { display: block; }
.panel .login { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 380px; padding: 30px; border-radius: 18px; background: #0f1830;
  border: 1px solid rgba(244, 199, 107, .4); text-align: center; }
.panel .login input { width: 100%; height: 50px; margin: 14px 0; padding: 0 14px; border-radius: 10px; border: 1px solid #445; background: #0a1124; color: #fff; font-size: 18px; }
.perr { color: #ff8f86; min-height: 20px; margin: 8px 0 0; }
.pcuerpo { display: none; position: absolute; inset: 0; overflow: auto; padding: 0 26px 40px; }
.panel.auth .login { display: none; } .panel.auth .pcuerpo { display: block; }
.pcuerpo header { position: sticky; top: 0; display: flex; align-items: center; gap: 16px; padding: 16px 0; background: rgba(4, 9, 22, .98); z-index: 3; }
.pcuerpo header b { font-size: 18px; color: var(--oro); }
.pestado { flex: 1; color: #9fb0d0; font-size: 13px; }
#pTabs { position: sticky; top: 64px; display: flex; gap: 6px; padding-bottom: 10px; background: rgba(4, 9, 22, .98); z-index: 3; border-bottom: 1px solid #223; }
#pTabs button { padding: 10px 18px; border-radius: 10px; border: 1px solid #2a3556; background: #0e1730; color: #ccd; cursor: pointer; font-size: 15px; }
#pTabs button.on { background: var(--oro); color: #111; border-color: var(--oro); font-weight: 700; }
.ptab { display: none; padding-top: 16px; } .ptab.on { display: block; }
.pbtn { min-height: 44px; padding: 8px 18px; border-radius: 12px; border: 1px solid var(--oro); background: var(--oro); color: #111; font-weight: 700; cursor: pointer; font-size: 15px; }
.pbtn.ghost { background: rgba(255, 255, 255, .06); color: #eee; border-color: rgba(255, 255, 255, .22); }
.pbtn.warn { background: #3a1820; border-color: #c55; color: #fdd; }
.pbtn.on { box-shadow: 0 0 0 3px rgba(244, 199, 107, .6); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.pgrid .pbtn { min-height: 64px; font-size: 16px; }
.psec { margin: 18px 0 8px; color: var(--oro); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0; }
.prow label { display: flex; align-items: center; gap: 8px; }
.prow input[type=range] { width: 220px; }
.prow select, .prow input[type=text], .prow input[type=number] { background: #0a1124; color: #eee; border: 1px solid #334; border-radius: 8px; padding: 7px 10px; font-size: 15px; }
.prow .val { min-width: 54px; color: #9fb0d0; font-variant-numeric: tabular-nums; }
.pnota { color: #93a2c2; font-size: 13px; max-width: 900px; }
.pcalib { display: flex; gap: 20px; flex-wrap: wrap; }
.pcalib canvas { width: 640px; max-width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; border: 1px solid #334; }
.precurso { display: grid; grid-template-columns: 70px 1fr 120px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); margin: 4px 0; }
.precurso img { width: 64px; height: 40px; object-fit: contain; background: #111a33; border-radius: 6px; }
.ok { color: #6be39b; } .bad { color: #ff8f86; } .warn { color: #ffcf6b; }