/* ============================================================================
   EnCore Demo — AWS Student Builder Group UNAM
   Implementa demo-aws/DESIGN.md. Si algo no está ahí, no debería estar aquí.
   ========================================================================= */

/* ---- Tipografía -------------------------------------------------------- */
@font-face {
  font-family: "Amazon Ember Duospace";
  src: url("fonts/AmazonEmberDuospace_W_Rg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Duospace";
  src: url("fonts/AmazonEmberDuospace_W_Bd.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember";
  src: url("fonts/AmazonEmber_W_Rg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember";
  src: url("fonts/AmazonEmber_W_RgIt.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember";
  src: url("fonts/AmazonEmber_W_Bd.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay_W_Rg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --bg:          #161d26;
  --bg-elev:     #1b232e;
  --bg-sunken:   #0f151c;

  --azul:        #44b4ff;
  --azul-tenue:  rgba(68, 180, 255, .14);

  --texto:       #ffffff;
  --texto-2:     #9aa0ab;   /* NO usar #656871 para texto: 3.05:1, falla AA */
  --linea:       #2c3542;
  --linea-suave: rgba(101, 104, 113, .26);

  --aws:         #ff9900;
  --ok:          #03e582;
  --modelo:      #ad5cff;
  --costo:       #ff57ea;

  --f-titulo: "Amazon Ember Duospace", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-cuerpo: "Amazon Ember", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-codigo: "Amazon Ember Duospace", ui-monospace, monospace;
  --f-numero: "Amazon Ember Display", "Amazon Ember Duospace", ui-monospace, monospace;

  --r: 12px;
  --r-sm: 7px;

  --esquina: 22px;
  --rejilla: 48px;
  --barra: 44px;
  --linea-h: 64px;      /* alto del timeline */
  --escala: 1;
  --codigo-size: .8125rem;
  --salto: .28s cubic-bezier(.16, 1, .3, 1);
  --alto-visual: 100svh;
}

@media (min-width: 480px)  { :root { --esquina: 26px; --rejilla: 56px; } }
@media (min-width: 768px)  { :root { --esquina: 34px; --rejilla: 72px; --barra: 52px; --linea-h: 76px; } }
@media (min-width: 1024px) { :root { --esquina: 40px; --rejilla: 88px; --barra: 56px; --linea-h: 88px; --codigo-size: .875rem; } }
@media (min-width: 1440px) { :root { --esquina: 48px; } }

:root[data-modo="proyeccion"] {
  --escala: 1.3;
  --codigo-size: 1.125rem;
  --linea-h: 104px;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.025em; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
input, textarea { font-size: 16px; }   /* iOS hace zoom por debajo de 16px */

/* ---- Acceso administrativo --------------------------------------------
   La seguridad real está en Lambda; esta puerta evita enseñar la interfaz
   libre antes de validar la credencial y mantiene el flujo accesible. */
.admin-acceso {
  width: min(430px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--azul);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--texto);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
}
.admin-acceso::backdrop {
  background: rgba(8, 13, 19, .86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-acceso-caja { display: grid; gap: 13px; padding: 24px; }
.admin-acceso h2 { font-size: 1.65rem; }
.admin-acceso p { line-height: 1.5; color: var(--texto-2); }
.admin-acceso .admin-eyebrow {
  color: var(--azul);
  font: 400 13px var(--f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-acceso label { font: 400 13px var(--f-titulo); }
.admin-acceso input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--texto);
}
.admin-acceso input:focus { border-color: var(--azul); outline: 2px solid var(--azul); outline-offset: 2px; }
.admin-acceso .admin-error { min-height: 1.3em; color: var(--costo); font-size: 13px; }
.admin-acceso .ejecutar { justify-self: stretch; }
:root[data-admin-estado="bloqueado"] main,
:root[data-admin-estado="bloqueado"] .linea,
:root[data-admin-estado="bloqueado"] .barra { pointer-events: none; }

/* ---- Cromo fijo -------------------------------------------------------- */
.esquina {
  position: fixed;
  width: var(--esquina);
  height: var(--esquina);
  background: var(--azul);
  z-index: 12;
  pointer-events: none;
}
.esquina.tl { top: 0; left: 0; }
.esquina.tr { top: 0; right: 0; }

.rejilla {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--linea-suave) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea-suave) 1px, transparent 1px);
  background-size: var(--rejilla) var(--rejilla);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 76%);
}

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  z-index: 11;
  background: var(--bg);
  border-top: 1px solid var(--linea);
  font-family: var(--f-titulo);
  font-size: .6875rem;
}
.barra .aws-bloque {
  background: var(--azul);
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 14px;
  flex: none;
}
.barra .aws-marca { width: 38px; height: 38px; display: block; }
.barra .medio { flex: 1; display: flex; align-items: center; padding: 0 14px; min-width: 0; color: var(--texto-2); }
.barra .brandmark { height: 100%; width: auto; display: block; flex: none; }
@media (max-width: 480px) { .barra .aws-marca { width: 30px; height: 30px; } }

/* ══ TIMELINE ═══════════════════════════════════════════════════════════ */
.linea {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--linea-h);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  padding: 0 calc(var(--esquina) + 8px);
}
.linea.oculta { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.linea { transition: opacity var(--salto), transform var(--salto); }

.pasos {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 900px;
}

/* El paso NUNCA se encoge: mide lo que mide su icono más su nombre.
   Con `flex: 1` competía con los conectores por el espacio sobrante, se
   encogía por debajo de su contenido y la línea acababa cruzando el texto. */
.paso {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.paso-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px;
  border-radius: var(--r-sm);
  min-width: 0;
  flex: none;
}

.paso-icono {
  position: relative;
  width: clamp(30px, 4.4vw, 44px);
  height: clamp(30px, 4.4vw, 44px);
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  transition: filter var(--salto), opacity var(--salto), transform var(--salto), box-shadow var(--salto);
}
.paso-icono img { width: 100%; height: 100%; display: block; border-radius: 8px; }

/* Aún no se presenta: hueco punteado. Enseña que falta camino. */
.paso[data-estado="vacio"] .paso-icono {
  border: 1.5px dashed var(--linea);
  border-radius: 8px;
}
.paso[data-estado="vacio"] .paso-icono img { opacity: 0; }

/* Presentado pero en reposo: gris. */
.paso[data-estado="listo"] .paso-icono img { filter: grayscale(1) brightness(.75); opacity: .5; }

/* Ejecutándose ahora. */
.paso[data-estado="activo"] .paso-icono {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--azul-tenue), 0 6px 22px rgba(0,0,0,.45);
}
.paso[data-estado="activo"] .paso-icono img { filter: none; opacity: 1; }
.paso[data-estado="activo"] .paso-nombre { color: var(--texto); }

/* Ya pasó por aquí en esta corrida. */
.paso[data-estado="hecho"] .paso-icono img { filter: none; opacity: .95; }
.paso[data-estado="hecho"] .paso-nombre { color: var(--texto-2); }

.paso-nombre {
  font-family: var(--f-titulo);
  font-size: calc(.6875rem * var(--escala));
  color: var(--texto-2);
  opacity: .55;
  white-space: nowrap;
  transition: color var(--salto), opacity var(--salto);
}
.paso[data-estado="vacio"] .paso-nombre { opacity: .25; }
.paso[data-estado="activo"] .paso-nombre,
.paso[data-estado="hecho"]  .paso-nombre { opacity: 1; }

/* El acto en el que estás parado */
.paso.actual .paso-btn { background: rgba(255,255,255,.05); }

/* Conector: se rellena cuando el flujo avanza de un paso al siguiente.
   Es el único que absorbe el espacio sobrante de la fila. */
.conector {
  flex: 1 1 auto;
  height: 2px;
  margin: 0 12px;
  min-width: 14px;
  background: var(--linea);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.conector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.conector.on::after { transform: scaleX(1); }

/* Cinco iconos con nombre necesitan ~730 px. Por debajo de eso los nombres
   sobran antes que los iconos: se ocultan y quedan solo las marcas, que se
   reconocen igual. */
@media (max-width: 920px) {
  .paso-nombre { display: none; }
  .conector { margin: 0 8px; }
}
@media (max-width: 600px) {
  .conector { margin: 0 5px; min-width: 8px; }
  .linea { padding: 0 14px; }
}

/* ══ ESCENAS ════════════════════════════════════════════════════════════ */
main {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.escena {
  min-height: 100svh;
  scroll-snap-align: start;
  padding:
    calc(var(--linea-h) + 20px)
    max(20px, env(safe-area-inset-right))
    calc(var(--barra) + 24px)
    max(20px, env(safe-area-inset-left));
}

/* Dos columnas: texto a la izquierda, panel de código alto a la derecha. */
.acto {
  display: grid;
  gap: 22px;
  align-content: center;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1024px) {
  .acto {
    grid-template-columns: 38fr 62fr;
    /* Altura DEFINIDA, no mínima. Con min-height la fila crecía hasta caber
       todo el código y empujaba la escena fuera de la pantalla; con esto la
       fila queda acotada y el código scrollea dentro del panel, que es
       justo lo que se buscaba. */
    height: 100svh;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 40px;
  }
  :root[data-modo="proyeccion"] .acto { grid-template-columns: 34fr 66fr; }
}

.columna-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.acto-num {
  font-family: var(--f-titulo);
  font-size: calc(.75rem * var(--escala));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.acto-num .sep { color: var(--linea); }

.acto-titulo {
  font-size: calc(clamp(2rem, 4.6vw, 3.9rem) * var(--escala));
  color: var(--texto);
}

.acto-frase {
  font-family: var(--f-cuerpo);
  font-style: italic;
  color: var(--texto-2);
  font-size: calc(clamp(1rem, 1.7vw, 1.35rem) * var(--escala));
  line-height: 1.4;
}

/* Entrada escalonada al llegar la escena */
.acto .columna-texto > *,
.acto .panel {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.acto.visible .columna-texto > *,
.acto.visible .panel { opacity: 1; transform: none; }
.acto.visible .columna-texto > *:nth-child(1) { transition-delay: .02s; }
.acto.visible .columna-texto > *:nth-child(2) { transition-delay: .07s; }
.acto.visible .columna-texto > *:nth-child(3) { transition-delay: .12s; }
.acto.visible .columna-texto > *:nth-child(4) { transition-delay: .17s; }
.acto.visible .columna-texto > *:nth-child(5) { transition-delay: .22s; }
.acto.visible .panel { transition-delay: .1s; }

/* ---- Panel de código --------------------------------------------------- */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  transition: border-color var(--salto), box-shadow var(--salto);
}
@media (max-width: 1023px) { .panel { height: min(52svh, 420px); } }

.panel[data-estado="corriendo"] { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-tenue), 0 18px 44px rgba(0,0,0,.28); }
.panel[data-estado="ok"]        { border-color: var(--ok); }
.panel[data-estado="error"]     { border-color: var(--costo); }

.panel-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--linea);
  flex: none;
  background: var(--bg-elev);
}

.pestanas { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; }
.pestana {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 11px 12px;
  font-family: var(--f-titulo);
  font-size: calc(.75rem * var(--escala));
  color: var(--texto-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  transition: color var(--salto), border-color var(--salto);
}
.pestana[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--azul); }
.pestana:hover { color: var(--texto); }

.panel-servicio {
  margin-left: auto;
  flex: none;
  font-family: var(--f-titulo);
  font-size: calc(.625rem * var(--escala));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c, var(--texto-2));
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel-servicio::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 99px;
  background: currentColor;
}

