/* ═══════════════════════════════════════════════════════════════════════════════
   THINK² · CÓMO FUNCIONA — la piel del instructivo que va antes del onboarding.

   Las escenas SON la app: se arman con sus mismas clases (`.msj-canal`, `.burbuja`,
   `.pend-ficha`, `.ficha-persona`, `.canal-hoja`…) y las pinta style.css, así que se
   ven exactamente como en la app, en oscuro y en claro, y cambian cuando ella cambia
   (regla del director, 16-sep-2026: “deben ser 100 % iguales a como se ve el app”).
   Esta hoja solo pone lo que en la app hace la maqueta o el JavaScript:
   · el MARCO: la tarjeta negra de la app a su tamaño real, escalada (`--z`) dentro
     del lienzo como una captura;
   · la disposición de Mensajes (lista · conversación · ficha) con clases propias,
     porque app.js busca `.msj-layout` y `.msj-conv` en todo el documento;
   · las copias del carril de pestañas (`.tt-tabs`), por la misma razón;
   · las capas apiladas (`.tt-pila`) con las que un estado da paso a otro;
   · y el escritorio del computador del colaborador, que no es Think².
   Lo que se mueve lo mueve tutorial.js con Web Animations.
   ═══════════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 {
  --tt-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  --tt-escala: 1;
  --tt-ventana: var(--fondo);
  --tt-lateral: var(--panel-2);
  --tt-tarjeta: var(--panel-2);                       /* una tarjeta sobre la ventana */
  --tt-flotante: var(--ficha-sobre-velo, var(--panel-2));  /* una tarjeta sobre un panel */
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  color: var(--texto);
  font-family: inherit;
}

/* ─── El escenario: una ventana de proporción fija donde cabe el lienzo ───
   El alto se acota contra la ventana del sistema para que el título, el texto y
   “Siguiente” nunca queden por debajo del borde de la hoja. El caller puede
   cambiarlo con --tt-escenario-max si lo monta en otro sitio. */
.tutorial-think2 .tt-escenario {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 420;
  max-height: var(--tt-escenario-max, max(220px, calc(100vh - 385px)));
  overflow: hidden;
}

/* El lienzo mide SIEMPRE lo mismo (760×420) y se escala: la composición se
   diseña una vez con medidas de app de verdad y nunca se reflowea. */
.tutorial-think2 .tt-lienzo {
  position: absolute;
  left: 50%; top: 50%;
  width: 760px; height: 420px;
  margin: -210px 0 0 -380px;
  scale: var(--tt-escala);
}

.tutorial-think2 .tt-escena {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}
.tutorial-think2 .tt-escena.tt-activa { visibility: visible; opacity: 1; }

/* ─── El texto: título y una frase, centrados SOBRE la escena (23-sep-2026) ─── */
.tutorial-think2 .tt-textos { display: grid; }
.tutorial-think2 .tt-copia {
  grid-area: 1 / 1;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}
.tutorial-think2 .tt-copia.tt-activa { visibility: visible; opacity: 1; }
.tutorial-think2 .tt-titulo {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.45px;
  line-height: 1.2;
  color: var(--texto);
  text-wrap: balance;
}
.tutorial-think2 .tt-descripcion {
  margin: 9px auto 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-2);
  text-wrap: pretty;
}

/* ─── Los controles ─── */
/* “Atrás” y “Omitir” comparten la primera celda: el pie sigue siendo de tres columnas y los puntos
   se quedan centrados (18-sep-2026). */
