/* ==========================================================================
   Pantallas de tótem · lienzo fijo de 1080x1920 que se escala para entrar
   en la pantalla real. Las variables --bg/--fg/--ln/--mc/--fd/--fi/--fw
   las escribe el servidor con lo cargado en Backoffice › Marca.
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#000;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* En un tótem no hay mouse: el cursor sólo estorba. */
body.totem,body.totem *{cursor:none}

#escenario{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);overflow:hidden}

#lienzo{position:relative;width:1080px;height:1920px;flex:none;transform-origin:center center;
  background:var(--bg);color:var(--fg);
  font-family:var(--fd);font-style:var(--fi);font-weight:var(--fw);overflow:hidden}

/* ---------- fondo y decoración ---------- */
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}
.bgdim{position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events:none}
.marco{position:absolute;inset:38px;border:2px solid var(--mc);pointer-events:none;z-index:3}

.aura{position:absolute;border-radius:50%;filter:blur(120px);background:rgba(255,255,255,.055);pointer-events:none}
.a1{width:760px;height:760px;top:-180px;left:-200px;animation:dr1 26s ease-in-out infinite}
.a2{width:620px;height:620px;bottom:-160px;right:-180px;animation:dr2 32s ease-in-out infinite}
@keyframes dr1{0%,100%{transform:translate(0,0)}50%{transform:translate(180px,140px)}}
@keyframes dr2{0%,100%{transform:translate(0,0)}50%{transform:translate(-160px,-120px)}}
.ondas{position:absolute;inset:0;pointer-events:none;opacity:.5}
.ondas path{fill:none;stroke:var(--ln);stroke-width:1.6;opacity:.35}
.ondas .o2{opacity:.2}
.hairsweep{position:absolute;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln),transparent);opacity:.5;
  animation:sweep 12s linear infinite;pointer-events:none}
@keyframes sweep{0%{top:-2%;opacity:0}12%{opacity:.5}88%{opacity:.5}100%{top:102%;opacity:0}}

