/* v017 · Sala POV «Tu puesto en la nueva era» · Claude Code Opus 5.5
   Escritorio: escenario 1280×720 escalado uniformemente; cada control HTML se proyecta
   (homografía, --h) sobre su objeto. WebGL pinta la sala; sin WebGL, sala SVG/CSS equivalente.
   Móvil: misma sala en columna, con controles a tamaño de dedo.
   Estados: data-modo (escritorio|movil), data-render (css|webgl), data-sala-retiene (bloqueo|visto|regalo). */

body.sala {
  --pared: #eef0ee;
  --mesa-clara: #ebe7df;
  --tinta: #1f2b26;
  --tinta-suave: #4f5f58;
  --oro: #d9a945;
  --oro-claro: #f3d27c;
  --oro-tinta: #6a4f1c;
  background: var(--pared);
  color: var(--tinta);
  isolation: isolate;
}
.sala .cabecera, .sala .escena, .sala .pie { position: relative; z-index: 1; }
.sala .marca { align-items: center; background: transparent; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--graphite); }
.sala .marca__rotulo { width: 216px; height: auto; }
.sala .titulo { text-shadow: none; color: var(--tinta); }

/* ── Pantallas (comunes) ─────────────────────────────────────────── */
.sala .pantalla { margin: 0; min-width: 0; }
.sala .pantalla__marco { position: relative; }
.sala .portada { display: block; position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; box-shadow: none; filter: brightness(var(--luz, 1)); }
.sala .portada img { transition: none; object-fit: cover; }
.sala .portada:hover img { transform: none; }
.sala .portada::after { display: block; border-radius: inherit; box-shadow: none; }
.sala .portada:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--deep-freedom); }
.sala .portada__imagen { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.portada__brillo { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 24%, rgba(255,255,255,0) 40%),
              linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,0) 30%); }