.tutorial-think2 .tt-izquierda { display: flex; align-items: center; gap: 8px; }
.tutorial-think2 .tt-controles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.tutorial-think2 .tt-boton {
  justify-self: start;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background-color .18s var(--tt-ease), color .18s var(--tt-ease), opacity .18s var(--tt-ease);
}
.tutorial-think2 .tt-boton:hover { background: var(--realce); color: var(--texto); }
.tutorial-think2 .tt-boton:active { scale: .98; }
.tutorial-think2 .tt-boton.tt-primario {
  justify-self: end;
  background: var(--contraste);
  color: var(--contraste-texto);
  font-weight: 600;
}
.tutorial-think2 .tt-boton.tt-primario:hover {
  background: color-mix(in srgb, var(--contraste) 90%, var(--texto-suave));
  color: var(--contraste-texto);
}
.tutorial-think2 .tt-boton.tt-invisible { visibility: hidden; pointer-events: none; }
.tutorial-think2 .tt-boton:focus-visible,
.tutorial-think2 .tt-punto:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--texto) 55%, transparent);
  outline-offset: 2px;
}

.tutorial-think2 .tt-puntos { display: flex; align-items: center; gap: 2px; }
.tutorial-think2 .tt-punto {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.tutorial-think2 .tt-punto i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--realce-fuerte);
  transition: width .3s var(--tt-ease), background-color .3s var(--tt-ease);
}
.tutorial-think2 .tt-punto:hover i { background: color-mix(in srgb, var(--texto) 40%, transparent); }
.tutorial-think2 .tt-punto[aria-current="step"] i { width: 18px; background: var(--texto); }