/* El código scrollea DENTRO del panel; cabeza y salida quedan fijas. */
.panel-codigo {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg-sunken);
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.panel-codigo::-webkit-scrollbar { width: 10px; height: 10px; }
.panel-codigo::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 99px; border: 3px solid var(--bg-sunken); }

/* Desvanecido al pie: avisa que hay más código abajo. La clase la pone JS solo
   cuando de verdad queda algo por ver, para no difuminar la última línea de un
   bloque que ya cabe entero. */
.panel-codigo.con-mas {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
}

.panel-codigo pre {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--f-codigo);
  font-size: var(--codigo-size);
  line-height: 1.62;
  color: #dfe4ea;
  white-space: pre;
}
.panel-codigo code { font: inherit; }
.panel-codigo .c { color: #6f7b8a; font-style: normal; }  /* comentario */
.panel-codigo .k { color: var(--azul); }                  /* palabra clave */
.panel-codigo .s { color: var(--ok); }                    /* cadena */
.panel-codigo .n { color: var(--costo); }                 /* número */

.panel-salida {
  flex: none;
  max-height: 34%;
  overflow-y: auto;
  padding: 11px 16px;
  border-top: 1px solid var(--linea);
  font-family: var(--f-codigo);
  font-size: calc(.75rem * var(--escala));
  line-height: 1.55;
  color: var(--texto-2);
  white-space: pre-wrap;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elev);
}
.panel-salida:empty { display: none; }
.panel-salida .ok   { color: var(--ok); }
.panel-salida .mal  { color: var(--costo); }
.panel-salida .dato { color: var(--texto); }
.panel-salida .frio { color: var(--aws); }

