/* 05 Taller: «Pinball WCL» (js/taller.js).
   La máquina va montada en la sección como una pieza: a la izquierda el título, la misión y la bitácora con lo que se
   descubre; a la derecha la máquina en su marco. En móvil: título, máquina y bitácora, uno debajo del otro.
   Las versiones anteriores del Taller quedaron en _sin_uso/. */
.s-taller { position: relative; z-index: 1; padding: calc(104px + env(safe-area-inset-top, 0px)) 0 calc(48px + env(safe-area-inset-bottom, 0px)); }
.pb { --ok: #7AF0C8; --mal: #FF6A5A; --acento: #38B6FF; --oro: #F2C14E; --rosa: #FF6A8A; --alto: clamp(620px, calc(100svh - 160px), 900px);
  display: grid; grid-template-columns: minmax(300px, 400px) auto; justify-content: center; gap: clamp(28px, 4vw, 64px); align-items: start;
  width: min(1280px, 100% - 2 * var(--gx)); margin: 0 auto; }
.pb [hidden] { display: none !important; }
.pb__tag, .pb__k { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* Columna de texto: misma altura que la máquina; la bitácora se desplaza por dentro */
.pb__info { display: flex; flex-direction: column; gap: 22px; height: var(--alto); min-width: 0; }
.pb__cab { display: grid; gap: 14px; }
.pb__t { display: flex; align-items: baseline; gap: .18em; margin: 0; font: 500 clamp(48px, 5vw, 80px)/.88 var(--sans); letter-spacing: -.055em; color: var(--text); }
.pb__t span { font: 700 .4em/1 var(--mono); letter-spacing: .04em; padding: .18em .34em .14em; border-radius: .3em; color: #06121C; background: linear-gradient(100deg, #2F6BFF, #38B6FF); transform: translateY(-.55em) rotate(-4deg); }
.pb__p { display: grid; gap: 16px; animation: pbEntra .5s var(--ease) both; }
.pb__lead { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--text-2); }
.pb__teclas { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pb__teclas li { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; font: 400 14.5px/1.35 var(--sans); color: var(--text); }
.pb__teclas em { font-style: normal; } .pb__teclas small { display: block; color: var(--text-3); font-size: 13px; }
.pb__teclas span { display: flex; gap: 6px; }
kbd { display: inline-grid; place-items: center; min-width: 34px; height: 32px; padding: 0 8px; border-radius: 8px; font: 600 13px/1 var(--mono); color: var(--text); background: linear-gradient(180deg, #2B2F3B, #1B1D22); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .16), 0 3px 0 #0b0d14; }
kbd.is-ancha { min-width: 84px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pb__jugar { all: unset; box-sizing: border-box; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 36px; border-radius: 999px;
  background: linear-gradient(100deg, #FF6A8A, #F2C14E); color: #1A0B10; font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgb(255 106 138 / .3), inset 0 -3px 0 rgb(0 0 0 / .18); transition: transform .3s var(--ease), box-shadow .3s; }
.pb__jugar:hover, .pb__jugar:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 40px rgb(255 106 138 / .45); }
.pb__record { margin: -4px 0 0; min-height: 1em; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
/* misión y piezas */
.pb__mision { display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; background: rgb(238 241 245 / .04); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .1); }
.pb__mision b { color: var(--text); font-weight: 600; }
.pb__mision h3 { margin: 0; font: 500 19px/1.3 var(--sans); letter-spacing: -.01em; color: var(--text); }
.pb__mision i { position: relative; display: block; height: 4px; border-radius: 4px; background: rgb(238 241 245 / .1); overflow: hidden; }
.pb__mision i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--ok); transition: transform .4s var(--ease); }
.pb__piezas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pb__piezas li { display: grid; gap: 4px; padding: 10px 10px 11px; border-radius: 12px; font: 500 12px/1.25 var(--sans); color: var(--text-3); box-shadow: inset 0 0 0 1px rgb(127 227 255 / .25); background-image: repeating-linear-gradient(135deg, rgb(127 227 255 / .06) 0 6px, transparent 6px 12px); }
.pb__piezas li span { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6FA9C2; }
.pb__piezas li.is-hecha { color: var(--text); background: rgb(122 240 200 / .08); box-shadow: inset 0 0 0 1px rgb(122 240 200 / .45); }
.pb__piezas li.is-hecha span { color: var(--ok); }
/* final */
.pb__fscore { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; }
.pb__fscore b { font: 500 clamp(56px, 5vw, 76px)/.9 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--oro); }
.pb__fscore span { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pb__fmis { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pb__fmis li { display: flex; gap: 10px; align-items: center; font: 400 14.5px/1.35 var(--sans); color: var(--text-3); }
.pb__fmis li b { font-size: 16px; } .pb__fmis li.is-ok { color: var(--text); } .pb__fmis li.is-ok b { color: var(--oro); }
.pb__fmis li.pb__fmaq { margin-top: 4px; color: #9FDFFF; } .pb__fmis li.pb__fmaq b { color: #7FE3FF; font-size: 15px; }
.pb__jugar--b { height: 48px; padding: 0 26px; }

/* Bitácora */
.pb__bit { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 160px; }
.pb__bith { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.pb__bith span { color: var(--text-3); letter-spacing: .08em; }
.pb__lista { flex: 1; display: grid; align-content: start; gap: 10px; margin: 0; padding: 0 6px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(238 241 245 / .2) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); padding-bottom: 24px; }
.pb__lista > li { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: rgb(238 241 245 / .03); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .08); }
.pb__lista > li.is-nueva { background: linear-gradient(160deg, rgb(56 182 255 / .12), rgb(238 241 245 / .03) 60%); box-shadow: inset 0 0 0 1px rgb(127 227 255 / .4); animation: pbNueva .6s var(--ease) both; }
.pb__lista h4 { margin: 0; font: 600 17px/1.2 var(--sans); letter-spacing: -.01em; color: var(--text); }
.pb__lista > li > p:not(.pb__tag) { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.pb__lista .pb__tag { color: #9FDFFF; }
.pb__lista .pb__dato { color: var(--text) !important; font-size: 13.5px !important; padding-left: 10px; border-left: 2px solid var(--ok); }
.pb__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.pb__chips li { padding: 4px 8px; border-radius: 6px; font: 500 11px/1.2 var(--mono); color: var(--text-2); background: rgb(238 241 245 / .06); }
.pb__ver { justify-self: start; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: #7FE3FF; text-decoration: none; border-bottom: 1px solid rgb(127 227 255 / .4); padding-bottom: 3px; }
.pb__ver:hover { color: #fff; border-color: #fff; }
.pb__lista > li.pb__vacia { display: block; } /* el efecto de texto del sitio parte las palabras en piezas: en grid quedaba una por línea */
.pb__vacia { padding: 16px; border-radius: 14px; font: 400 14px/1.5 var(--sans); color: var(--text-3); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .08); background-image: repeating-linear-gradient(135deg, rgb(238 241 245 / .03) 0 6px, transparent 6px 12px); }
@keyframes pbNueva { from { opacity: 0; transform: translateY(-10px); } }
/* contacto al final */
.pb__negocio { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: rgb(238 241 245 / .04); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .1); }
.pb__negocio > p { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--text-2); }
.pb[data-estado="fin"] .pb__bit { flex: 0 1 auto; max-height: 260px; }
.pb[data-estado="fin"] .pb__info { height: auto; min-height: var(--alto); }
.pb__elige { display: flex; flex-wrap: wrap; gap: 8px; }
.pb__elige button { all: unset; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--text); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .2); }
.pb__elige button:hover, .pb__elige button:focus-visible { box-shadow: inset 0 0 0 1.5px var(--acento); }
.pb__elige button[aria-pressed="true"] { background: #EEF1F5; color: #111216; }
.pb__form { display: grid; gap: 10px; }
.pb__form label { display: grid; gap: 6px; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pb__form textarea, .pb__form input { box-sizing: border-box; width: 100%; padding: 11px 13px; border: 0; border-radius: 12px; background: rgb(238 241 245 / .05); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .16);
  font: 400 15px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); resize: vertical; }
.pb__form textarea:focus, .pb__form input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--acento); }
.pb__form ::placeholder { color: var(--text-3); }
.pb__err { min-height: 1em; margin: -2px 0 0; font: 400 13px/1.4 var(--sans); color: var(--mal); }
.pb__enviar { justify-self: start; border: 0; cursor: pointer; }
.pb__gracias { display: none; margin: 0; font: 400 15px/1.5 var(--sans); color: var(--ok); }
.pb__form.is-enviado > :not(.pb__gracias) { display: none; }
.pb__form.is-enviado .pb__gracias { display: block; }

/* La máquina: un marco con bisel, como un gabinete */
.pb__marco { position: relative; height: var(--alto); aspect-ratio: .74; max-width: 100%; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, #1A1F33, #0B0D14 70%);
  box-shadow: 0 0 0 1px rgb(238 241 245 / .1), 0 0 0 9px #16181F, 0 0 0 10px rgb(238 241 245 / .08), 0 40px 90px rgb(0 0 0 / .55); }
.pb__marco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05), inset 0 -60px 80px -40px rgb(0 0 0 / .6); }
.pb__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; outline: none; transition: opacity 1.2s var(--ease); touch-action: pan-y; }
.pb.is-viva .pb__lienzo { opacity: 1; }
.pb__hud { position: absolute; z-index: 2; left: 16px; top: 14px; display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; background: rgb(11 13 20 / .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgb(238 241 245 / .1); opacity: 0; transition: opacity .4s; pointer-events: none; }
.pb[data-estado="jugando"] .pb__hud { opacity: 1; }
.pb__hud b { font: 600 26px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--oro); }
.pb__bolas { display: flex; gap: 6px; }
.pb__bolas i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8d98aa 55%, #2a3040); }
.pb__bolas i.is-ida { opacity: .18; }
.pb__botones { position: absolute; z-index: 3; right: 14px; top: 14px; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.pb[data-estado="jugando"] .pb__botones { opacity: 1; pointer-events: auto; }
.pb__ico { all: unset; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(11 13 20 / .72); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .14); }
.pb__ico:hover, .pb__ico:focus-visible { box-shadow: inset 0 0 0 1.5px var(--acento); }
.pb__ico svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb__ico[aria-pressed="true"] .off, .pb__ico[aria-pressed="false"] .on { display: none; }
.pb__jugar--marco { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); display: none; }
.pb__jugar--marco:hover, .pb__jugar--marco:focus-visible { transform: translateX(-50%) scale(1.03); }
.pb__lanzar { all: unset; cursor: pointer; position: absolute; z-index: 3; right: 16px; bottom: 18px; padding: 13px 18px; border-radius: 14px; white-space: nowrap;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #06121C; background: linear-gradient(100deg, #38B6FF, #7FE3FF); box-shadow: 0 8px 26px rgb(56 182 255 / .4);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); touch-action: none; user-select: none; -webkit-user-select: none; }
.pb.is-lanzar[data-estado="jugando"] .pb__lanzar { opacity: 1; transform: none; pointer-events: auto; }
.pb__toasts { position: absolute; z-index: 3; left: 50%; top: 22%; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: 88%; }
.pb__toast { margin: 0; padding: 10px 18px; border-radius: 999px; background: rgb(11 13 20 / .86); box-shadow: inset 0 0 0 1px rgb(242 193 78 / .5), 0 10px 30px rgb(0 0 0 / .4);
  font: 600 14px/1.3 var(--sans); color: var(--oro); text-align: center; animation: pbEntra .45s var(--ease) both; transition: opacity .4s, transform .4s; }
.pb__toast.is-fuera { opacity: 0; transform: translateY(-8px); }
@keyframes pbEntra { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.pb :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.pb__aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pantallas medianas: la máquina se achica antes que la columna */
@media (max-width: 1100px) and (min-width: 901px) { .pb { grid-template-columns: minmax(280px, 340px) auto; } .pb__marco { height: auto; width: min(100%, calc(var(--alto) * .74)); } }
/* Móvil: título, máquina, panel y bitácora en columna */
@media (max-width: 900px) {
  .s-taller { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .pb { display: flex; flex-direction: column; gap: 18px; --alto: min(78svh, 720px); }
  .pb__info { display: contents; }
  .pb__cab { order: 0; } .pb__t { font-size: 46px; }
  .pb__marco { order: 1; width: 100%; height: var(--alto); aspect-ratio: auto; border-radius: 20px; }
  .pb__p { order: 2; } .pb__bit { order: 3; min-height: 0; } .pb__negocio { order: 4; }
  .pb__lista { max-height: 60svh; }
  .pb__teclas li:last-child { display: none; } .pb__teclas li { grid-template-columns: 1fr; } .pb__teclas li span { display: none; }
  .pb__p[data-en="intro"] .pb__jugar { display: none; }
  .pb[data-estado="intro"] .pb__jugar--marco { display: inline-flex; }
  .pb__lanzar { left: 50%; right: auto; transform: translate(-50%, 10px); }
  .pb.is-lanzar[data-estado="jugando"] .pb__lanzar { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .pb__p, .pb__toast, .pb__lista > li.is-nueva { animation: none !important; } }

/* ── Entrada desde Servicios (claro → oscuro). La variante la pone js/taller-entrada.js en html[data-entrada]. ── */
html[data-entrada] .s-taller { z-index: 3; }
html[data-entrada] .s-taller > .pb { position: relative; z-index: 1; }
html[data-entrada] #contacto { z-index: 4; } /* el arco claro de Contacto sigue por encima del final del Taller */
html[data-entrada] .s-taller::before { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; }

/* A · arco: el mismo arco del sitio con los colores al revés. Dentro del arco, transparente (se ve el claro de Servicios);
   fuera y debajo, el oscuro del Taller. Servicios gana al final el espacio claro sobre el que sube la franja. */
html[data-entrada="arco"] #servicios::after { content: ""; display: block; height: calc(11vw + 22svh); }
html[data-entrada="arco"] .s-taller::before { top: -1px; height: calc(22vw + 22svh + 2px); will-change: transform;
  background: radial-gradient(ellipse 60% 100% at 50% 0, rgba(17,18,22,0) 0, rgba(17,18,22,0) 99.4%, #111216 100%) 50% 0 / 100% calc(var(--arc, 0) * 11vw + 1px) no-repeat,
    linear-gradient(#111216, #111216) 0 calc(var(--arc, 0) * 11vw - 1px) / 100% 100% no-repeat;
  transform: translateY(calc(var(--arc, 0) * (11vw + 22svh) * -1)); }

/* B · apagón: un fundido largo del claro al oscuro (curva suave, sin escalones) y la máquina se enciende al llegar */
html[data-entrada="apagon"] #servicios::after { content: ""; display: block; height: 40vh; }
html[data-entrada="apagon"] .s-taller::before { bottom: calc(100% - 1px); height: 90vh;
  background: linear-gradient(to bottom, rgba(17,18,22,0) 0%, rgba(17,18,22,.03) 12%, rgba(17,18,22,.1) 24%, rgba(17,18,22,.22) 35%, rgba(17,18,22,.38) 45%,
    rgba(17,18,22,.56) 55%, rgba(17,18,22,.73) 65%, rgba(17,18,22,.86) 75%, rgba(17,18,22,.95) 86%, #111216 100%); }
html[data-entrada="apagon"] .s-taller:not(.is-encendida) .pb__marco { filter: brightness(.16) saturate(.4); }
html[data-entrada="apagon"] .s-taller:not(.is-encendida) .pb__info { opacity: .25; }
html[data-entrada="apagon"] .s-taller .pb__info { transition: opacity .9s var(--ease, ease) .5s; }
html[data-entrada="apagon"] .s-taller.is-encendida:not(.is-encendida-fin) .pb__marco { animation: pbEnciende 1.25s steps(1, end) both; }
@keyframes pbEnciende {
  0% { filter: brightness(.16) saturate(.4); } 10% { filter: brightness(.9) saturate(1); } 16% { filter: brightness(.22) saturate(.5); }
  28% { filter: brightness(1.05) saturate(1.1); } 34% { filter: brightness(.4) saturate(.7); } 46% { filter: brightness(1.12) saturate(1.15); }
  60% { filter: brightness(.85) saturate(1); } 72% { filter: brightness(1.06) saturate(1.05); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { html[data-entrada="apagon"] .s-taller .pb__marco { filter: none !important; animation: none !important; } }

/* C · ventana: el Taller entra como una ventana oscura dentro del claro y se abre a pantalla completa al llegar arriba */
html[data-entrada="ventana"] .s-taller { background: #F6F7F9; }
html[data-entrada="ventana"] .s-taller::before { top: 0; bottom: 0; background: #111216;
  clip-path: inset(0 calc(var(--ven, 0) * 6vw) 0 calc(var(--ven, 0) * 6vw) round calc(var(--ven, 0) * min(56px, 9vw))); }

/* ═════════ Sala de juegos: «Juegos para tu marca» (js/sala.js) ═════════ */
.s-taller { overflow-x: clip; }
/* la franja oscura de la entrada (::before del Taller, css de arriba) va detrás de la sala, no encima del título */
html[data-entrada] .s-taller > .sj { position: relative; z-index: 1; }
.sj { --ok: #7AF0C8; --mal: #FF6A5A; --acento: #38B6FF; --oro: #F2C14E; --rosa: #FF6A8A; --alto: clamp(380px, calc(100svh - 172px), 820px); display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px);
  width: min(1380px, 100% - 2 * var(--gx)); margin: 0 auto; align-items: center; }
.sj [hidden] { display: none !important; }
.sj__col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.sj__cab { display: grid; gap: 16px; }
.sj__k { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.sj__t { margin: 0; font: 600 clamp(38px, 3.9vw, 62px)/.95 var(--sans); letter-spacing: -.05em; color: var(--text); }
.sj__lead { margin: 0; font: 400 16.5px/1.55 var(--sans); color: var(--text-2); }
.sj__lista { display: grid; gap: 10px; }
.sj__op { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 17px 18px; border: 0; border-radius: 18px; cursor: pointer;
  font: inherit; color: inherit; text-align: left; background: transparent; box-shadow: inset 0 0 0 1px rgb(238 241 245 / .07); transition: background .25s, box-shadow .25s; }
.sj__op:hover { box-shadow: inset 0 0 0 1px rgb(238 241 245 / .16); }
.sj__op[aria-selected="true"] { background: #1C1F27; box-shadow: inset 0 0 0 1px rgb(238 241 245 / .2); }
.sj__op b { font: 700 12px/1.6 var(--mono); color: #6F7581; }
.sj__op[aria-selected="true"] b { color: #F2C14E; }
.sj__op span { display: grid; gap: 5px; min-width: 0; }
.sj__op strong { font: 600 19px/1.15 var(--sans); letter-spacing: -.02em; color: var(--text); }
.sj__op em { font: 400 14px/1.4 var(--sans); font-style: normal; color: var(--text-2); }
.sj__corto { display: none; }
.sj__quiero { align-self: flex-start; }
.sj__escenario { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 220px); gap: clamp(20px, 2.6vw, 40px); align-items: center; min-width: 0; }
.sj__escenario > .sj__juego { grid-column: 1; grid-row: 1; }
.sj__escenario > .sj__info { grid-column: 2; grid-row: 1; }
.sj :focus-visible { outline: 2px solid #38B6FF; outline-offset: 3px; }

/* la pantalla del juego: centrada, lo más grande posible sin salirse de su columna */
.sj__juego { display: flex; justify-content: center; min-width: 0; }
.sj .pb { --alto: inherit; position: relative; display: block; flex: none; width: min(100%, calc(var(--alto) * .74)); margin: 0; }
.sj .pb .pb__marco { width: 100%; }
.sj .pb__info { display: none !important; }
.sj .pb__marco, .jg__pantalla { position: relative; height: auto; width: min(100%, calc(var(--alto) * .74)); aspect-ratio: .74; max-width: 100%; border-radius: 26px; overflow: hidden; isolation: isolate; }
.jg { --ok: #7AF0C8; --mal: #FF6A5A; --oro: #F2C14E; position: relative; display: flex; justify-content: center; width: 100%; min-width: 0; }
.jg__pantalla { background: #0C0D11; box-shadow: 0 0 0 1px rgb(238 241 245 / .08), 0 40px 80px -30px rgb(0 0 0 / .6); }
.jg__pantalla--alta { width: min(100%, calc(var(--alto) * .66)); aspect-ratio: .66; }
.jg__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; outline: none; }
/* inicio sobre la pantalla: un botón y una línea de controles */
.jg__inicio { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; display: grid; justify-items: center; gap: 12px; pointer-events: none; }
.jg__inicio > * { pointer-events: auto; }
.jg__inicio .pb__jugar, .jg__capa-in .pb__jugar { justify-self: center; }
.sj .pb__jugar--marco { position: static; transform: none; display: inline-flex; }
.sj .pb__jugar--marco:hover, .sj .pb__jugar--marco:focus-visible { transform: translateY(-2px) scale(1.03); }
.sj .pb[data-estado="jugando"] .jg__inicio { display: none; }
.jg__teclas { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--text-2); }
.jg__teclas span { display: inline-flex; align-items: center; gap: 6px; }
.jg__teclas kbd { min-width: 26px; height: 24px; font-size: 11px; }
.jg__teclas kbd.is-ancha { min-width: 64px; font-size: 9.5px; }
.jg__hud--centro { justify-content: center; }
.jg__hud { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; color: var(--text); }
.jg__hud b { font: 800 24px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jg__reloj, .jg__mult { padding: 7px 11px; border-radius: 999px; background: rgb(238 241 245 / .12); font: 700 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.jg__mult { opacity: .35; transition: opacity .2s, background .2s, color .2s; }
.jg__mult.is-on { opacity: 1; background: #F2C14E; color: #111216; }
.jg[data-estado="intro"] .jg__hud, .jg[data-estado="fin"] .jg__hud { opacity: 0; }
.jg__pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.jg__pop { position: absolute; transform: translate(-50%, -50%); font: 800 24px/1 var(--sans); color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .6); animation: jgPop .8s var(--ease, ease) forwards; }
.jg__pop.is-oro { color: #F2C14E; font-size: 32px; }
.jg__pop.is-mal { color: #FF6A5A; }
@keyframes jgPop { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } to { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.jg__capa { position: absolute; inset: 0; display: grid; place-items: end center; padding: 22px; pointer-events: none; }
.jg__capa > * { pointer-events: auto; }
.jg[data-estado="fin"] .jg__capa { place-items: center; background: rgb(17 18 22 / .45); }
.jg[data-estado="jugando"] .jg__capa { display: none; }
.jg__capa-in { display: grid; gap: 12px; justify-items: center; text-align: center; }
.jg__capa-in[data-en="fin"] { gap: 14px; padding: 24px 26px; border-radius: 22px; background: rgb(12 13 17 / .88); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .1); min-width: min(260px, 100%); }
.jg__capa-in .pb__jugar { justify-self: center; }
.jg__capa-in .pb__record { margin: 0; }
.jg__fin-p { margin: 0; font: 700 58px/1 var(--sans); letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.jg__fin-d { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; text-align: left; }
.jg__fin-d li { display: grid; gap: 3px; } .jg__fin-d span { font: 400 12px/1.3 var(--sans); color: var(--text-3); } .jg__fin-d b { font: 600 18px/1.1 var(--sans); color: var(--text); }
.jg__pista { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; pointer-events: none; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.jl__piezas { list-style: none; margin: 0; padding: 8px 12px; display: flex; gap: 12px; border-radius: 999px; background: rgb(12 13 17 / .78); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .1); }
.jl__piezas li { display: inline-flex; align-items: center; gap: 5px; }
.jl__piezas b { font: 700 12px/1 var(--mono); color: var(--text); } .jl__piezas .is-mal b { color: #FF6A5A; }
.jl__p { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px #120D0A; }
.jl__p--engrane { background: #E8743B; border-radius: 30%; } .jl__p--cubo { background: #FF6A8A; border-radius: 4px; } .jl__p--esfera { background: #38B6FF; }
.jl__p--oro { background: #F2C14E; border-radius: 30%; box-shadow: 0 0 0 2px #120D0A, 0 0 10px #F2C14E; } .jl__p--bug { background: #FF5A5A; clip-path: polygon(50% 0, 63% 30%, 100% 35%, 72% 60%, 80% 100%, 50% 80%, 20% 100%, 28% 60%, 0 35%, 37% 30%); box-shadow: none; }
/* al lado del juego, en columna: para qué sirve; al terminar, lo que vería el equipo */
.sj__info { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.sj__dl { margin: 0; display: grid; gap: 20px; }
.sj__dl div { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid rgb(238 241 245 / .1); }
.sj__dl dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.sj__dl dd { margin: 0; font: 400 15px/1.45 var(--sans); color: var(--text-2); }
.sj__accion { height: 50px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer; background: #F2C14E; color: #111216; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sj__accion--claro { background: #EEF1F5; }
.sj__reg { display: grid; gap: 14px; min-width: 0; width: 100%; }
.sj__reg-t { margin: 0; display: grid; gap: 4px; font: 600 16px/1.3 var(--sans); color: var(--text); }
.sj__reg-t strong { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sj__reg-t i { display: none; }
.sj__reg-t strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7AF0C8; }
.sj__reg-t span { font: 400 13px/1.35 var(--sans); color: var(--text-3); }
.sj__reg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sj__reg li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgb(238 241 245 / .04); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .08); min-width: 0; }
.sj__reg li span { font: 400 12.5px/1.3 var(--sans); color: var(--text-3); } .sj__reg li b { font: 600 17px/1.1 var(--sans); color: var(--text); text-align: right; overflow-wrap: anywhere; }

/* formulario sobre el escenario */
.sj__form { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; border-radius: 26px; background: rgb(17 18 22 / .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sj__form-in { position: relative; width: min(520px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; display: grid; gap: 16px; padding: 30px; border-radius: 24px; background: #16181E; box-shadow: inset 0 0 0 1px rgb(238 241 245 / .1), 0 30px 80px rgb(0 0 0 / .5); }
.sj__form-in h3 { margin: 0; padding-right: 40px; font: 600 28px/1.08 var(--sans); letter-spacing: -.03em; color: var(--text); }
.sj__form-in > p { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--text-2); }
.sj__form-in label { display: grid; gap: 8px; font: 400 14px/1.3 var(--sans); color: var(--text-2); }
.sj__form-in textarea, .sj__form-in input { box-sizing: border-box; width: 100%; padding: 13px 15px; border: 0; border-radius: 14px; background: #1F2229; color: var(--text); font: 400 16px/1.45 var(--sans); box-shadow: inset 0 0 0 1px rgb(238 241 245 / .12); resize: vertical; }
.sj__tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.sj__tipos button { height: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--text-2); background: transparent; box-shadow: inset 0 0 0 1px rgb(238 241 245 / .2); }
.sj__tipos button[aria-pressed="true"] { background: #EEF1F5; color: #111216; box-shadow: none; }
.sj__cerrar { position: absolute; top: 14px; right: 14px; }
.sj__enviar { justify-self: start; }
.sj__form-in.is-enviado .pb__gracias { display: block; }
.sj__form-in.is-enviado label, .sj__form-in.is-enviado .sj__tipos, .sj__form-in.is-enviado .sj__enviar { display: none; }

/* pantallas bajas (laptops, ventanas pequeñas): todo cabe sin cortar el título */
@media (max-height: 820px) and (min-width: 901px) {
  .s-taller { padding-top: calc(86px + env(safe-area-inset-top, 0px)); padding-bottom: 28px; }
  .sj { --alto: clamp(380px, calc(100svh - 124px), 820px); }
  .sj__col { gap: 18px; }
  .sj__cab { gap: 10px; }
  .sj__t { font-size: clamp(34px, 3.4vw, 48px); }
  .sj__lead { font-size: 14.5px; }
  .sj__op { padding: 12px 14px; }
  .sj__op em { display: none; }
  .sj__op strong { font-size: 17px; }
}
@media (max-height: 640px) and (min-width: 901px) { .sj__lead, .sj__k { display: none; } }
@media (max-width: 1180px) and (min-width: 901px) {
  .sj { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); }
  .sj__escenario { grid-template-columns: minmax(0, 1fr) minmax(150px, 180px); }
}
@media (max-width: 900px) {
  /* celular: lo justo arriba (título y tres pestañas cortas) para que el juego tenga el espacio */
  .s-taller { padding-top: calc(108px + env(safe-area-inset-top, 0px)); }
  .sj { --alto: min(68svh, 620px); display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .sj__col { gap: 14px; }
  .sj__k, .sj__lead, .sj__quiero { display: none; }
  .sj__t { font-size: 34px; letter-spacing: -.04em; }
  .sj__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sj__op { grid-template-columns: 1fr; justify-items: center; padding: 11px 8px; border-radius: 999px; }
  .sj__op b, .sj__op strong, .sj__op em { display: none; }
  .sj__corto { display: block; font: 600 15px/1 var(--sans); font-style: normal; letter-spacing: -.01em; color: var(--text-2); }
  .sj__op[aria-selected="true"] .sj__corto { color: var(--text); }
  .sj__op span { display: block; }
  .sj__escenario { display: flex; flex-direction: column; align-items: stretch; gap: 18px; width: 100%; }
  .sj .pb, .sj .pb__marco, .jg__pantalla, .jg__pantalla--alta { width: 100%; height: var(--alto); aspect-ratio: auto; border-radius: 20px; }
  .jg__teclas { display: none; }
  .sj__info { width: 100%; }
  .sj__dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .sj__dl div { padding-top: 10px; }
  .sj__dl dd { font-size: 13px; }
  .sj__accion { display: none; }
  .sj__info.is-registro .sj__accion { display: inline-flex; align-items: center; }
  .sj__reg ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sj__reg li { flex-direction: column; align-items: flex-start; }
  .sj__form { position: fixed; border-radius: 0; z-index: 60; }
}
@media (max-width: 520px) { .sj__dl { grid-template-columns: 1fr; } }