/* Velo y candado de las pantallas cerradas (el velo lo anima js/sala.js con --velo) */
body.sala .portada .portada__imagen::after { opacity: var(--velo, 0); transition: none; background: rgba(16, 28, 23, .7); }
.sala .portada[data-estado="bloqueado"], .sala .portada[data-sala-retiene="bloqueo"] { --velo: 1; }
.portada__candado { position: absolute; z-index: 1; left: 50%; top: 40%; width: 44px; height: 44px; margin: -22px 0 0 -22px; color: rgba(255,255,255,.94); visibility: hidden; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.portada__candado svg { width: 100%; height: 100%; overflow: visible; }
.sala .portada[data-estado="bloqueado"] .portada__candado,
.sala .portada[data-sala-retiene="bloqueo"] .portada__candado { visibility: visible; opacity: 1; }

/* Retención visual (un diálogo está abierto): se sostiene el aspecto anterior hasta volver a la sala */
.sala .portada[data-sala-retiene="bloqueo"] .icono-candado { display: block; }
.sala .portada[data-sala-retiene="bloqueo"] .icono-play,
.sala .portada[data-sala-retiene="bloqueo"] .icono-visto { display: none; }
.sala .portada[data-sala-retiene="bloqueo"] .portada__chip--estado { background: rgba(255,255,255,.92); color: var(--graphite); border-color: var(--borde); }
.sala .portada[data-sala-retiene="bloqueo"] .portada__titulo { color: #fff; }
.sala .portada--principal:is([data-estado="bloqueado"], [data-sala-retiene="bloqueo"])::after {
  background: linear-gradient(180deg, transparent 36%, rgba(15, 29, 24, .64) 100%);
}
.sala .portada--principal[data-estado="bloqueado"] .portada__chip--estado { background: rgba(255,255,255,.92); color: var(--graphite); }
.sala .portada--principal:is([data-estado="bloqueado"], [data-sala-retiene="bloqueo"]) .portada__titulo { color: #fff; }
.sala .portada--principal:is([data-estado="bloqueado"], [data-sala-retiene="bloqueo"]) .portada__lema { color: var(--mint-glow); }
.sala .portada[data-sala-retiene="visto"] .icono-visto,
.sala .portada[data-sala-retiene="visto"] .portada__visto-texto { display: none; }
.sala .portada--principal[data-sala-retiene="visto"] .portada__chip { background: rgba(43,45,47,.66); }
.sala .portada--secundaria[data-sala-retiene="visto"] .icono-play { display: block; }

/* Transiciones cortas del chip al cambiar de estado (180–220 ms) */
.sala .portada__chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease; transform-origin: 0 50%; }

/* ── Tecla (comunes) ────────────────────────────────────────────── */
.sala #cta-principal.tecla { position: relative; isolation: isolate; font-weight: 600; letter-spacing: .005em; -webkit-tap-highlight-color: transparent; }

/* ── Caja (comunes) ─────────────────────────────────────────────── */
.sala .regalo, .sala .regalo:disabled {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 14px;
  background: transparent; color: var(--oro-tinta); box-shadow: none; opacity: 1; text-align: center;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sala .regalo:not(:disabled) { cursor: pointer; }
/* El hover de landing.css (fondo tintado) no aplica en la sala; el asomo de la tapa lo hace js/sala.js
   solo con ratón (hover: hover y pointer: fine), para no dejar estados pegados en táctil. */
.sala .regalo:not(:disabled):hover { background: transparent; }
.sala .regalo:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--deep-freedom); }
.regalo__rotulo { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sala .regalo__texto { flex: none; font-size: 13px; font-weight: 600; line-height: 1.2; color: #4a3d18; }
.sala .regalo__cuenta { display: inline-block; padding: 2px 7px; border: 1px solid #c9b16f; border-radius: 6px; background: rgba(255,250,235,.7); color: #6a5520; font-size: 11px; font-variant-numeric: tabular-nums; }
.regalo__condicion { max-width: 200px; font-size: 11px; line-height: 1.35; color: #6b6450; }
.sala .regalo:not(:disabled) .regalo__condicion { visibility: hidden; }
.sala .regalo:not(:disabled) .regalo__texto { color: #5a3f0c; text-shadow: 0 0 calc(14px * var(--listo, 0)) rgba(255, 196, 102, .95); }
.sala .regalo:not(:disabled) .regalo__cuenta { background: linear-gradient(#f8dc8c, #e3b654); border-color: #b98a2e; color: #3e2c09; }
.sala .regalo[data-sala-retiene] .regalo__cuenta { background: rgba(255,250,235,.7); border-color: #c9b16f; color: #6a5520; }
.caja { flex: none; overflow: visible; }
.caja__luz { opacity: calc(var(--luz-caja, 0) * .9); }
.caja__interior { opacity: var(--tapa, 0); }
.caja__veta { opacity: calc(var(--veta, 0) * (1 - var(--tapa, 0))); }
.caja__pips circle { fill: rgb(calc(110 + 145 * var(--pip, 0)) calc(80 + 128 * var(--pip, 0)) calc(30 + 96 * var(--pip, 0))); }
.caja__candado, .caja__grillete, .caja__tapa { transform-box: view-box; }

/* ── Diálogos sobre la sala ─────────────────────────────────────── */
.sala .dialogo::backdrop { background: rgba(20, 31, 27, .44); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sala #regalo-dialogo::backdrop { background: rgba(20, 31, 27, .2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sala #regalo-dialogo { border-top: 3px solid #e2b85c; }
@media (prefers-reduced-motion: no-preference) {
  .sala .dialogo[open] { animation: sala-dialogo .22s cubic-bezier(.2, .8, .2, 1); }
  .sala .dialogo[open]::backdrop { animation: sala-velo .2s ease-out; }
  .sala #regalo-dialogo[open] { animation: sala-regalo .24s cubic-bezier(.2, .8, .2, 1); }
  @keyframes sala-dialogo { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes sala-regalo { from { opacity: 0; transform: translate(18px, 22px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes sala-velo { from { opacity: 0; } to { opacity: 1; } }
}

/* ════════════════════════════════════════════════════════════════
   ESCRITORIO · cámara anclada al asiento
   ════════════════════════════════════════════════════════════════ */
html:has(body.sala[data-modo="escritorio"]) { overflow: hidden; }
.sala[data-modo="escritorio"] { overflow: hidden; height: 100vh; height: 100dvh; min-height: 0; }
.sala[data-modo="escritorio"] .sala__camara { position: fixed; inset: 0; overflow: hidden; }
@media (min-width: 721px) {
  html.js .sala:not([data-sala-lista]) .sala__camara {
    visibility: hidden;
    animation: mostrar-sala-respaldo 0s 2s forwards;
  }
  @keyframes mostrar-sala-respaldo { to { visibility: visible; } }
}
.sala__lienzo3d, .sala__respaldo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sala__lienzo3d { opacity: 0; }
.sala[data-render="webgl"] .sala__lienzo3d { opacity: 1; }
.sala[data-render="webgl"] .sala__respaldo { opacity: 0; }
.sala[data-modo="escritorio"] .sala__escenario { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; }

/* Elementos proyectados: origen arriba-izquierda y homografía en --h */
.sala[data-modo="escritorio"] .cabecera,
.sala[data-modo="escritorio"] .escena { position: static; width: auto; max-width: none; margin: 0; padding: 0; }
.sala[data-modo="escritorio"] .cabecera__dentro { display: contents; }
.sala[data-modo="escritorio"] .marca,
.sala[data-modo="escritorio"] .titulo,
.sala[data-modo="escritorio"] .pantalla,
.sala[data-modo="escritorio"] #cta-principal {
  position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; transform: var(--h, none);
}

/* Marca y titular en la pared */
.sala[data-modo="escritorio"] .marca { width: var(--marca-ancho); height: var(--marca-alto); }
.sala[data-modo="escritorio"] .marca__rotulo { width: 100%; height: 100%; }
.sala[data-modo="escritorio"] .titulo { width: var(--titulo-ancho); height: var(--titulo-alto); display: flex; align-items: center; justify-content: center; font-size: 47px; line-height: 1; letter-spacing: -0.022em; white-space: nowrap; text-wrap: nowrap; }

/* Monitores */
.sala[data-modo="escritorio"] .pantallas { position: static; display: block; margin: 0; padding: 0; max-width: none; }
.sala[data-modo="escritorio"] .pantalla { width: var(--mon-ancho); height: var(--mon-alto); }
.sala[data-modo="escritorio"] .pantalla__marco { width: 100%; height: 100%; padding: var(--mon-bisel) var(--mon-bisel) var(--mon-menton); border-radius: 9px; background: linear-gradient(170deg, #34383a, #222527 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #15523f; }
.sala[data-modo="escritorio"] .pantalla__bisel { position: absolute; left: var(--mon-bisel); right: var(--mon-bisel); bottom: 0; height: var(--mon-menton); display: flex; align-items: center; justify-content: center; gap: 0; font-size: 7px; font-weight: 600; letter-spacing: .32em; color: #7f918a; }
.sala[data-modo="escritorio"] .pantalla__bisel > span:last-child { position: absolute; right: 26px; color: #56645e; }
.sala[data-modo="escritorio"] .pantalla__led { position: absolute; right: 16px; width: 3px; height: 3px; border-radius: 50%; background: #8CF0CB; }
.sala[data-modo="escritorio"] .pantalla:has(.portada[data-estado="bloqueado"]) .pantalla__led { background: #4a5450; }
.sala[data-modo="escritorio"] .pantalla__soporte { position: absolute; z-index: -1; top: 100%; left: 50%; width: 40px; height: var(--mon-pie); margin-left: -20px; background: linear-gradient(90deg, #17533f, #1E6B55 45%, #175a46); }
.sala[data-modo="escritorio"] .pantalla__soporte::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 170px; height: 8px; margin-left: -85px; border-radius: 4px; background: linear-gradient(#4a4f52, #2f3335); }
.sala[data-render="webgl"][data-modo="escritorio"] .pantalla__marco { background: transparent; box-shadow: none; }
.sala[data-render="webgl"][data-modo="escritorio"] .pantalla__bisel,
.sala[data-render="webgl"][data-modo="escritorio"] .pantalla__soporte { visibility: hidden; }

/* Contenido de las pantallas a escala del monitor (384×216 px de elemento) */
.sala[data-modo="escritorio"] .portada__rotulo { position: absolute; left: 14px; right: 14px; bottom: 13px; width: auto; min-height: 0; margin: 0; padding: 0; background: none; border-radius: 0; gap: 5px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sala[data-modo="escritorio"] .portada--principal .portada__titulo { font-size: 31px; line-height: 1.04; }
.sala[data-modo="escritorio"] .portada__lema { font-size: 16px; line-height: 1.2; }
.sala[data-modo="escritorio"] .portada--secundaria .portada__titulo { font-size: 27px; line-height: 1.06; }
.sala[data-modo="escritorio"] .portada__sub { font-size: 12px; }
.sala[data-modo="escritorio"] .portada__chip { top: 11px; left: 11px; font-size: 11.5px; padding: 5px 9px; }
.sala[data-modo="escritorio"] .portada__chip svg { width: 14px; height: 14px; }
.sala[data-modo="escritorio"] .portada__play { width: 42px; height: 42px; top: 11px; right: 11px; }
.sala[data-modo="escritorio"] .portada__chip--estado .portada__estado-texto { display: inline; }

/* Mesa: la tecla y la caja viven en la escena; aquí solo sus controles */
.sala[data-modo="escritorio"] .mesa { position: static; width: auto; height: auto; margin: 0; }
.sala[data-modo="escritorio"] .mesa__superficie { display: none; }
.sala[data-modo="escritorio"] .mesa__controles { position: static; display: block; }
.sala[data-modo="escritorio"] .accion { position: static; display: block; padding: 0; }

/* Tecla proyectada sobre la cara del casquete; el margen amplía la zona de pulsación */
.sala[data-modo="escritorio"] #cta-principal.tecla {
  width: var(--tecla-ancho); height: var(--tecla-alto); min-height: 0; min-width: 0; padding: var(--tecla-margen);
  border: 0; border-radius: 26px; background: transparent; box-shadow: none;
  color: #fff; font-size: 22px; line-height: 1; text-shadow: 0 1px 0 rgba(0, 30, 20, .35);
}
.sala[data-modo="escritorio"] #cta-principal.tecla:hover { background: transparent; }
.sala[data-modo="escritorio"] #cta-principal.tecla:active { transform: var(--h, none); }
.sala[data-modo="escritorio"] #cta-principal.tecla:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--deep-freedom); }
/* Sin WebGL: el casquete se dibuja en CSS con el mismo plano */
.sala[data-modo="escritorio"]:not([data-render="webgl"]) #cta-principal.tecla::before {
  content: ""; position: absolute; z-index: -1; inset: var(--tecla-margen); border-radius: 18px;
  background: linear-gradient(#2c8566, #1E6B55 55%, #19604c);
  box-shadow: 0 0 0 5px rgba(82, 226, 172, calc(.22 + .6 * var(--aro, 0))), 0 0 0 9px #2b2e30,
              0 calc(14px * (1 - var(--pulsada, 0))) 0 9px #1c1f21, inset 0 2px 0 rgba(255,255,255,.18);
}
.sala[data-modo="escritorio"] .accion__micro {
  position: absolute; left: var(--micro-x); top: var(--micro-y); width: 360px; margin-left: -180px; padding: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--tinta-suave); font-size: 12.5px; line-height: 1.35; text-align: center;
}

/* Caja: control sobre su silueta + rótulo en la mesa */
.sala[data-modo="escritorio"] .regalo, .sala[data-modo="escritorio"] .regalo:disabled {
  position: absolute; left: calc(var(--caja-x) - 14px); top: calc(var(--caja-y) - 10px);
  width: calc(var(--caja-w) + 28px); height: calc(var(--caja-h) + 54px); padding: 0 0 4px;
}
.sala[data-modo="escritorio"] .caja { position: absolute; left: 14px; top: 10px; width: var(--caja-w); height: var(--caja-h); }
.sala[data-render="webgl"][data-modo="escritorio"] .caja { visibility: hidden; }
.sala[data-modo="escritorio"] .regalo__condicion { max-width: 230px; }

/* Pie y vista de prueba fuera de la mesa */
.sala[data-modo="escritorio"] .pie { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sala[data-modo="escritorio"] .pie__dentro { width: auto; min-height: 30px; justify-content: center; gap: 16px; font-size: 11px; color: #5f6e67; }
.sala[data-modo="escritorio"] .demo { right: auto; left: 12px; }

/* ════════════════════════════════════════════════════════════════
   MÓVIL · el puesto en columna (sin WebGL)
   ════════════════════════════════════════════════════════════════ */
.sala[data-modo="movil"] .sala__lienzo3d, .sala[data-modo="movil"] .sala__respaldo { display: none; }
.sala[data-modo="movil"] .sala__camara { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #f2f3f1 0, #eceeec 46%, #e4e8e5 62%, var(--mesa-clara) 62.2%, #f1eee8 100%); }
.sala[data-modo="movil"] .sala__escenario { display: flex; flex-direction: column; flex: 1; }
.sala[data-modo="movil"] .marco { width: calc(100% - 32px); max-width: 560px; }
.sala[data-modo="movil"] .cabecera__dentro { height: 56px; justify-content: center; }
.sala[data-modo="movil"] .marca { min-height: 44px; }
.sala[data-modo="movil"] .escena { flex: 1; padding: 0 0 8px; }
.sala[data-modo="movil"] .titulo { max-width: 340px; margin: 0 auto; text-align: center; font-size: clamp(25px, 7.4vw, 31px); line-height: 1.08; }
.sala[data-modo="movil"] .pantallas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 12px; margin: 22px auto 0; padding-bottom: 34px; }
.sala[data-modo="movil"] .pantalla { position: relative; }
.sala[data-modo="movil"] .pantalla--1 { grid-column: 1 / -1; }
.sala[data-modo="movil"] .pantalla__marco { padding: 2.2% 2.2% 0; border-radius: 10px; background: linear-gradient(170deg, #34383a, #222527 60%); box-shadow: 0 1px 0 #15523f, 0 14px 22px -16px rgba(20, 40, 32, .55); }
.sala[data-modo="movil"] .pantalla__bisel { display: flex; align-items: center; justify-content: space-between; height: auto; aspect-ratio: 16 / 1; padding: 0 3px; font-size: 6px; font-weight: 600; letter-spacing: .24em; color: #7f918a; }
.sala[data-modo="movil"] .pantalla__led { width: 3px; height: 3px; border-radius: 50%; background: #8CF0CB; }
.sala[data-modo="movil"] .pantalla:has(.portada[data-estado="bloqueado"]) .pantalla__led { background: #4a5450; }
.sala[data-modo="movil"] .pantalla__soporte { position: absolute; z-index: -1; left: 50%; bottom: -22px; width: 7%; height: 24px; transform: translateX(-50%); background: linear-gradient(90deg, #17533f, #1E6B55 45%, #175a46); }
.sala[data-modo="movil"] .pantalla__soporte::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 520%; height: 6px; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(#4a4f52, #2f3335); }
.sala[data-modo="movil"] .portada__rotulo { position: absolute; left: 12px; right: 12px; bottom: 11px; width: auto; margin: 0; padding: 0; background: none; gap: 4px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sala[data-modo="movil"] .portada--principal .portada__titulo { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.05; }
.sala[data-modo="movil"] .portada__lema { font-size: clamp(13px, 3.6vw, 15px); }
.sala[data-modo="movil"] .portada__chip { top: 9px; left: 9px; font-size: 10.5px; padding: 4px 8px; }
.sala[data-modo="movil"] .portada__chip svg { width: 13px; height: 13px; }
.sala[data-modo="movil"] .portada__play { width: 36px; height: 36px; top: 9px; right: 9px; }
.sala[data-modo="movil"] .portada__candado { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
/* Secundarias: rótulo dentro, compacto y sin solapes */
.sala[data-modo="movil"] .portada--secundaria { background: #23352d; overflow: hidden; border-radius: 3px; }
.sala[data-modo="movil"] .portada--secundaria::after { display: block; background: linear-gradient(180deg, transparent 34%, rgba(14, 26, 21, .7) 100%); }
.sala[data-modo="movil"] .portada--secundaria .portada__imagen { position: absolute; inset: 0; aspect-ratio: auto; border: 0; box-shadow: none; border-radius: 0; }
.sala[data-modo="movil"] .portada--secundaria .portada__rotulo { position: absolute; left: 7px; right: 6px; bottom: 7px; margin: 0; padding: 0; background: none; gap: 2px; }
.sala[data-modo="movil"] .portada--secundaria .portada__titulo { color: #fff; font-size: clamp(12px, 3.6vw, 15px); line-height: 1.1; }
.sala[data-modo="movil"] .portada--secundaria .portada__sub { color: rgba(255,255,255,.88); font-size: clamp(8.5px, 2.4vw, 10px); line-height: 1.2; }
.sala[data-modo="movil"] .portada--secundaria .portada__chip { top: 6px; left: 6px; padding: 4px; }
.sala[data-modo="movil"] .portada--secundaria .portada__chip--estado .portada__estado-texto { display: none; }
.sala[data-modo="movil"] .portada--secundaria .portada__estado-movil { display: inline; }
.sala[data-modo="movil"] .portada--secundaria[data-estado="abierto"][data-preparado="true"]:not([data-visto="true"]) .portada__estado-movil { display: none; }

/* Mesa en primer plano: tecla y caja a su derecha */
.sala[data-modo="movil"] .mesa { position: relative; margin: 6px -16px 0; padding: 22px 16px 10px; }
.sala[data-modo="movil"] .mesa__superficie { position: absolute; inset: 0; border-top: 1px solid #f9f7f2; background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,0) 22px); pointer-events: none; }
/* landing.css asigna grid-area: accion / regalo a estos hijos: las áreas se declaran aquí de forma
   explícita (tecla a la izquierda, caja a la derecha) para que no caigan en la misma celda implícita. */
.sala[data-modo="movil"] .mesa__controles {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px; grid-template-areas: "accion regalo";
  align-items: end; gap: 12px; max-width: 520px; margin: 0 auto;
}
.sala[data-modo="movil"] .mesa__controles > .accion { grid-area: accion; min-width: 0; }
.sala[data-modo="movil"] .mesa__controles > .regalo { grid-area: regalo; min-width: 0; align-self: end; }
.sala[data-modo="movil"] .accion { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 4px; }
.sala[data-modo="movil"] #cta-principal.tecla {
  width: 100%; min-height: 58px; padding: 14px 10px; border: 0; border-radius: 14px; font-size: 16px; color: #fff;
  background: linear-gradient(#2c8566, #1E6B55 55%, #19604c);
  box-shadow: 0 0 0 3px rgba(82, 226, 172, calc(.25 + .6 * var(--aro, 0))), 0 0 0 7px #2b2e30,
              0 calc(8px * (1 - var(--pulsada, 0))) 0 7px #1c1f21, 0 18px 22px -12px rgba(20, 40, 30, .5), inset 0 2px 0 rgba(255,255,255,.18);
  transform: translateY(calc(6px * var(--pulsada, 0)));
}
.sala[data-modo="movil"] #cta-principal.tecla:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--deep-freedom), 0 0 0 7px #2b2e30; }
.sala[data-modo="movil"] .accion__micro { margin-top: 12px; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--tinta-suave); font-size: 12px; line-height: 1.35; text-align: center; }
.sala[data-modo="movil"] .regalo, .sala[data-modo="movil"] .regalo:disabled { width: 100%; padding: 0 0 4px; }
.sala[data-modo="movil"] .caja { width: 128px; height: 96px; }
.sala[data-modo="movil"] .regalo__rotulo { gap: 4px 6px; flex-wrap: wrap; max-width: 100%; }
.sala[data-modo="movil"] .regalo__texto { font-size: 12px; }
.sala[data-modo="movil"] .regalo__condicion { font-size: 10px; max-width: 100%; }
.sala[data-modo="movil"] .pie { margin-top: 0; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sala[data-modo="movil"] .pie__dentro { min-height: 40px; justify-content: center; gap: 16px; font-size: 11px; color: #5f6e67; }
@media (max-width: 359px) {
  /* El chip conserva el candado: el duplicado central no debe tapar el título. */
  .sala[data-modo="movil"] .portada--secundaria .portada__candado { display: none; }
  .sala[data-modo="movil"] .mesa__controles { grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
  .sala[data-modo="movil"] .caja { width: 112px; height: 84px; }
  .sala[data-modo="movil"] #cta-principal.tecla { font-size: 15px; padding: 12px 6px; }
  .sala[data-modo="movil"] .portada--secundaria .portada__chip { top: 5px; left: 5px; padding: 2px; }
  .sala[data-modo="movil"] .portada--secundaria .portada__chip svg { width: 11px; height: 11px; }
}

/* Movimiento reducido: estados inmediatos, sin desplazamientos de cámara */
@media (prefers-reduced-motion: reduce) {
  .sala .portada__chip { transition: none; }
}