/* En el acto 1 la salida alterna entre explicación y JSON sin cubrir datos. */
#acto-1 .panel-salida { position: relative; max-height: 44%; }
#acto-1 .panel-salida.es-json { max-height: 62%; }
.salida-modelo-contenido { padding-right: 60px; }
#acto-2 .panel-salida {
  position: relative;
  max-height: 62%;
}
#acto-2 .panel-salida.es-json { max-height: 62%; }
.salida-eco-contenido { padding-right: 60px; }
.salida-vista {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--azul);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--azul);
  font: 700 calc(.8125rem * var(--escala)) var(--f-codigo);
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.salida-vista:hover {
  background: var(--azul);
  color: var(--bg-sunken);
}
.salida-vista:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

/* Cuando la salida trae la respuesta del agente, se lee como texto, no como
   consola: fuente de cuerpo, `pre-wrap` apagado y el markdown ya renderizado. */
.panel-salida .md {
  white-space: normal;
  font-family: var(--f-cuerpo);
  font-size: calc(.875rem * var(--escala));
  line-height: 1.55;
  color: var(--texto);
  margin: 8px 0;
}
.panel-salida .md p { margin: 0 0 .5em; }
.panel-salida .md p:last-child { margin-bottom: 0; }
.panel-salida .md b { color: var(--texto); font-weight: 700; }
.panel-salida .md h3 {
  margin: .85em 0 .35em;
  color: var(--texto);
  font: 700 1em/1.35 var(--f-cuerpo);
}
.panel-salida .md hr {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: .75em 0;
}
.panel-salida .md ul, .panel-salida .md ol { margin: .25em 0 .5em; padding-left: 1.3em; }
.panel-salida .md li { margin-bottom: .25em; }
.panel-salida .md li::marker { color: var(--azul); }
.md a {
  color: var(--azul);
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--azul-tenue);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.md a::after { content: " ↗"; font-size: .8em; }
.md a:hover { color: var(--texto); }
.md a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Acto 4: el modelo interpreta; DynamoDB demuestra. El selector permanece a
   la vista para que nadie confunda una frase generada con la evidencia 5/15/0. */
#acto-4 .panel-salida {
  position: relative;
  max-height: 58%;
  padding-top: 0;
}
.regla-selector {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 6px;
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--linea);
  background: var(--bg-elev);
}
.regla-selector button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--texto-2);
  font: 700 calc(.6875rem * var(--escala))/1.2 var(--f-codigo);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.regla-selector button:hover { border-color: var(--azul); color: var(--texto); }
.regla-selector button[aria-pressed="true"] {
  border-color: var(--azul);
  background: var(--azul-tenue);
  color: var(--azul);
}
.regla-selector button:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
.regla-vista {
  padding: 12px 0 4px;
  white-space: normal;
}
.regla-vista[hidden] { display: none; }
.regla-eyebrow {
  margin: 0 0 6px;
  font: 700 calc(.6875rem * var(--escala))/1.35 var(--f-titulo);
  letter-spacing: .08em;
}
.regla-eyebrow.modelo { color: var(--modelo); }
.regla-eyebrow.datos { color: var(--ok); }
.regla-contexto {
  margin: 0 0 10px;
  color: var(--texto-2);
  font: 400 calc(.75rem * var(--escala))/1.5 var(--f-cuerpo);
}
.regla-contexto code { color: var(--azul); font-family: var(--f-codigo); }
.panel-salida .regla-modelo-texto { margin: 0; }
.regla-prueba {
  color: var(--texto-2);
  font-family: var(--f-codigo);
  white-space: pre-wrap;
}
.regla-latencia {
  display: block;
  padding: 9px 0 1px;
  border-top: 1px solid var(--linea-suave);
}

/* En el acto puente la respuesta del agente ES el contenido: se le da sitio. */
#acto-6 .panel-salida { max-height: 62%; }