/* ---------- estructura común: encabezado / cuerpo / pie ---------- */
.inner{position:absolute;inset:38px;z-index:4;display:flex;flex-direction:column;padding:76px 72px 64px}
.hdr{flex-shrink:0}
.cuerpo{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.cuerpo.top{justify-content:flex-start}
.pie{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:30px}
.pie .ptxt{font-size:27px;opacity:.75;text-align:center;line-height:1.4}
.pie img{max-height:130px;max-width:66%;object-fit:contain}

.evt{display:flex;align-items:center;justify-content:center;gap:28px}
.evt .n{font-size:88px;font-weight:200;line-height:.9;letter-spacing:-.02em}
.evt .r{width:2px;align-self:stretch;background:var(--ln)}
.evt .t{font-size:32px;line-height:1.28;max-width:420px}

/* ---------- Vista 1 · placa de bienvenida ---------- */
.placa{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%}
.placa.on{display:flex}
.placa .kick{font-size:44px;letter-spacing:.24em;text-transform:uppercase;margin:0;font-weight:inherit}
.placa .kick2{font-size:30px;letter-spacing:.16em;text-transform:uppercase;margin:16px 0 0;opacity:.72}
.placa .big{font-weight:200;line-height:.94;letter-spacing:-.02em;margin:40px 0 0}
.placa .rule{width:2px;height:70px;background:var(--ln);margin:40px 0}
.placa .sub{font-size:48px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;margin:0;max-width:840px}
.placa .imgs{display:flex;align-items:center;justify-content:center;gap:60px;margin-top:52px}
.placa .imgs img{max-height:260px;max-width:380px;object-fit:contain}

.pgs{display:flex;gap:14px;justify-content:center;padding-top:26px;flex-shrink:0}
.pg{width:56px;height:2px;background:var(--ln);opacity:.3;transition:opacity .3s}
.pg.on{opacity:1}

/* ---------- Vista 2 · guía de ingreso ---------- */
.ways{display:flex;align-items:center;justify-content:center;height:100%}
.way{width:340px;min-height:296px;border:2px solid var(--ln);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;padding:36px 24px}
.way img.icono{max-height:150px;max-width:230px;object-fit:contain}
.way .flecha{width:128px;height:128px;fill:none;stroke:var(--fg);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.way.l .flecha{animation:nl 2.2s ease-in-out infinite}
.way.r .flecha{animation:nr 2.2s ease-in-out infinite}
@keyframes nl{0%,100%{transform:translateX(0)}50%{transform:translateX(-22px)}}
@keyframes nr{0%,100%{transform:translateX(0)}50%{transform:translateX(22px)}}
.way .lb{font-size:38px;letter-spacing:.18em;text-transform:uppercase;text-align:center;line-height:1.2}
.way .dt{font-size:24px;opacity:.65;letter-spacing:.08em;text-align:center;margin-top:-14px}
.split{width:2px;height:440px;background:var(--ln);margin:0 70px}

/* ---------- Vista 3 · encuesta ---------- */
.etit{text-align:center;font-size:42px;letter-spacing:.2em;text-transform:uppercase;margin:28px 0 0}
.hr{height:2px;background:var(--ln);margin:22px 0}
.qb{margin-bottom:16px}
.qb .ql{font-size:29px;margin:0 0 12px;line-height:1.3;display:flex;align-items:center;gap:20px}
.qb .ql img{max-height:74px;max-width:150px;object-fit:contain;flex-shrink:0}
.opt{display:flex;align-items:center;gap:20px;width:100%;min-height:64px;padding:10px 24px;margin-bottom:8px;
  background:transparent;border:2px solid var(--ln);color:var(--fg);
  font-family:inherit;font-style:inherit;font-weight:inherit;font-size:29px;text-align:left;
  cursor:pointer;transition:.12s;line-height:1.2}
.opt .rd{width:26px;height:26px;border-radius:50%;border:2px solid var(--ln);flex-shrink:0;position:relative}
.opt.sel{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.opt.sel .rd{border-color:var(--bg)}
.opt.sel .rd:after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.ta{border:2px solid var(--ln);min-height:150px;padding:20px 24px;font-size:28px;line-height:1.4;
  cursor:pointer;word-break:break-word}
.ta.ph{opacity:.45}
.ta.big{min-height:620px;font-size:34px;padding:28px 30px}
.car{display:inline-block;width:2px;height:30px;background:var(--fg);vertical-align:-5px;
  animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:0}}
.disc{display:flex;align-items:flex-start;gap:18px;margin-bottom:12px}
.disc svg{width:30px;height:30px;flex-shrink:0;margin-top:2px;opacity:.75;fill:none;
  stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.disc p{margin:0;font-size:24px;line-height:1.4;opacity:.8}
.send{width:100%;min-height:94px;border:2px solid var(--fg);background:transparent;color:var(--fg);
  font-family:inherit;font-style:inherit;font-weight:inherit;font-size:33px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;transition:.14s;margin-top:20px;padding:12px}
.send.off{opacity:.35}

/* teclado propio: Chromium en Raspberry no trae teclado virtual */
.kbw{position:absolute;left:40px;right:40px;bottom:40px;background:var(--bg);
  border-top:2px solid var(--ln);padding:26px 30px 30px;z-index:6;display:none}
.kbw.on{display:block}
.kr{display:flex;gap:10px;margin-bottom:10px}
.k{flex:1;min-width:0;height:88px;border:2px solid var(--ln);background:transparent;color:var(--fg);
  font-family:inherit;font-style:inherit;font-weight:inherit;font-size:32px;cursor:pointer;transition:.1s}
.k:active{background:var(--fg);color:var(--bg)}
.k.w2{flex:2}.k.w4{flex:4}
.k.ok{border-color:var(--fg)}

.gr{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%}
.gr.on{display:flex}
.gr h2{font-size:76px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;margin:0}
.gr .sm{font-size:44px;letter-spacing:.16em;text-transform:uppercase;margin:14px 0 0;opacity:.85}
.spin{width:70px;height:70px;border:2px solid var(--ln);border-top-color:transparent;border-radius:50%;
  margin:64px 0 32px;animation:sp 1.1s linear infinite;opacity:.7}
@keyframes sp{to{transform:rotate(360deg)}}
.gr .cdn{font-size:26px;opacity:.7}

/* Aviso de que no se pudo guardar: en un tótem nadie mira la consola. */
#aviso{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:9;
  border:2px solid var(--fg);background:var(--bg);color:var(--fg);padding:18px 30px;
  font-size:26px;letter-spacing:.06em;display:none}
#aviso.on{display:block}