.tutorial-think2 .tt-anuncio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-think2 .tt-punto i, .tutorial-think2 .tt-boton { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL MARCO: la tarjeta de la app, a su tamaño real y escalada
   ═══════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 .tt-escenario { pointer-events: none; }
.tutorial-think2 .tt-marco {
  position: absolute;
  left: 0; top: 0;
  width: calc(760px / var(--z, 1));
  height: calc(420px / var(--z, 1));
  transform-origin: 0 0;
  scale: var(--z, 1);
  overflow: hidden;
  border-radius: calc(16px / var(--z, 1));
  background: var(--fondo);
  color: var(--texto);
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
}
/* Una captura no tiene barras de desplazamiento. */
.tutorial-think2 .tt-marco * { scrollbar-width: none; }
.tutorial-think2 .tt-marco *::-webkit-scrollbar { display: none; }
.tutorial-think2 .tt-pila { display: grid; }
.tutorial-think2 .tt-pila > * { grid-area: 1 / 1; min-width: 0; }
.tutorial-think2 .tt-pila > * + * { opacity: 0; }

/* El puntero y su onda al pulsar. Vive dentro del marco: se dibuja a 1/z para verse de su tamaño. */
.tutorial-think2 .tt-cursor {
  position: absolute;
  left: 0; top: 0;
  width: calc(22px / var(--z, 1)); height: calc(26px / var(--z, 1));
  transform-origin: 0 0;
  opacity: 0;
  z-index: 90;
  pointer-events: none;
}
.tutorial-think2 .tt-cursor svg {
  position: absolute;
  left: calc(-3px / var(--z, 1)); top: calc(-2px / var(--z, 1));
  width: calc(22px / var(--z, 1)); height: calc(26px / var(--z, 1));
  overflow: visible;
}
.tutorial-think2 .tt-cursor path { fill: var(--texto); stroke: var(--fondo); stroke-width: 1.4px; stroke-linejoin: round; }
.tutorial-think2 .tt-toque {
  position: absolute;
  left: 0; top: 0;
  width: calc(36px / var(--z, 1)); height: calc(36px / var(--z, 1));
  border-radius: 50%;
  background: var(--texto);
  opacity: 0;
  z-index: 89;
  pointer-events: none;
}

/* El velo de las hojas y del aprobador: el de `.tarea-velo` / `.pend-velo`, dentro del marco. */
.tutorial-think2 .tt-velo {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--velo);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
          backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENSAJES: la disposición de `.msj-layout` y `.msj-conv`
   ═══════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 .tt-msj {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  height: 100%;
  overflow: hidden;
}
.tutorial-think2 .tt-msj.sin-ficha { grid-template-columns: 280px minmax(0, 1fr); }
.tutorial-think2 .tt-msj > .msj-lista { position: relative; min-height: 0; overflow: hidden; }
.tutorial-think2 .tt-conv { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tutorial-think2 .tt-msj > .tt-pila > .tt-conv { min-height: 0; height: 100%; }
.tutorial-think2 .tt-buscar { font-size: 13px; color: var(--texto-suave); white-space: nowrap; }
.tutorial-think2 .msj-canal-info .tt-pila { grid-template-columns: minmax(0, 1fr); }
.tutorial-think2 .msj-canal-lado .tt-pila { justify-items: end; }

/* El hilo no se desplaza con scroll: se desplaza la PISTA, pegada abajo, como un chat que crece. */
.tutorial-think2 .tt-hilo { position: relative; overflow: hidden; }
.tutorial-think2 .tt-pista {
  position: absolute;
  left: 22px; right: 22px; bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tutorial-think2 .tt-pista .burbuja.director { transform-origin: bottom right; }
.tutorial-think2 .tt-pista .burbuja.prici,
.tutorial-think2 .tt-pista .msj-tecleando { transform-origin: bottom left; }

/* La caja del compositor: en la app es un textarea con su placeholder. */
.tutorial-think2 .tt-caja-texto {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-wrap;
  min-height: 31px;
}
.tutorial-think2 .tt-ph { position: absolute; left: 0; top: 0; color: var(--texto-suave); white-space: nowrap; pointer-events: none; }
.tutorial-think2 .tt-caja-texto .tt-ph { top: 5px; }
.tutorial-think2 .tt-caja-botones { position: relative; flex: none; width: 30px; height: 30px; }
.tutorial-think2 .tt-caja-botones > * { position: absolute; inset: 0; margin: 0; }
.tutorial-think2 .tt-enviar { opacity: 0; }
.tutorial-think2 .tt-escrito .tt-l { opacity: 0; }
.tutorial-think2 .tt-discos { flex: none; }

/* El carril de pestañas de la ficha (copia de `.ficha-tabs`). */
.tutorial-think2 .tt-tabs { position: relative; margin: 0 0 14px; }
.tutorial-think2 .tt-pestanas {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 2px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
}
.tutorial-think2 .tt-pestana {
  position: relative;
  z-index: 1;
  flex: none;
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 11.5px;
  font-weight: 600;
}
.tutorial-think2 .tt-pestana-sel { color: var(--contraste-texto); }
.tutorial-think2 .tt-pestana.sel .tt-pila > :first-child { opacity: 0; }
.tutorial-think2 .tt-pestana.sel .tt-pila > :last-child { opacity: 1; }
.tutorial-think2 .tt-ovalo {
  position: absolute;
  top: 2px; bottom: 2px; left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--contraste);
}
.tutorial-think2 .tt-flecha { display: grid; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRATACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 .tt-a-seccion { position: relative; height: 100%; padding: 28px 32px; overflow: hidden; }
.tutorial-think2 .tt-a-buscar { flex: 1; min-width: 0; font-size: 13px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; }
.tutorial-think2 .tt-a-chip { display: inline-grid; }
.tutorial-think2 .tt-a-rejillas { position: relative; }
.tutorial-think2 .tt-a-area { position: absolute; left: 0; right: 0; top: 0; }
.tutorial-think2 .tt-a-marca { justify-items: end; }
.tutorial-think2 .tt-a-sello { display: inline-flex; }
.tutorial-think2 .tt-a-hoja {
  position: absolute;
  z-index: 58;
  top: 26px;
  left: 50%;
  margin-left: -390px;
  width: 780px;
  max-height: calc(100% - 52px);
  transform: none;
}
.tutorial-think2 .tt-a-contratar,
.tutorial-think2 .tt-a-despedir { display: inline-grid; justify-items: start; }
.tutorial-think2 .tt-apagado { opacity: .35; }
.tutorial-think2 .btn.tt-encima { background: var(--realce-fuerte); }

/* ═══════════════════════════════════════════════════════════════════════════
   SU NÚMERO Y SU COMPUTADOR
   ═══════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 .tt-paneles { display: grid; }
.tutorial-think2 .tt-paneles > * { grid-area: 1 / 1; min-width: 0; }
.tutorial-think2 .tt-c-maquina { opacity: 0; }
.tutorial-think2 .tt-c-botones { margin-top: 8px; }
.tutorial-think2 .tt-c-mini .tt-esc { scale: calc(290 / 1000); }

.tutorial-think2 .tt-c-ventana {
  position: absolute;
  z-index: 40;
  left: 120px; top: 34px;
  width: 700px;
  border-radius: 12px;
  overflow: hidden;
  background: #1c1c1e;
  opacity: 0;
}
.tutorial-think2 .tt-c-barra { display: flex; align-items: center; height: 28px; padding: 0 12px; background: #2a2a2d; }
.tutorial-think2 .tt-semaforo { display: flex; gap: 7px; }
.tutorial-think2 .tt-semaforo i { width: 11px; height: 11px; border-radius: 50%; }
.tutorial-think2 .tt-semaforo i:nth-child(1) { background: #ff5f57; }
.tutorial-think2 .tt-semaforo i:nth-child(2) { background: #febc2e; }
.tutorial-think2 .tt-semaforo i:nth-child(3) { background: #28c840; }
.tutorial-think2 .tt-c-grande { position: relative; height: 437.5px; overflow: hidden; }
.tutorial-think2 .tt-c-grande .tt-esc { scale: .7; }

/* El aviso de WhatsApp que llega a tu pantalla desde SU número (no es Think²: es tu sistema). */
.tutorial-think2 .tt-c-aviso {
  position: absolute;
  z-index: 70;
  top: 18px; right: 18px;
  width: 360px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, #2c2c2e 92%, transparent);
  color: #f5f5f7;
  opacity: 0;
}
/* El icono de la app de WhatsApp: su verde con el degradado de arriba abajo y el logo en blanco. */
.tutorial-think2 .tt-c-aviso-icono {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, #5ffc7b, #28d146);
  color: #fff;
}
.tutorial-think2 .tt-c-aviso-icono svg { width: 22px; height: 22px; }
.tutorial-think2 .tt-c-aviso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.38; }
.tutorial-think2 .tt-c-aviso-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tutorial-think2 .tt-c-aviso-cab b { font-size: 13px; font-weight: 600; }
.tutorial-think2 .tt-c-aviso-cab span { font-size: 11px; color: rgba(245, 245, 247, .55); }

/* Su escritorio: un Linux con el navegador abierto, en una pantalla de 1000×625 que se reduce. */
.tutorial-think2 .tt-esc {
  position: absolute;
  left: 0; top: 0;
  width: 1000px; height: 625px;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  background: #f4f4f5;
  color: #1d1d1f;
  font-size: 18px;
  overflow: hidden;
}
.tutorial-think2 .tt-esc-panel { flex: none; display: flex; align-items: center; gap: 22px; height: 30px; padding: 0 16px; background: #2b2d31; color: #e8e8ea; font-size: 14px; }
.tutorial-think2 .tt-esc-reloj { margin-left: auto; }
.tutorial-think2 .tt-esc-nav { flex: none; background: #dfe1e5; }
.tutorial-think2 .tt-esc-pestanas { display: flex; align-items: flex-end; height: 40px; padding: 0 12px; }
.tutorial-think2 .tt-esc-pestana {
  display: flex; align-items: center; gap: 9px;
  width: 300px; height: 34px; padding: 0 14px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  font-size: 14px; color: #3c4043;
}
.tutorial-think2 .tt-esc-pestana i { width: 14px; height: 14px; border-radius: 4px; background: #5b8def; flex: none; }
.tutorial-think2 .tt-esc-pestana .tt-pila > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutorial-think2 .tt-esc-barra { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px; background: #fff; }
.tutorial-think2 .tt-esc-flechas { display: flex; gap: 6px; color: #5f6368; }
.tutorial-think2 .tt-esc-flechas svg { width: 20px; height: 20px; }
.tutorial-think2 .tt-esc-url { flex: 1; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; border-radius: 999px; background: #f1f3f4; color: #3c4043; font-size: 15px; }
.tutorial-think2 .tt-esc-url svg { width: 15px; height: 15px; color: #5f6368; flex: none; }
.tutorial-think2 .tt-esc-pagina { position: relative; flex: 1; min-height: 0; background: #fff; }
.tutorial-think2 .tt-esc-busqueda,
.tutorial-think2 .tt-esc-articulo { position: absolute; inset: 0; padding: 30px 60px; }
.tutorial-think2 .tt-esc-campo { display: flex; align-items: center; gap: 12px; width: 620px; height: 50px; padding: 0 20px; border-radius: 999px; background: #f1f3f4; color: #5f6368; }
.tutorial-think2 .tt-esc-campo svg { width: 20px; height: 20px; flex: none; }
.tutorial-think2 .tt-esc-campo-texto { position: relative; flex: 1; height: 24px; line-height: 24px; font-size: 18px; color: #1d1d1f; white-space: pre; }
.tutorial-think2 .tt-esc-ph { position: absolute; left: 0; top: 0; color: #80868b; }
.tutorial-think2 .tt-esc-escrito .tt-l { opacity: 0; }
.tutorial-think2 .tt-esc-resultados { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; width: 620px; }
.tutorial-think2 .tt-esc-res { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; margin: 0 -14px; border-radius: 12px; }
.tutorial-think2 .tt-esc-res-luz { position: absolute; inset: 0; border-radius: 12px; background: #eef3fd; opacity: 0; }
.tutorial-think2 .tt-esc-res b { position: relative; font-size: 19px; font-weight: 600; color: #1a0dab; }
.tutorial-think2 .tt-esc-res > span { position: relative; font-size: 14px; color: #4d5156; }
.tutorial-think2 .tt-esc-art-meta { display: block; font-size: 14px; color: #5f6368; }
.tutorial-think2 .tt-esc-art-titulo { display: block; margin: 6px 0 18px; font-size: 30px; font-weight: 700; }
.tutorial-think2 .tt-esc-clave { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 12px; margin-bottom: 16px; font-size: 19px; font-weight: 600; }
.tutorial-think2 .tt-esc-clave > span { position: relative; }
.tutorial-think2 .tt-esc-resalte { position: absolute; inset: 0; border-radius: 8px; background: #fde68a; transform-origin: left center; }
.tutorial-think2 .tt-esc-parrafo { margin-top: 22px; }
.tutorial-think2 .tt-esc-articulo { opacity: 0; }
.tutorial-think2 .tt-barra { position: relative; display: block; width: var(--w, 90%); height: 9px; margin-top: 9px; border-radius: 5px; background: #e8eaed; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRABAJAN CONTIGO: la tarea abierta en la ficha y el aprobador del chat
   ═══════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 .tt-d-velo { z-index: 60; background: var(--velo-hoja); -webkit-backdrop-filter: blur(16px) saturate(.9); backdrop-filter: blur(16px) saturate(.9); }
.tutorial-think2 .tt-d-lista { z-index: 62; }
.tutorial-think2 .tt-d-ficha { overflow: hidden; }
/* La ✕ va arriba a la izquierda desde el 7-oct-2026 (la ficha como en iOS). En la app queda sobre la cabecera, que se
   pega arriba; esta escena desplaza la columna entera hasta la tarea —su cabecera se va— y la ✕ caería encima de
   “← Cola de tareas”. Aquí se va con su cabecera. */
.tutorial-think2 .tt-d-ficha > .ficha-cerrar { visibility: hidden; }
.tutorial-think2 .tt-rollo { display: flex; flex-direction: column; }
.tutorial-think2 .tt-rollo > * { width: 292px; flex: none; }
.tutorial-think2 .tt-marcas { flex: none; }
.tutorial-think2 .tt-marcas .fase { display: grid; place-items: center; }
.tutorial-think2 .tt-notas { justify-items: end; }
.tutorial-think2 .tt-d-lleno { width: 100%; transform-origin: left center; }
.tutorial-think2 .tt-d-espera { opacity: 0; }
.tutorial-think2 .tt-d-lente { position: absolute; z-index: 64; width: 34px; height: 34px; opacity: 0; }
.tutorial-think2 .tt-d-lente .tt-capa { position: absolute; inset: 0; }
.tutorial-think2 .tt-d-lente .tt-capa + .tt-capa { opacity: 0; }
.tutorial-think2 .tt-placeholder { color: var(--texto-suave); }
.tutorial-think2 .tt-d-tarjeta,
.tutorial-think2 .tt-d-cabeza,
.tutorial-think2 .tt-d-porque,
.tutorial-think2 .tt-d-pide,
.tutorial-think2 .tt-d-decidida,
.tutorial-think2 .tt-d-enviado { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CREAR UN GRUPO: la hoja de `#modal-canal`
   ═══════════════════════════════════════════════════════════════════════════ */
.tutorial-think2 .tt-e-modal {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tutorial-think2 .tt-e-velo {
  position: absolute;
  inset: 0;
  background: var(--velo-hoja);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
          backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
}
.tutorial-think2 .tt-e-hoja { opacity: 0; animation: none; }
.tutorial-think2 .tt-e-titulo,
.tutorial-think2 .tt-e-sub { position: relative; }
.tutorial-think2 .tt-e-titulo .tt-ph { color: rgba(255, 255, 255, .22); }
.tutorial-think2 .tt-e-titulo .tt-escrito { white-space: pre; }
.tutorial-think2 .tt-e-cara { flex: none; }
.tutorial-think2 .tt-e-crear { flex: none; justify-items: end; }
.tutorial-think2 .tt-e-pistas > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutorial-think2 .tt-e-grupo,
.tutorial-think2 .tt-e-sumado,
.tutorial-think2 .tt-e-pregunta,
.tutorial-think2 .tt-e-escribe,
.tutorial-think2 .tt-e-respuesta { opacity: 0; }
/* La ficha del grupo en Miembros y la hoja de “Sumar a…” (`abrirSumarMiembros`): personas y colaboradores. */
.tutorial-think2 .tt-e-ficha { overflow: hidden; }
.tutorial-think2 .tt-e-laura { overflow: hidden; }
.tutorial-think2 .tt-e-cuenta,
.tutorial-think2 .tt-e-cuenta-cab { display: inline-grid; }
.tutorial-think2 .tt-e-sumar-capa {
  position: absolute;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: 24px;
}
.tutorial-think2 .tt-e-sumar-hoja { position: relative; opacity: 0; animation: none; }
.tutorial-think2 .tt-e-laura-cara { flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Hojas estrechas de verdad (un teléfono): el texto y los botones se apilan
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 460px) {
  .tutorial-think2 .tt-titulo { font-size: 22px; }
  .tutorial-think2 .tt-descripcion { font-size: 13.5px; }
  .tutorial-think2 .tt-boton { padding: 9px 16px; }
}

/* “Agrandar” es un icono, no un botón con texto (regla del director, 24-sep-2026) */
.tutorial-think2 .icono-agrandar { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--texto-2); display: grid; place-items: center; cursor: default; }
.tutorial-think2 .icono-agrandar svg { width: 14px; height: 14px; }