/* ---- Botón ejecutar ---------------------------------------------------- */
.ejecutar {
  align-self: flex-start;
  background: var(--azul);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  padding: 12px 24px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: calc(.9375rem * var(--escala));
  min-height: 44px;
  transition: filter var(--salto), transform var(--salto);
}
.ejecutar:hover:not(:disabled) { filter: brightness(1.12); }
.ejecutar:active:not(:disabled) { transform: translateY(1px); }
.ejecutar:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Selector de modelos ----------------------------------------------- */
.modelos { display: grid; gap: 7px; }
.modelo-pregunta {
  display: grid;
  gap: 6px;
}
.modelo-pregunta label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--texto);
  font: 400 calc(.75rem * var(--escala)) var(--f-codigo);
}
.modelo-pregunta label span { color: var(--texto-2); }
.modelo-campo {
  display: grid;
  gap: 8px;
}
.modelo-campo textarea {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--texto);
  font: 400 16px/1.35 var(--f-cuerpo);
  resize: none;
}
.modelo-campo textarea:focus {
  border-color: var(--azul);
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
.modelo-campo textarea[readonly] {
  cursor: default;
  caret-color: transparent;
  color: var(--texto);
  border-color: var(--linea);
}
.modelo-campo textarea[readonly]:focus { outline: none; box-shadow: none; }
.modelo-campo .ejecutar { justify-self: start; padding-inline: 20px; }
.modelo-op {
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  min-height: 44px;
  transition: border-color var(--salto), background var(--salto);
}
.modelo-op[aria-pressed="true"] { border-color: var(--modelo); background: rgba(173,92,255,.1); }
.modelo-op:hover { border-color: var(--modelo); }
.modelo-op .nom { font-family: var(--f-titulo); font-size: calc(.8125rem * var(--escala)); }
.modelo-op .precio { font-family: var(--f-codigo); font-size: calc(.6875rem * var(--escala)); color: var(--costo); }
.modelo-op .lat { font-family: var(--f-codigo); font-size: calc(.6875rem * var(--escala)); color: var(--texto-2); margin-left: auto; }

/* ---- Contadores -------------------------------------------------------- */
.contadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contador {
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: var(--bg-elev);
  min-width: 0;
  overflow: hidden;
}
.contador .valor {
  font-family: var(--f-numero);
  font-size: calc(clamp(1.1rem, 2.2vw, 1.9rem) * var(--escala));
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: block;
  white-space: nowrap;
}
.contador.dinero .valor { color: var(--costo); font-size: calc(clamp(.95rem, 1.9vw, 1.6rem) * var(--escala)); }
.contador .etiqueta {
  font-family: var(--f-titulo);
  font-size: calc(.5625rem * var(--escala));
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---- Puente a EnCore --------------------------------------------------- */
/* El acto de cierre no cierra: entrega. La tarjeta es lo único que se ve con
   acento morado sólido en toda la presentación, para que EnCore no parezca
   "un acto más" sino el destino. */
.encore-tarjeta {
  border: 1px solid var(--modelo);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: rgba(173, 92, 255, .09);
  padding: 14px 16px;
}
.encore-nombre {
  font-family: var(--f-titulo);
  font-size: calc(1.35rem * var(--escala));
  color: var(--modelo);
  margin-bottom: 4px;
}
.encore-que {
  font-size: calc(.9375rem * var(--escala));
  line-height: 1.5;
  margin-bottom: 10px;
}
.encore-cuando {
  font-family: var(--f-titulo);
  font-size: calc(.8125rem * var(--escala));
  color: var(--texto-2);
}
.encore-cuando b { color: var(--texto); font-weight: 400; }

/* ---- QR ---------------------------------------------------------------- */
.qr-bloque { display: flex; align-items: center; gap: 14px; }
.qr { background: #fff; padding: 8px; border-radius: var(--r-sm); width: clamp(90px, 11vw, 140px); height: auto; flex: none; }
.dominio { font-family: var(--f-titulo); font-size: calc(.8125rem * var(--escala)); }
@media (max-width: 1023px) { .qr-bloque { display: none; } }

/* ---- Chat -------------------------------------------------------------- */
.chat-identidad {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-block: 8px;
}
.chat-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #f5c542, #d89518);
  object-fit: contain;
  object-position: center;
  box-shadow: 0 0 0 3px var(--azul-tenue);
}
.chat-identidad-texto {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.chat-identidad-texto strong {
  font-family: var(--f-titulo);
  font-size: calc(.8125rem * var(--escala));
  font-weight: 400;
}
.chat-identidad-texto > span {
  color: var(--texto-2);
  font-size: calc(.6875rem * var(--escala));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-chat .mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: calc(.9375rem * var(--escala));
  background: var(--bg-sunken);
}

.burbuja {
  max-width: 90%;
  padding: 11px 15px;
  border-radius: 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
@media (min-width: 768px) { .burbuja { max-width: 78%; } }
.burbuja.mia {
  align-self: flex-end;
  background: var(--azul);
  color: var(--bg);
  border-bottom-right-radius: 5px;
  white-space: pre-wrap;
  font-weight: 500;
}
.burbuja.suya {
  align-self: flex-start;
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-bottom-left-radius: 5px;
}
.burbuja.mala { align-self: flex-start; background: rgba(255,87,234,.1); border: 1px solid var(--costo); }

/* ---- Markdown dentro de las burbujas ----------------------------------- */
.burbuja p { margin: 0 0 .55em; }
.burbuja p:last-child { margin-bottom: 0; }
.burbuja b { font-weight: 700; color: var(--texto); }
.burbuja i { font-style: italic; }

.burbuja ul, .burbuja ol { margin: .2em 0 .55em; padding-left: 1.35em; }
.burbuja ul:last-child, .burbuja ol:last-child { margin-bottom: 0; }
.burbuja li { margin-bottom: .3em; }
.burbuja li:last-child { margin-bottom: 0; }
.burbuja li::marker { color: var(--azul); }

.md-code {
  font-family: var(--f-codigo);
  font-size: .875em;
  background: var(--bg-sunken);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--azul);
  white-space: nowrap;
}
.burbuja.mia .md-code { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.2); color: var(--bg); }

.pensando { padding: 13px 15px; }
.puntos { display: inline-flex; gap: 4px; }
.puntos i { width: 6px; height: 6px; border-radius: 99px; background: var(--azul); animation: rebote 1.2s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.evento-tool {
  align-self: flex-start;
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(68, 180, 255, .36);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(68, 180, 255, .1), rgba(27, 35, 46, .96) 52%);
  padding: 10px 12px;
  color: var(--texto);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: border-color var(--salto), background var(--salto);
}
.tool-icono {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--azul-tenue);
  color: var(--azul);
  border: 1px solid rgba(68, 180, 255, .28);
  font: 700 .75rem var(--f-codigo);
}
.tool-cuerpo {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.tool-cuerpo strong {
  font-size: calc(.8125rem * var(--escala));
  font-weight: 700;
}
.tool-cuerpo > span,
.tool-cuerpo small {
  color: var(--texto-2);
  font-size: calc(.6875rem * var(--escala));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-cuerpo code {
  width: fit-content;
  margin-block: 4px 2px;
  color: var(--azul);
  font: 400 calc(.6875rem * var(--escala)) var(--f-codigo);
}
.tool-estado {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--azul);
  font: 400 calc(.6875rem * var(--escala)) var(--f-codigo);
  white-space: nowrap;
}
.tool-estado i {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(68, 180, 255, .28);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
.evento-tool.completa {
  border-color: rgba(3, 229, 130, .32);
  background: linear-gradient(135deg, rgba(3, 229, 130, .08), rgba(27, 35, 46, .96) 52%);
}
.evento-tool.completa .tool-estado { color: var(--ok); }
.evento-tool.error { border-color: var(--costo); }
.evento-tool.error .tool-estado { color: var(--costo); }
@keyframes girar { to { transform: rotate(360deg); } }

/* El acto 3 hace explícito el bucle real. La jerarquía y los verbos importan:
   el modelo pide, nuestro código ejecuta y el modelo recibe el resultado. */
.flujo-herramienta {
  display: grid;
  gap: 5px;
  font-family: var(--f-cuerpo);
}
.flujo-paso {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--bg-sunken);
  padding: 8px 10px;
}
.flujo-paso > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.flujo-paso small {
  color: var(--texto-2);
  font: 400 .625rem var(--f-titulo);
  letter-spacing: .1em;
}
.flujo-paso strong { font-size: .8125rem; }
.flujo-paso code,
.flujo-paso em {
  color: var(--texto-2);
  font: 400 .6875rem var(--f-codigo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flujo-paso code { color: var(--azul); margin-top: 3px; }
.flujo-marca {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea);
  color: var(--texto-2);
  font: 700 .6875rem var(--f-titulo);
}
.flujo-paso.modelo.completo,
.flujo-paso.codigo.completo { border-color: rgba(3, 229, 130, .34); }
.flujo-paso.completo .flujo-marca { border-color: var(--ok); color: var(--ok); }
.flujo-paso.codigo.ejecutando { border-color: var(--azul); box-shadow: inset 3px 0 0 var(--azul); }
.flujo-paso.codigo.ejecutando .flujo-marca { border-color: var(--azul); color: var(--azul); }
.flujo-paso.pendiente { opacity: .55; }
.flujo-conector { height: 7px; color: var(--linea); line-height: 7px; padding-left: 20px; }
.respuesta-herramienta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-family: var(--f-cuerpo);
  color: var(--texto);
}

.tarjeta-accion {
  align-self: stretch;
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  background: rgba(3, 229, 130, .08);
  padding: 11px 14px;
  font-size: calc(.875rem * var(--escala));
}
.tarjeta-accion.espera { border-color: var(--azul); background: var(--azul-tenue); }
.tarjeta-accion .estado { font-family: var(--f-titulo); font-weight: 700; color: var(--ok); display: block; margin-bottom: 3px; }
.tarjeta-accion.espera .estado { color: var(--azul); }
.tarjeta-accion .motivo { color: var(--texto-2); font-size: .9em; }

.tarjeta-mapa {
  align-self: flex-start;
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(68, 180, 255, .4);
  border-radius: 13px;
  background:
    linear-gradient(rgba(68, 180, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 180, 255, .05) 1px, transparent 1px),
    var(--bg-elev);
  background-size: 18px 18px;
}
.mapa-icono {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--azul);
  background: var(--azul-tenue);
  border: 1px solid rgba(68, 180, 255, .35);
  font: 700 1.25rem var(--f-titulo);
}
.tarjeta-mapa > div { display: grid; gap: 4px; min-width: 0; }
.tarjeta-mapa strong { font-size: .9rem; }
.tarjeta-mapa p { margin: 0; line-height: 1.4; }
.tarjeta-mapa small { color: var(--texto-2); }
.tarjeta-mapa a { width: fit-content; color: var(--azul); font-size: .8rem; margin-top: 3px; }

.vivo { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); animation: latir 2s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .35; } }

/* Las sugerencias van en una tira con scroll y un difuminado al borde, que
   avisa de que hay más sin robar altura al chat. */
.sugerencias {
  display: flex;
  gap: 7px;
  padding: 10px 12px 2px;
  overflow-x: auto;
  flex: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  cursor: grab;
  touch-action: pan-x;
}
.sugerencias.arrastrando { cursor: grabbing; user-select: none; }
.sugerencias:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.sugerencias::-webkit-scrollbar { display: none; }
.sugerencia {
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  color: var(--texto-2);
  border-radius: 99px;
  padding: 9px 15px;
  font-size: calc(.8125rem * var(--escala));
  white-space: nowrap;
  flex: none;
  min-height: 44px;
  transition: border-color var(--salto), color var(--salto), background var(--salto);
}
.sugerencia:hover, .sugerencia:active { border-color: var(--azul); color: var(--azul); background: var(--azul-tenue); }

.chat-pie { display: flex; gap: 8px; padding: 10px 12px; flex: none; background: var(--bg-elev); align-items: flex-end; }
.chat-pie input {
  flex: 1; min-width: 0;
  min-height: 46px;
  background: var(--bg-sunken);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: 12px 16px;
  color: var(--texto);
  transition: border-color var(--salto), box-shadow var(--salto);
}
.chat-pie input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-tenue);
  outline: none;
}
.chat-pie input::placeholder { color: var(--texto-2); }
.enviar {
  background: var(--azul);
  color: var(--bg);
  border: 0;
  border-radius: 99px;
  width: 46px;
  height: 46px;
  min-height: 46px;
  font-size: 1.2rem;
  font-weight: 700;
  flex: none;
  display: grid;
  place-items: center;
  transition: filter var(--salto), transform var(--salto);
}
.enviar:hover:not(:disabled) { filter: brightness(1.12); }
.enviar:active:not(:disabled) { transform: scale(.94); }
.enviar:disabled { opacity: .4; cursor: not-allowed; }

.aviso {
  margin: 10px 12px 0;
  border: 1px solid var(--costo);
  background: rgba(255,87,234,.08);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-size: calc(.8125rem * var(--escala));
  flex: none;
}
.aviso.oculto { display: none; }

/* ══ PORTADA ════════════════════════════════════════════════════════════ */
.portada {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
.portada-texto { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; width: 100%; }

.portada-titulo { font-size: calc(clamp(2.6rem, 9vw, 6rem) * var(--escala)); margin-bottom: .5rem; }
.portada-sub {
  font-family: var(--f-cuerpo);
  font-style: italic;
  font-size: calc(clamp(1.1rem, 2.8vw, 1.75rem) * var(--escala));
  line-height: 1.3;
  margin-bottom: .9rem;
  max-width: 24ch;
}
.portada-region {
  font-family: var(--f-codigo);
  color: var(--azul);
  font-size: calc(clamp(.8rem, 1.8vw, 1.05rem) * var(--escala));
  margin-bottom: 1.8rem;
}
.portada-meta {
  margin: 0 0 1.8rem;
  display: grid;
  gap: 9px;
  font-family: var(--f-titulo);
  font-size: calc(.875rem * var(--escala));
  max-width: 34rem;
}
.portada-meta > div { display: flex; gap: 12px; align-items: baseline; }
.portada-meta dt { color: var(--texto-2); min-width: 5.6rem; flex: none; text-transform: lowercase; }
.portada-meta dd { margin: 0; }
.portada-pie {
  font-family: var(--f-cuerpo);
  font-style: italic;
  color: var(--texto-2);
  font-size: calc(1.0625rem * var(--escala));
  margin-bottom: 1.4rem;
  max-width: 34ch;
}
.empezar {
  background: var(--azul);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  padding: 12px 24px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: calc(.9375rem * var(--escala));
  min-height: 44px;
}
.empezar:hover { filter: brightness(1.12); }

.portada-rejilla {
  position: absolute;
  top: 0; right: 0;
  bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
  width: 42%;
  z-index: 1;
  background-color: var(--bg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  background-image:
    linear-gradient(to right,  var(--linea-suave) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea-suave) 1px, transparent 1px);
  background-size: calc(100% / 4) calc(100% / 6);
}
.portada-rejilla .bloque { background: var(--azul); }
.portada-rejilla .b1 { grid-column: 4; grid-row: 1; }
.portada-rejilla .b2 { grid-column: 2 / span 2; grid-row: 2 / span 2; }
.portada-chip {
  grid-column: 2 / span 2;
  grid-row: 4 / span 2;
  align-self: center;
  justify-self: center;
  width: min(86%, 230px);
  height: auto;
}
@media (max-width: 900px) {
  .portada-rejilla { width: 100%; opacity: .18; background-color: transparent; }
  .portada-chip { grid-column: 3 / span 2; grid-row: 5 / span 2; width: min(80%, 150px); }
  .portada-meta dt { min-width: 4.8rem; }
}

/* ---- Pantallas bajas --------------------------------------------------
   El cromo fijo (timeline + barra) se come una fracción grande del alto en
   laptops de 650-760px. Aquí se aprieta todo lo que se puede sin sacrificar
   legibilidad, para que cada acto siga cabiendo de una pieza. */
@media (max-height: 800px) and (min-width: 1024px) {
  :root { --linea-h: 66px; }
  .escena { padding-top: calc(var(--linea-h) + 12px); padding-bottom: calc(var(--barra) + 14px); }
  .acto { gap: 26px; }
  .columna-texto { gap: 10px; }
  .acto-titulo { font-size: calc(clamp(1.7rem, 3.2vw, 2.6rem) * var(--escala)); }
  .acto-frase { font-size: calc(1rem * var(--escala)); }
  .paso-icono { width: 34px; height: 34px; }
}

@media (max-height: 700px) and (min-width: 1024px) {
  :root { --linea-h: 58px; }
  .acto-titulo { font-size: calc(1.7rem * var(--escala)); }
  .modelo-op { padding: 6px 11px; min-height: 38px; }
  .ejecutar { padding: 9px 20px; min-height: 40px; }
}

/* ---- Modo proyección ---------------------------------------------------
   En una pantalla de 1920 el `max-width: 1320px` dejaba 320 px muertos a cada
   lado: el contenido vivía en el centro y se veía chico desde el fondo del
   stand. Aquí se usa el ancho real, con márgenes generosos pero no absurdos. */
:root[data-modo="proyeccion"] .acto {
  max-width: none;
  gap: 64px;
  padding-inline: clamp(48px, 5vw, 104px);
}
:root[data-modo="proyeccion"] .columna-texto { gap: 18px; }
:root[data-modo="proyeccion"] .acto-titulo { font-size: calc(clamp(2rem, 3.4vw, 3rem) * var(--escala)); }

/* Timeline más presente: es la pieza que la gente mira desde lejos. */
:root[data-modo="proyeccion"] .pasos { max-width: 1280px; }
:root[data-modo="proyeccion"] .paso-icono { width: 58px; height: 58px; }
:root[data-modo="proyeccion"] .paso-btn { gap: 14px; }
:root[data-modo="proyeccion"] .conector { margin: 0 18px; height: 3px; }

/* Cabecera y salida del panel también crecen: a 18 px de código, una salida
   de 12 px se vuelve ilegible justo cuando es la que prueba que funcionó. */
:root[data-modo="proyeccion"] .panel-cabeza { padding-inline: 20px; }
:root[data-modo="proyeccion"] .pestana { padding: 15px 16px; }
:root[data-modo="proyeccion"] .panel-codigo pre { padding: 22px 26px; line-height: 1.6; }
:root[data-modo="proyeccion"] .panel-salida { padding: 16px 22px; font-size: calc(.875rem * var(--escala)); }
:root[data-modo="proyeccion"] .ejecutar { padding: 15px 30px; min-height: 54px; }
:root[data-modo="proyeccion"] .contadores { gap: 14px; }
:root[data-modo="proyeccion"] .contador { padding: 16px 18px; }
:root[data-modo="proyeccion"] .qr { width: clamp(140px, 13vw, 200px); }

/* ---- Teléfono ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .escena { padding-top: calc(var(--linea-h) + 14px); padding-bottom: calc(var(--barra) + 16px); }
  .acto { gap: 14px; }
  .columna-texto { gap: 10px; }
  .panel { height: min(44svh, 380px); }
  .acto-titulo { font-size: calc(clamp(1.65rem, 6.4vw, 2.4rem) * var(--escala)); }
  .acto-frase { font-size: calc(.9375rem * var(--escala)); }
  /* El puente lleva tarjeta + botón + panel: en teléfono la tarjeta se
     aprieta para que el acto siga cabiendo de una pieza. */
  .encore-tarjeta { padding: 11px 13px; }
  .encore-nombre { font-size: 1.1rem; }
  .encore-que { font-size: .875rem; line-height: 1.45; margin-bottom: 7px; }
  .encore-cuando { font-size: .75rem; }
  #acto-6 .panel { height: min(28svh, 236px); }
  #acto-6 .columna-texto { gap: 8px; }

  .modelos { grid-template-columns: 1fr; gap: 4px; }
  .modelo-op { padding: 6px 11px; min-height: 44px; }
  /* El acto del modelo lleva tres opciones más el botón: es el más alto de
     los cinco y por 16px se salía en teléfonos de 844. */
  #acto-2 .panel { height: min(38svh, 320px); }
}

/* ---- Teléfono vertical -------------------------------------------------
   En móvil la prioridad cambia: el público llega por QR para interactuar,
   especialmente con Goyito. Cada escena sigue cabiendo en un viewport,
   pero el chat recibe el espacio que antes consumía una portada repetida. */
@media (max-width: 767px) and (orientation: portrait) {
  body { font-size: 16px; }
  main { height: var(--alto-visual); }
  .linea {
    height: calc(var(--linea-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .escena {
    min-height: var(--alto-visual);
    padding:
      calc(var(--linea-h) + 12px + env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      calc(var(--barra) + 12px)
      max(16px, env(safe-area-inset-left));
  }
  .acto { gap: 12px; }
  .acto-num,
  .portada-region,
  .modelo-pregunta label,
  .pestana,
  .panel-salida,
  .evento-tool,
  .encore-cuando,
  .barra { font-size: 13px; }

  /* 44×44 es el mínimo táctil del sistema, también para navegación y chips. */
  .paso-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 7px; }
  .modelo-op,
  .sugerencia,
  .pestana { min-height: 44px; }

  .panel-cabeza { min-height: 44px; padding-inline: 10px; gap: 8px; }
  .pestana { padding: 9px 10px; }
  /* En pantallas angostas las pestañas ya identifican el código. Se oculta la
     etiqueta redundante para no reducirla a 10 px; el chat sí conserva estado. */
  .panel-servicio { display: none; }
  .panel-chat .panel-servicio { display: flex; font-size: 13px; }

  .panel-codigo pre { padding: 14px 15px; }
  .panel-salida { padding: 10px 13px; }
  /* Al ejecutar, el resultado es la parte nueva de la historia. En teléfono
     recibe más de la mitad del panel; el código sigue arriba y scrollea. */
  /* En el acto 3 la salida ES la explicación: deben verse completos los tres
     pasos del bucle. El código conserva una franja desplazable arriba. */
  #acto-3 .panel-salida:not(:empty) { max-height: 78%; }
  #acto-4 .panel-salida:not(:empty) { max-height: 58%; }
  #acto-4 .panel-salida { padding: 0 13px 10px; }
  #acto-4 .regla-selector button { min-height: 44px; font-size: 13px; }
  #acto-4 .regla-vista { padding-top: 10px; }
  #acto-4 .regla-eyebrow,
  #acto-4 .regla-contexto { font-size: 13px; }
  #acto-3 .flujo-paso { padding: 6px 8px; gap: 8px; }
  #acto-3 .flujo-conector { height: 4px; line-height: 4px; }

  /* Acto 2: selector horizontal + pregunta y botón en una sola fila. Así el
     panel sigue visible incluso en 375×667 sin hacer pequeños los controles. */
  #acto-2 {
    height: var(--alto-visual);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }
  #acto-2 .columna-texto { justify-content: flex-start; gap: 7px; }
  #acto-2 .acto-titulo { font-size: 1.75rem; }
  #acto-2 .acto-frase { font-size: 1rem; line-height: 1.3; }
  #acto-2 .modelos {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  #acto-2 .modelos::-webkit-scrollbar { display: none; }
  #acto-2 .modelo-op {
    flex: 0 0 auto;
    min-width: 208px;
    flex-wrap: nowrap;
    padding: 7px 11px;
  }
  #acto-2 .modelo-op .precio,
  #acto-2 .modelo-op .lat { font-size: 13px; }
  #acto-2 .modelo-pregunta { gap: 4px; }
  #acto-2 .modelo-campo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
  }
  /* La pregunta de ejemplo debe leerse completa antes de ejecutarla. Conserva
     el botón al lado para no sacrificar una fila completa del panel. */
  #acto-2 .modelo-campo textarea { min-height: 130px; height: 130px; }
  #acto-2 .modelo-campo .ejecutar {
    align-self: stretch;
    justify-self: stretch;
    min-height: 64px;
    padding-inline: 14px;
  }
  #acto-2 .panel { height: auto; min-height: 0; }

  /* Goyito se comporta como una app de chat: el encabezado exterior no se
     repite; los contadores quedan como barra de estado y el panel llena todo. */
  #acto-5 {
    height: var(--alto-visual);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 10px;
  }
  #acto-5 .columna-texto { display: block; }
  #acto-5 .acto-num,
  #acto-5 .acto-titulo,
  #acto-5 .acto-frase { display: none; }
  #acto-5 .contadores { gap: 6px; }
  #acto-5 .contador { padding: 7px 8px; }
  #acto-5 .contador .valor { font-size: 1.15rem; }
  #acto-5 .contador.dinero .valor { font-size: 1.05rem; }
  #acto-5 .contador .etiqueta {
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
  }
  #acto-5 .panel-chat { height: auto; min-height: 0; border-radius: 10px; }
  #acto-5 .panel-chat .mensajes {
    padding: 12px;
    gap: 8px;
    font-size: 16px;
    scroll-padding-block: 12px;
  }
  #acto-5 .burbuja { max-width: 88%; padding: 10px 13px; line-height: 1.45; }
  #acto-5 .sugerencias { padding: 8px 10px 4px; }
  #acto-5 .sugerencia { padding: 8px 14px; font-size: 13px; }
  #acto-5 .chat-pie { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
  #acto-5 .chat-pie input { padding: 11px 15px; }
  #acto-5 .evento-tool {
    width: 100%;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 9px 10px;
    gap: 9px;
  }
  #acto-5 .tool-icono { width: 34px; height: 34px; }
  #acto-5 .tool-estado {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: -2px;
    font-size: 13px;
  }
  #acto-5 .tool-cuerpo strong,
  #acto-5 .tool-cuerpo > span,
  #acto-5 .tool-cuerpo code,
  #acto-5 .tool-cuerpo small { font-size: 13px; }

  /* El puente conserva contenido y panel, pero usa filas acotadas para que el
     pie fijo nunca tape la salida en el iPhone SE. */
  #acto-6 {
    height: var(--alto-visual);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }
  #acto-6 .columna-texto { justify-content: flex-start; gap: 7px; }
  #acto-6 .acto-titulo { font-size: 1.75rem; }
  #acto-6 .acto-frase { font-size: 1rem; line-height: 1.3; }
  #acto-6 .encore-tarjeta { padding: 9px 11px; }
  #acto-6 .encore-nombre { font-size: 1rem; }
  #acto-6 .encore-que { font-size: 14px; line-height: 1.35; margin-bottom: 0; }
  #acto-6 .encore-cuando { display: none; }
  #acto-6 .ejecutar { width: 100%; padding-inline: 12px; }
  #acto-6 .panel { height: auto; min-height: 0; }

  /* Con el teclado abierto desaparece el cromo de presentación y el chat usa
     todo el visual viewport, como una app de mensajería real. */
  :root[data-chat-foco="1"] .linea,
  :root[data-chat-foco="1"] .barra,
  :root[data-chat-foco="1"] .esquina { display: none; }
  :root[data-chat-foco="1"] #acto-5 {
    height: var(--alto-visual);
    min-height: var(--alto-visual);
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
    grid-template-rows: minmax(0, 1fr);
  }
  :root[data-chat-foco="1"] #acto-5 .columna-texto { display: none; }
  :root[data-chat-foco="1"] #acto-5 .panel-chat { border-radius: 0; }
}

/* ---- /chat -------------------------------------------------------------
   Esta ruta reutiliza exactamente el mismo agente y la misma conversación,
   pero elimina el cromo de presentación. El resultado se siente como una app
   de chat y el QR lleva aquí sin mantener dos interfaces que puedan divergir. */
:root[data-vista-chat="1"] body { overflow: hidden; }
:root[data-vista-chat="1"] .linea,
:root[data-vista-chat="1"] .barra,
:root[data-vista-chat="1"] .esquina { display: none; }
:root[data-vista-chat="1"] main {
  height: var(--alto-visual);
  overflow: hidden;
  scroll-snap-type: none;
}
:root[data-vista-chat="1"] .escena:not(#acto-5) { display: none; }
:root[data-vista-chat="1"] #acto-5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  min-height: var(--alto-visual);
  height: var(--alto-visual);
  max-width: none;
  padding: clamp(16px, 3vw, 32px);
}
:root[data-vista-chat="1"] #acto-5 .columna-texto { display: none; }
:root[data-vista-chat="1"] #acto-5 .panel-chat {
  width: min(100%, 900px);
  height: 100%;
  margin: auto;
  border-color: rgba(68, 180, 255, .3);
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
:root[data-vista-chat="1"] #acto-5 .panel-cabeza {
  min-height: 62px;
  padding-inline: 18px;
}
:root[data-vista-chat="1"] #acto-5 .panel-chat .mensajes {
  padding: clamp(14px, 2.5vw, 24px);
  font-size: 1rem;
}
:root[data-vista-chat="1"] #acto-5 .sugerencias { padding-inline: 16px; }
:root[data-vista-chat="1"] #acto-5 .chat-pie { padding: 12px 16px 16px; }

@media (max-width: 767px) {
  :root[data-vista-chat="1"] #acto-5 {
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }
  :root[data-vista-chat="1"] #acto-5 .panel-chat {
    width: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  :root[data-vista-chat="1"] #acto-5 .panel-cabeza {
    min-height: 62px;
    padding-inline: 14px;
    border-bottom-color: rgba(68, 180, 255, .18);
  }
  :root[data-vista-chat="1"] #acto-5 .chat-identidad-texto strong { font-size: 14px; }
  :root[data-vista-chat="1"] #acto-5 .chat-identidad-texto > span { font-size: 13px; }
  :root[data-vista-chat="1"] #acto-5 .panel-servicio { display: flex; font-size: 13px; }
  :root[data-vista-chat="1"] #acto-5 .panel-chat .mensajes {
    padding: 14px 12px;
    font-size: 16px;
  }
  :root[data-vista-chat="1"] #acto-5 .burbuja { max-width: 92%; }
  :root[data-vista-chat="1"] #acto-5 .sugerencias { padding: 8px 10px 4px; }
  :root[data-vista-chat="1"] #acto-5 .chat-pie {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  }
}

/* Un teléfono de 568 px de alto no puede contener simultáneamente tesis,
   controles y código legible. En vez de fabricar paneles de 50 px, se cambia
   a scroll natural y se garantiza un área útil a cada panel. */
@media (max-height: 620px) and (orientation: portrait) {
  main { scroll-snap-type: none; }
  .escena { scroll-snap-align: none; min-height: var(--alto-visual); height: auto; }
  .acto { align-content: center; }
  .acto .panel { height: 250px; min-height: 250px; }
  #acto-2,
  #acto-5,
  #acto-6 {
    height: auto;
    min-height: var(--alto-visual);
    grid-template-rows: auto auto;
  }
  #acto-2 .panel { height: 220px; min-height: 220px; }
  #acto-5 .panel-chat { min-height: 440px; }
  #acto-6 .panel { height: 240px; min-height: 240px; }
}

/* ---- Teléfono en horizontal: una escena no puede medir una pantalla ---- */
@media (max-height: 520px) and (orientation: landscape) {
  main { height: var(--alto-visual); scroll-snap-type: none; }
  .escena {
    min-height: auto;
    scroll-snap-align: none;
    padding-top: calc(var(--linea-h) + 12px + env(safe-area-inset-top));
    padding-bottom: calc(var(--barra) + 12px + env(safe-area-inset-bottom));
  }
  .acto-titulo { font-size: 1.7rem !important; }
  .panel { height: 300px; }

  /* También acostado, el chat elimina su portada repetida y ocupa el ancho.
     Al abrir teclado se vuelve una sola ventana sin cromo fijo. */
  #acto-5 .acto-num,
  #acto-5 .acto-titulo,
  #acto-5 .acto-frase { display: none; }
  #acto-5 .contadores { gap: 6px; }
  #acto-5 .contador { padding: 6px 9px; }
  :root[data-chat-foco="1"] .linea,
  :root[data-chat-foco="1"] .barra,
  :root[data-chat-foco="1"] .esquina { display: none; }
  :root[data-chat-foco="1"] #acto-5 {
    height: var(--alto-visual);
    min-height: var(--alto-visual);
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }
  :root[data-chat-foco="1"] #acto-5 .columna-texto { display: none; }
  :root[data-chat-foco="1"] #acto-5 .panel-chat { height: 100%; border-radius: 0; }
}

/* ---- Desbordes --------------------------------------------------------- */
pre, .panel-codigo, .sugerencias { overscroll-behavior-x: contain; }

/* ---- Movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  main { scroll-behavior: auto !important; }
  .acto .columna-texto > *, .acto .panel { opacity: 1; transform: none; }
}

/* ══ EL CIERRE PROGRAMADO ══════════════════════════════════════════════
   A partir del 14/08/2026 la demo deja de ejecutar nada. Esta capa lo dice y,
   sobre todo, tapa la interfaz: dejar los botones a la vista pero muertos es
   peor que no tenerlos. */
.cierre {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
}

.cierre-caja {
  max-width: 34rem;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--bg-elev);
  padding: clamp(24px, 5vw, 44px);
}

.cierre-titulo {
  font-family: var(--f-titulo);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--texto);
  margin: 0 0 14px;
  letter-spacing: -.025em;
}

.cierre-texto {
  font-family: var(--f-cuerpo);
  color: var(--texto-2);
  line-height: 1.6;
  margin: 0 0 20px;
}

.cierre-firma {
  font-family: var(--f-titulo);
  font-size: .8rem;
  line-height: 1.7;
  color: var(--texto-2);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

/* Sin scroll detrás de la capa: la demo terminó, no hay nada que recorrer. */
:root[data-cerrada="1"] body { overflow: hidden; }