/* ==========================================================================
   TUTORIALES — /tutoriales y nada más.

   El diseño llegó de Claude Design (3-ago-2026) y los valores están COPIADOS
   LITERALES, no traducidos a los tokens de base.css. Es la regla del proyecto
   para los entregables de Design y tiene motivo: cada token que sobrevive deja
   el valor «cerca» en vez de «exacto», y la suma de «cerca» es lo que se ve
   como «casi igual, pero no».

   FUENTE: el entregable pedía IBM Plex por <link> a Google Fonts. NO se copia:
   la CSP del sitio (`font-src 'self' data:`) lo bloquea y solo dejaría un error
   en consola. Se nombra la familia por si el visitante la tiene instalada y si
   no cae en la pila del sistema.

   Índice
     1. Lienzo, portada e índice
     2. Un tutorial: cabecera, rejilla y pasos
     3. La maqueta del panel: escala, cajas y vocabulario
     4. Cerco, ratón y el paso activo
     5. Ayuda y llamada final
     6. Sin movimiento
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lienzo, portada e índice
   -------------------------------------------------------------------------- */

.tt {
  background: #f4f6fa;
  color: #101828;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tt *, .tt *::before, .tt *::after { box-sizing: border-box; }

/* base.css y marketing.css opinan sobre listas, enlaces y botones en todo el
   sitio; el diseño trae su propio reset y aquí manda el diseño.

   VAN EN `:where()` Y NO EN `.tt` A SECAS, y no es cosmética: en el entregable
   son selectores de etiqueta pelados —peso (0,0,1)— y al colgarlos de `.tt`
   subían a (0,1,1) y le ganaban a las clases del propio diseño. Medido: el
   `font: inherit` del botón le pisaba a `.tt-paso` su `font-size: 14px` (salían
   a 16) y su color, y `.tt a` le pisaba al botón blanco de la llamada final su
   `color: #101828`. `:where()` no suma peso y deja el reparto como venía. */
:where(.tt) ol, :where(.tt) ul { margin: 0; padding: 0; list-style: none; }
:where(.tt) a { color: #2f6fe4; text-decoration: none; }
:where(.tt) a:hover { color: #1d4ed8; text-decoration: underline; }
:where(.tt) button { font: inherit; color: inherit; }

.tt-ancho {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px) 90px;
}

.tt-cab {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px 0 34px;
  max-width: 720px;
}
.tt-cab h1 {
  margin: 0;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -.035em;
}
.tt-entrada {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: #56637a;
  text-wrap: pretty;
}
.tt-nota {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8996aa;
}
.tt-nota__punto {
  flex: none;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f6fe4;
}

/* El vídeo de primeros pasos, encima del índice. Misma tarjeta que el
   índice —blanca, borde suave, mismo radio— para que se lea como una pieza
   más de la página y no como un anuncio pegado. */
.tt-hero {
  margin: 0 0 22px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.tt-hero__t {
  margin: 0 0 4px;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}
.tt-hero__x {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #56637a;
  text-wrap: pretty;
}

.tt-indice {
  padding: 18px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.tt-indice__t {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8996aa;
  margin-bottom: 12px;
}
.tt-indice ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 20px;
}
.tt-indice a {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #303a4b;
}
.tt-indice__n {
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #a7b0c0;
}

/* --------------------------------------------------------------------------
   2. Un tutorial: cabecera, rejilla y pasos
   -------------------------------------------------------------------------- */

.tt-item {
  scroll-margin-top: 86px;
  padding: 44px 0 8px;
  border-top: 1px solid #e8ecf3;
}
.tt-item:first-of-type { border-top: 0; }

.tt-item__cab {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.tt-item__n {
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: #2f6fe4;
}
.tt-item h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.025em;
}

/* Dos columnas cuando caben 420px cada una, y una sola cuando no. Es el mismo
   `auto-fit` del entregable: no hay punto de ruptura escrito a mano porque lo
   que manda es el ancho de la columna, no el del teléfono. */
.tt-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 26px;
  align-items: start;
}
.tt-izq { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.tt-carta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.tt-mando {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}
.tt-mando[hidden] { display: none; }
.tt-puntos { display: flex; align-items: center; gap: 6px; }
.tt-punto {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 20px;
  padding: 0;
  cursor: pointer;
  background: #d5dce7;
  transition: width .3s ease, background .3s ease;
}
.tt-contador {
  flex: 1;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #8996aa;
}
.tt-pausa {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #56637a;
  cursor: pointer;
}
.tt-pausa:hover { background: #f6f8fc; }

.tt-foto, .tt-video { margin: 0; border-radius: 16px; overflow: hidden; }
.tt-foto { border: 1px solid #e4e9f0; background: #fff; }
.tt-video { background: #101828; }
.tt-foto img, .tt-video video { display: block; width: 100%; height: auto; }

.tt-pasos { display: flex; flex-direction: column; gap: 8px; }
.tt-paso {
  display: flex;
  gap: 11px;
  width: 100%;
  text-align: left;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid #e8ecf3;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.55;
  color: #303a4b;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.tt-paso__n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  background: #eef2f8;
  color: #8996aa;
  transition: background .25s ease, color .25s ease;
}
.tt-paso__x { flex: 1; }

/* --------------------------------------------------------------------------
   3. La maqueta del panel: escala, cajas y vocabulario

   El dibujo está medido en un lienzo de 560 unidades de ancho. `--k` convierte
   una unidad en píxeles y sale del ANCHO DEL CONTENEDOR (`cqw`), así que el
   dibujo entero —posiciones, tamaños y letra— escala solo sin una línea de JS.

   Sin container queries (navegador viejo) `--k` vale 1px y la maqueta se queda a
   560 px, arrastrándose de lado dentro de su marco. La página en sí NUNCA se
   desplaza de lado: lo que se desliza es solo esta caja.
   -------------------------------------------------------------------------- */

.tt-lienzo {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 10px;
}
.tt-demo { width: 560px; }
.tt-canvas {
  --k: 1px;
  position: relative;
  width: 560px;
  height: calc(var(--h) * var(--k));
  border-radius: 10px;
  background: #f4f6fa;
  border: 1px solid #e8ecf3;
  overflow: hidden;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@supports (container-type: inline-size) {
  /* En el móvil la maqueta NO se encoge hasta ser ilegible: por debajo de 430px
     de columna se queda a 430 y se arrastra. Los rótulos del editor son de 6,5
     unidades y a media escala no se leen. */
  .tt-demo { container-type: inline-size; width: auto; min-width: 430px; }
  .tt-canvas { --k: calc(100cqw / 560); width: 100%; }
}

.tt-b {
  position: absolute;
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  z-index: var(--z, 1);
  display: flex;
  align-items: center;
  justify-content: var(--al, flex-start);
  padding-inline: calc(var(--pd, 0) * var(--k));
  border-radius: calc(var(--r, 0) * var(--k));
  font-size: calc(var(--fs, 9) * var(--k));
  font-weight: var(--fw, 400);
  line-height: var(--lh, 1.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* `wrap` en el diseño: deja partir la línea y centra el bloque entero. */
.tt-b--parte {
  white-space: normal;
  text-overflow: clip;
  align-items: center;
}

/* --- Superficies --- */
.tt-b--bar    { background: #fff; border-bottom: 1px solid #e8ecf3; color: #56637a; --fw: 500; }
.tt-b--panel  { background: #fff; border: 1px solid #e4e9f0; --r: 10; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.tt-b--soft   { background: #f6f8fc; border: 1px solid #eceef2; --r: 8; --pd: 8; color: #303a4b; }
.tt-b--band   { background: #fff8ec; border: 1px solid #f6e2c2; --r: 8; --pd: 8; color: #8a5a12; }
.tt-b--plain  { background: none; }
.tt-b--sep    { background: #eceef2; }

/* --- Textos --- */
.tt-b--h    { color: #101828; --fw: 700; --fs: 12; letter-spacing: -.01em; }
.tt-b--t    { color: #101828; --fw: 600; --fs: 10; }
.tt-b--m    { color: #8996aa; --fs: 9; }
.tt-b--mono {
  color: #56637a;
  --fs: 9;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.01em;
}

/* --- Botones y pestañas --- */
.tt-b--btn   { background: #fff; border: 1px solid #e4e9f0; --r: 8; --al: center; color: #303a4b; --fw: 500; }
.tt-b--btnP  { background: #2f6fe4; --r: 8; --al: center; color: #fff; --fw: 600; }
.tt-b--dark  { background: #101828; --r: 8; --al: center; color: #fff; --fw: 600; }
.tt-b--tab   { --r: 7; --al: center; color: #56637a; --fw: 500; }
.tt-b--tabOn { background: #fff; --r: 7; --al: center; color: #101828; --fw: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }

/* --- Pastillas --- */
.tt-b--chip, .tt-b--chipA, .tt-b--chipB, .tt-b--chipG, .tt-b--chipR {
  --r: 999; --al: center; --fs: 8.5; --fw: 500;
}
.tt-b--chip  { background: #eef2f8; color: #56637a; }
.tt-b--chipA { background: #fdf1dd; color: #8a5a12; }
.tt-b--chipB { background: #eef4ff; color: #1d4ed8; }
.tt-b--chipG { background: #e4f5ec; color: #0b7a4f; }
.tt-b--chipR { background: #fdeaea; color: #c8393f; }

/* --- Formulario, mapa y adornos --- */
.tt-b--input { background: #fff; border: 1px solid #dfe4ec; --r: 8; --pd: 8; color: #101828; }
.tt-b--sw    { --r: 7; border: 1px solid rgba(16, 24, 40, .14); }
.tt-b--sq    { background: #fff; border: 1.5px solid #cfd8e5; --r: 3; --al: center; --fs: 7; }
.tt-b--img   { background: linear-gradient(135deg, #e2e8f1, #cbd5e3); --r: 7; --al: center; color: #fff; --fw: 600; text-shadow: 0 1px 2px rgba(16, 24, 40, .35); }
.tt-b--node  { background: #fff; border: 1px solid #dfe4ec; --r: 8; --al: center; --fs: 8.5; --fw: 500; color: #303a4b; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.tt-b--edge  { background: #cfd8e5; }
.tt-b--dot   {
  background: #2f6fe4;
  border: 2px solid #fff;
  --r: 999;
  --al: center;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .22);
}

/* --------------------------------------------------------------------------
   4. Cerco, ratón y el paso activo

   Todo cuelga de un solo atributo, data-paso en la <section>: qué cajas se ven,
   dónde está el cerco, dónde el ratón y qué ficha va encendida. El JS solo
   cambia ese número.
   -------------------------------------------------------------------------- */

.tt-cerco {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  border: 2px solid #2f6fe4;
  box-shadow: 0 0 0 4px rgba(47, 111, 228, .14);
  left: calc(var(--rx, 0) * var(--k));
  top: calc(var(--ry, 0) * var(--k));
  width: calc(var(--rw, 0) * var(--k));
  height: calc(var(--rh, 0) * var(--k));
  border-radius: calc(var(--rr, 8) * var(--k));
  transition: left .45s cubic-bezier(.4, 0, .2, 1), top .45s cubic-bezier(.4, 0, .2, 1),
              width .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1);
}
.tt-raton {
  position: absolute;
  z-index: 21;
  left: 0;
  top: 0;
  pointer-events: none;
  width: calc(12 * var(--k));
  height: calc(17 * var(--k));
  transform: translate(calc(var(--cx, 0) * var(--k)), calc(var(--cy, 0) * var(--k)));
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* Cuatro pasos como mucho, así que cuatro juegos de reglas y ni una más. */
.tt-item[data-paso="0"] .tt-b[data-on]:not([data-on~="1"]),
.tt-item[data-paso="1"] .tt-b[data-on]:not([data-on~="2"]),
.tt-item[data-paso="2"] .tt-b[data-on]:not([data-on~="3"]),
.tt-item[data-paso="3"] .tt-b[data-on]:not([data-on~="4"]),
.tt-item[data-paso="4"] .tt-b[data-on]:not([data-on~="5"]) { display: none; }

.tt-item[data-paso="0"] .tt-canvas { --rx: var(--r0x); --ry: var(--r0y); --rw: var(--r0w); --rh: var(--r0h); --rr: var(--r0r); --cx: var(--c0x); --cy: var(--c0y); }
.tt-item[data-paso="1"] .tt-canvas { --rx: var(--r1x); --ry: var(--r1y); --rw: var(--r1w); --rh: var(--r1h); --rr: var(--r1r); --cx: var(--c1x); --cy: var(--c1y); }
.tt-item[data-paso="2"] .tt-canvas { --rx: var(--r2x); --ry: var(--r2y); --rw: var(--r2w); --rh: var(--r2h); --rr: var(--r2r); --cx: var(--c2x); --cy: var(--c2y); }
.tt-item[data-paso="3"] .tt-canvas { --rx: var(--r3x); --ry: var(--r3y); --rw: var(--r3w); --rh: var(--r3h); --rr: var(--r3r); --cx: var(--c3x); --cy: var(--c3y); }
.tt-item[data-paso="4"] .tt-canvas { --rx: var(--r4x); --ry: var(--r4y); --rw: var(--r4w); --rh: var(--r4h); --rr: var(--r4r); --cx: var(--c4x); --cy: var(--c4y); }

.tt-item[data-paso="0"] .tt-pasos li:nth-child(1) .tt-paso,
.tt-item[data-paso="1"] .tt-pasos li:nth-child(2) .tt-paso,
.tt-item[data-paso="2"] .tt-pasos li:nth-child(3) .tt-paso,
.tt-item[data-paso="3"] .tt-pasos li:nth-child(4) .tt-paso,
.tt-item[data-paso="4"] .tt-pasos li:nth-child(5) .tt-paso { background: #f2f7ff; border-color: #cddcfb; }

.tt-item[data-paso="0"] .tt-pasos li:nth-child(1) .tt-paso__n,
.tt-item[data-paso="1"] .tt-pasos li:nth-child(2) .tt-paso__n,
.tt-item[data-paso="2"] .tt-pasos li:nth-child(3) .tt-paso__n,
.tt-item[data-paso="3"] .tt-pasos li:nth-child(4) .tt-paso__n,
.tt-item[data-paso="4"] .tt-pasos li:nth-child(5) .tt-paso__n { background: #2f6fe4; color: #fff; }

.tt-item[data-paso="0"] .tt-punto:nth-child(1),
.tt-item[data-paso="1"] .tt-punto:nth-child(2),
.tt-item[data-paso="2"] .tt-punto:nth-child(3),
.tt-item[data-paso="3"] .tt-punto:nth-child(4),
.tt-item[data-paso="4"] .tt-punto:nth-child(5) { width: 18px; background: #2f6fe4; }

/* --------------------------------------------------------------------------
   5. Ayuda y llamada final
   -------------------------------------------------------------------------- */

.tt-ayuda {
  margin-top: 52px;
  padding: 26px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
.tt-ayuda h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.tt-ayuda p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #56637a; text-wrap: pretty; }

.tt-cta {
  margin-top: 18px;
  padding: 34px 28px;
  background: #101828;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tt-cta__x { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 280px; }
.tt-cta h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.tt-cta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #a9b4c6; text-wrap: pretty; }
.tt-cta__btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  background: #fff;
  color: #101828;
  font-size: 15px;
  font-weight: 700;
}
.tt a.tt-cta__btn:hover { background: #e9f0ff; color: #101828; text-decoration: none; }

/* --------------------------------------------------------------------------
   6. Sin movimiento

   Una imagen en bucle marea a mucha gente y es un ajuste que el navegador ya
   nos dice. El JS además no arranca el auto-avance; aquí solo se quitan las
   transiciones, para que pulsar un paso siga funcionando pero sin deslizar.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tt-cerco, .tt-raton, .tt-punto, .tt-paso, .tt-paso__n { transition: none; }
}

/* --------------------------------------------------------------------------
   Las once guías v3 vuelven a enseñar, no solo a describir.

   Cada sección incorpora la maqueta específica que ya representa su flujo.
   El azul corresponde al foco de trabajo del editor; el resto de la página se
   mantiene deliberadamente quieto para que el movimiento explique el paso.
   -------------------------------------------------------------------------- */
.v3-guide-visual {
  padding: 0;
  border-top: 0;
  color: #141b2d;
}
.v3-guide-visual__inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(52px, 6vw, 86px) clamp(18px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 34px);
}
.v3-guide-visual__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.v3-guide-visual__heading > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.v3-guide-visual__number {
  flex: none;
  color: #2f6fe4;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 650;
  letter-spacing: -.04em;
}
.v3-guide-visual__heading h2 {
  margin: 0;
  color: #111827;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(29px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.v3-guide-visual__heading > a {
  flex: none;
  color: #5f6b80;
  font-size: 12.5px;
  font-weight: 650;
}
.v3-guide-visual .tt-rejilla {
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
  gap: clamp(24px, 3vw, 38px);
  align-items: start;
}
.v3-guide-visual__card.tt-carta {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e1ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 26px 70px -48px rgba(18, 35, 66, .62), 0 2px 8px rgba(18, 35, 66, .05);
}
.v3-guide-visual__bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid #e8edf4;
  background: #fff;
}
.v3-guide-visual__bar > span {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #cbd4e1;
}
.v3-guide-visual__bar > span:first-child { background: #ff746c; }
.v3-guide-visual__bar > span:nth-child(2) { background: #f5bd4f; }
.v3-guide-visual__bar > span:nth-child(3) { background: #62c887; }
.v3-guide-visual__bar b {
  min-width: 0;
  margin-left: 7px;
  overflow: hidden;
  color: #647188;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-guide-visual .tt-lienzo {
  padding: 14px;
  border-radius: 0;
  background: linear-gradient(145deg, #edf2f8, #f9fbfd 58%, #eef3f9);
  scrollbar-color: #9caac0 #e8edf4;
  scrollbar-width: thin;
}
.v3-guide-visual .tt-canvas {
  box-shadow: 0 15px 35px -28px rgba(19, 35, 61, .72);
}
.v3-guide-visual .tt-mando {
  min-height: 52px;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid #e8edf4;
  background: #fff;
}
.v3-guide-visual .tt-puntos { gap: 6px; }
.v3-guide-visual .tt-punto { min-width: 8px; min-height: 8px; }
.v3-guide-visual .tt-contador { color: #68758b; }
.v3-guide-visual .tt-pausa {
  min-height: 34px;
  padding-inline: 13px;
  border-color: #dbe3ee;
  border-radius: 999px;
  color: #40506a;
}
.v3-guide-visual .tt-pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 10px;
}
.v3-guide-visual .tt-paso {
  min-height: 58px;
  padding: 13px 14px;
  border-color: #dfe6ef;
  border-radius: 14px;
  color: #47566e;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  line-height: 1.52;
  box-shadow: 0 1px 2px rgba(18, 35, 66, .025);
}
.v3-guide-visual .tt-paso:hover {
  border-color: #aebfe0;
  background: #f7faff;
  color: #17233a;
}
.v3-guide-visual .tt-paso__n {
  width: 22px;
  height: 22px;
}
.v3-guide-visual button:focus-visible,
.v3-guide-visual a:focus-visible {
  outline: 3px solid rgba(47, 111, 228, .38);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .v3-guide-visual .tt-rejilla { grid-template-columns: 1fr; }
  .v3-guide-visual .tt-pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .v3-guide-visual__heading { align-items: flex-start; }
  .v3-guide-visual__heading > div { gap: 10px; }
  .v3-guide-visual__heading > a { padding-top: 8px; font-size: 0; }
  .v3-guide-visual__heading > a::after { content: '↑'; font-size: 18px; }
  .v3-guide-visual .tt-lienzo { padding: 9px; }
  .v3-guide-visual .tt-demo { min-width: 390px; }
  .v3-guide-visual .tt-pasos { grid-template-columns: 1fr; }
  .v3-guide-visual .tt-mando { min-height: 50px; }
}

/* ========================================================================== 
   Recorrido visual de Escenas (31-ago-2026)

   Componente independiente de las guías antiguas `.tt-*`. La maqueta imita
   únicamente la disposición y los estados del editor real; no carga datos del
   panel ni realiza peticiones. Todo el vocabulario visual usa `vret-` para no
   filtrarse al resto del marketing.
   ========================================================================== */
/* A11y specificity guard: keeps assistive text available without any visual footprint. */
.vret-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.vret-feature,
.vret-dialog,
.vret-dialog * { box-sizing: border-box; }

.vret-feature {
  width: min(1120px, calc(100% - 36px));
  margin: 20px auto 56px;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border: 1px solid #ded4c8;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(192, 138, 94, .18), transparent 32%),
    linear-gradient(145deg, #fffdfa 0%, #f6eee5 100%);
  box-shadow: 0 28px 70px -50px rgba(50, 35, 24, .55);
  color: #14110e;
  overflow: hidden;
}

.vret-feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.vret-eyebrow {
  margin: 0;
  color: #9e4f2c;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vret-feature h2,
.vret-dialog h2,
.vret-step h3 { text-wrap: pretty; }
.vret-feature h2 {
  margin: 0;
  max-width: 15ch;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(31px, 4.1vw, 50px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.025em;
}
.vret-feature__text {
  margin: 0;
  max-width: 55ch;
  color: #5d554c;
  font-size: 15px;
  line-height: 1.68;
  text-wrap: pretty;
}
.vret-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 18px; padding-top: 5px; }
.vret-meta { color: #6f675d; font-size: 12.5px; font-weight: 650; }

.vret-primary,
.vret-secondary,
.vret-skip,
.vret-close,
.vret-inline-open,
.vret-dots button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.vret-primary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: #a85a32;
  color: #fff8f3;
  font-size: 13.5px;
  font-weight: 720;
  cursor: pointer;
  box-shadow: 0 10px 24px -15px rgba(110, 47, 18, .78);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.vret-primary:hover { background: #8f4928; transform: translateY(-1px); box-shadow: 0 14px 28px -16px rgba(110, 47, 18, .9); }
.vret-primary:focus-visible,
.vret-secondary:focus-visible,
.vret-skip:focus-visible,
.vret-close:focus-visible,
.vret-inline-open:focus-visible,
.vret-dots button:focus-visible { outline: 3px solid #2f6fe4; outline-offset: 3px; }

.vret-feature__art { min-width: 0; perspective: 900px; }
.vret-mini {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(109, 82, 61, .18);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 28px 50px -32px rgba(44, 28, 18, .65);
  overflow: hidden;
  transform: rotateY(-4deg) rotateX(1deg);
}
.vret-mini__top { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #eee7de; color: #776d63; font-size: 9px; font-weight: 700; }
.vret-mini__top i { width: 7px; height: 7px; border-radius: 50%; background: #ded5cb; }
.vret-mini__top span { margin-left: 6px; }
.vret-mini__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 27% 1fr; }
.vret-mini__rail { display: flex; flex-direction: column; gap: 8px; padding: 11px; border-right: 1px solid #eee7de; background: #fbfaf8; }
.vret-mini__rail b { height: 20%; min-height: 18px; border-radius: 6px; background: linear-gradient(135deg, #ded0c1, #b99477); }
.vret-mini__rail b:nth-child(2) { background: linear-gradient(135deg, #dbc1ab, #8e5c3c); }
.vret-mini__rail b:nth-child(3) { background: linear-gradient(135deg, #ebded2, #c29a7a); }
.vret-mini__rail b:nth-child(4) { background: #f2ece5; }
.vret-mini__view {
  position: relative;
  background:
    linear-gradient(90deg, transparent 58%, rgba(93, 61, 38, .2) 58% 60%, transparent 60%),
    linear-gradient(180deg, #efe7de 0 50%, #be9b7f 50% 54%, #ead7c6 54% 100%);
  overflow: hidden;
}
.vret-mini__view::before,
.vret-mini__view::after { content: ''; position: absolute; bottom: 15%; width: 21%; height: 38%; border: 5px solid rgba(111, 76, 51, .36); border-bottom: 0; }
.vret-mini__view::before { left: 13%; }
.vret-mini__view::after { right: 12%; }
.vret-mini__point { position: absolute; left: 53%; top: 59%; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #2f6fe4; color: #fff; font-size: 13px; box-shadow: 0 0 0 8px rgba(47, 111, 228, .17); animation: vretPoint 2.2s ease-in-out infinite; }
.vret-mini__steps { height: 33px; display: flex; align-items: center; justify-content: center; gap: 5px; border-top: 1px solid #eee7de; }
.vret-mini__steps i { width: 6px; height: 6px; border-radius: 99px; background: #ded6cd; }
.vret-mini__steps i.is-on { width: 22px; background: #a85a32; animation: vretMiniStep 3.2s ease-in-out infinite; }

.vret-inline-open {
  align-self: flex-start;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px 9px 11px;
  border: 1px solid #dbc6b5;
  border-radius: 14px;
  background: #fffaf5;
  color: #5c3624;
  text-align: left;
  cursor: pointer;
}
.vret-inline-open > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #a85a32; color: #fff8f3; font-size: 11px; }
.vret-inline-open > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.vret-inline-open b { font-size: 12.5px; }
.vret-inline-open small { color: #7a6555; font-size: 11.5px; }
.vret-inline-open:hover { border-color: #a85a32; background: #fff; }

/* State specificity guard: the native hidden attribute must always close the tour. */
.vret-shell[hidden] { display: none !important; }
.vret-shell {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.vret-backdrop { position: absolute; inset: 0; background: rgba(20, 17, 14, .72); backdrop-filter: blur(8px); animation: vretFade .22s ease both; }
.vret-dialog {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(860px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: #fbf9f6;
  color: #14110e;
  box-shadow: 0 40px 110px -38px rgba(0, 0, 0, .8);
  overflow: hidden;
  animation: vretDialogIn .26s cubic-bezier(.22, .8, .24, 1) both;
}
.vret-dialog__header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px 12px 24px; border-bottom: 1px solid #e6ddd3; background: rgba(255, 253, 250, .96); }
.vret-dialog__heading { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.vret-dialog__heading h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(22px, 3vw, 30px); font-weight: 400; letter-spacing: -.02em; }
.vret-dialog__tools { display: flex; align-items: center; gap: 7px; flex: none; }
.vret-skip { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: #6b635a; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.vret-skip:hover { background: #f0ebe5; color: #14110e; }
.vret-close { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #dfd7ce; border-radius: 12px; background: #fff; color: #514b44; font-size: 24px; line-height: 1; cursor: pointer; }
.vret-close:hover { background: #f3eee8; }
.vret-progress { height: 4px; flex: none; background: #e8e0d7; overflow: hidden; }
.vret-progress span { display: block; width: 12.5%; height: 100%; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #a85a32, #d38a5f); transition: width .38s cubic-bezier(.22, .8, .24, 1); }

.vret-dialog__body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(290px, .72fr); gap: 0; overflow: hidden; }
.vret-stage { position: relative; min-width: 0; min-height: 460px; background: #eee8e0; overflow: hidden; isolation: isolate; }
.vret-copy { min-width: 0; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 36px); border-left: 1px solid #e6ddd3; background: #fffdfa; overflow: auto; }
.vret-copy__count { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(20px, 3vh, 34px); color: #7d6e62; font-size: 11.5px; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; }
.vret-copy__count b { color: #a85a32; font-size: 16px; }
.vret-copy__meta { text-align: right; letter-spacing: 0; text-transform: none; }
.vret-step { animation: vretCopyIn .28s ease both; }
.vret-step[hidden] { display: none; }
.vret-step__number { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: #f1e4d8; color: #9d4f2b; font-family: 'Instrument Serif', Georgia, serif; font-size: 19px; }
.vret-step h3 { margin: 0 0 14px; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(27px, 3vw, 38px); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.vret-step > p { margin: 0; color: #534b43; font-size: 14.5px; line-height: 1.72; text-wrap: pretty; }
.vret-step aside { margin-top: 24px; display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid #ead9ca; border-radius: 13px; background: #fff7ef; color: #68442f; font-size: 12.5px; line-height: 1.55; }
.vret-step aside > span { width: 21px; height: 21px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #a85a32; color: #fff; font-size: 11px; }
.vret-dialog__footer { min-height: 72px; display: grid; grid-template-columns: minmax(112px, auto) 1fr minmax(112px, auto); align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid #e6ddd3; background: #fffdfa; }
.vret-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid #dcd4ca; border-radius: 999px; background: #fff; color: #4e4841; font-size: 13px; font-weight: 680; cursor: pointer; }
.vret-secondary:hover:not(:disabled) { border-color: #a85a32; color: #7f3f22; }
.vret-secondary:disabled { opacity: .42; cursor: not-allowed; }
.vret-dots { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.vret-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d9d0c7; cursor: pointer; transition: width .24s ease, background .24s ease; }
.vret-dots button[aria-current="step"] { width: 28px; background: #a85a32; }

/* El editor de demostración. */
.vret-editor { position: absolute; inset: 3.4%; display: flex; flex-direction: column; border: 1px solid rgba(92, 72, 55, .18); border-radius: 15px; background: #fff; box-shadow: 0 22px 50px -35px rgba(38, 24, 15, .6); overflow: hidden; transition: filter .28s ease, transform .28s ease; }
.vret-editor__top { height: 48px; flex: none; display: grid; grid-template-columns: minmax(100px, .65fr) minmax(210px, 1fr) minmax(255px, 1.1fr); align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #ece8e3; color: #5e5953; font-size: 9px; }
.vret-editor__crumb { display: flex; align-items: center; gap: 6px; font-weight: 720; color: #282522; }
.vret-editor__tabs { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px; border: 1px solid #ece8e3; border-radius: 9px; background: #f7f6f4; }
.vret-editor__tabs > * { padding: 6px 9px; border-radius: 6px; white-space: nowrap; }
.vret-editor__tabs b { background: #fff; color: #201d1a; box-shadow: 0 1px 3px rgba(28, 22, 17, .08); }
.vret-editor__status { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.vret-editor__status > span { padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.vret-review { border: 1px solid #eadbc6; background: #fff8ec; color: #83551b; }
.vret-preview-trigger { background: #2f6fe4; color: #fff; }
.vret-publish-trigger { background: #201d1a; color: #fff; }
.vret-editor__body { min-height: 0; flex: 1; display: grid; grid-template-columns: 28% 1fr; }
.vret-editor__rail { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-right: 1px solid #ece8e3; background: #fbfbfa; overflow: hidden; }
.vret-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 9px; }
.vret-rail__head b { font-size: 11px; }
.vret-add-trigger { padding: 6px 8px; border-radius: 7px; background: #201d1a; color: #fff; white-space: nowrap; }
.vret-search,
.vret-filter { min-height: 25px; display: flex; align-items: center; padding: 0 8px; border: 1px solid #e7e3de; border-radius: 7px; background: #fff; color: #9b948d; font-size: 8px; }
.vret-filter { color: #615b55; }
.vret-editor__rail > small { margin-top: 3px; color: #8e867d; font-size: 7px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.vret-card { position: relative; height: 61px; flex: none; display: grid; grid-template-columns: 40% 1fr; grid-template-rows: 1fr auto; gap: 2px 7px; padding: 5px; border: 1px solid #e8e3dd; border-radius: 8px; background: #fff; font-size: 8px; overflow: hidden; }
.vret-card.is-active { border-color: #e2a33d; box-shadow: 0 0 0 2px rgba(226, 163, 61, .18); }
.vret-card .vret-thumb { grid-row: 1 / 3; width: 100%; height: 100%; }
.vret-card > span { align-self: end; font-weight: 700; }
.vret-card em { align-self: start; color: #8a827a; font-size: 7px; font-style: normal; }
.vret-thumb { display: inline-block; border-radius: 5px; background: linear-gradient(150deg, #e7ded5 0 44%, #a87f61 45% 54%, #e8cdb6 55%); }
.vret-thumb--one { background: linear-gradient(135deg, #eaded1 0 36%, #895f40 37% 47%, #d6b59b 48% 67%, #f2e7dc 68%); }
.vret-thumb--two { background: linear-gradient(45deg, #754f37 0 22%, #ead9c9 23% 62%, #af896c 63%); }
.vret-thumb--cover { background: linear-gradient(160deg, #e1d1c2 0 52%, #553b2d 53%); }
.vret-editor__main { position: relative; min-width: 0; min-height: 0; padding: 10px; background: #f7f7f5; }
.vret-view-tabs { position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); display: flex; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 10px rgba(40, 29, 20, .12); font-size: 8px; }
.vret-view-tabs > * { padding: 5px 9px; border-radius: 6px; }
.vret-view-tabs b { background: #fff; }
.vret-room { position: relative; width: 100%; height: 100%; border-radius: 10px; background: #eee6de; overflow: hidden; }
.vret-room__wall { position: absolute; inset: 0 0 39%; background: linear-gradient(90deg, #e6dbd0 0 33%, #f4eee8 34% 66%, #ded1c5 67%); }
.vret-room__wall::after { content: ''; position: absolute; left: 34%; bottom: 0; width: 31%; height: 58%; border: 8px solid rgba(130, 90, 60, .32); border-bottom: 0; }
.vret-room__cabinet { position: absolute; left: 9%; right: 8%; bottom: 26%; height: 27%; border-top: 8px solid #a57756; background: repeating-linear-gradient(90deg, rgba(107, 71, 45, .22) 0 2px, transparent 2px 13%); }
.vret-room__floor { position: absolute; inset: 61% 0 0; background: linear-gradient(145deg, #e7d5c6, #f7eee6); clip-path: polygon(0 0, 100% 0, 86% 100%, 12% 100%); }
.vret-hotspot { position: absolute; left: 56%; top: 64%; width: 31px; height: 31px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #2f6fe4; color: #fff; font-size: 13px; box-shadow: 0 0 0 8px rgba(47, 111, 228, .2); }
.vret-room__tools { position: absolute; top: 14px; right: 13px; display: flex; flex-direction: column; gap: 6px; }
.vret-room__tools span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(24, 22, 20, .9); color: #fff; font-size: 11px; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.vret-room__badge { position: absolute; left: 10px; top: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #544d46; font-size: 8px; }

.vret-hot { transition: box-shadow .25s ease, transform .25s ease; }
.vret-stage[data-step="0"] .vret-editor__rail,
.vret-stage[data-step="0"] .vret-room,
.vret-stage[data-step="1"] .vret-add-trigger,
.vret-stage[data-step="2"] .vret-card.is-active,
.vret-stage[data-step="3"] .vret-point-trigger,
.vret-stage[data-step="4"] .vret-map-trigger,
.vret-stage[data-step="5"] .vret-transition-trigger,
.vret-stage[data-step="6"] .vret-review,
.vret-stage[data-step="6"] .vret-preview-trigger,
.vret-stage[data-step="7"] .vret-publish-trigger {
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(47, 111, 228, .88), 0 8px 22px rgba(47, 111, 228, .28);
  z-index: 12;
}

.vret-overlay,
.vret-drawer,
.vret-map,
.vret-preview-card,
.vret-publish-menu {
  position: absolute;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.98);
  transition: opacity .3s ease, transform .36s cubic-bezier(.22, .8, .24, 1);
}
.vret-stage[data-step="1"] .vret-library,
.vret-stage[data-step="2"] .vret-scene-details,
.vret-stage[data-step="3"] .vret-point-details,
.vret-stage[data-step="4"] .vret-map,
.vret-stage[data-step="5"] .vret-transition,
.vret-stage[data-step="6"] .vret-preview-card,
.vret-stage[data-step="7"] .vret-publish-menu { opacity: 1; transform: translateY(0) scale(1); }
.vret-stage[data-step="1"] .vret-editor,
.vret-stage[data-step="5"] .vret-editor { filter: brightness(.56); }

.vret-overlay { left: 13%; right: 9%; top: 9%; bottom: 8%; display: flex; flex-direction: column; border: 1px solid #e3ddd6; border-radius: 14px; background: #fff; box-shadow: 0 28px 65px -30px rgba(0, 0, 0, .7); overflow: hidden; }
.vret-panel__head { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 14px; border-bottom: 1px solid #ece8e3; }
.vret-panel__head > div { display: flex; flex-direction: column; gap: 3px; }
.vret-panel__head b { font-size: 12px; }
.vret-panel__head small { color: #7c756e; font-size: 8px; }
.vret-panel__head > span { padding: 7px 10px; border: 1px solid #e1dbd4; border-radius: 8px; color: #4e4842; font-size: 9px; }
.vret-chips { display: flex; gap: 5px; padding: 9px 14px; border-bottom: 1px solid #f0ece7; overflow: hidden; }
.vret-chips > * { padding: 5px 8px; border: 1px solid #e8e2dc; border-radius: 999px; color: #635d57; font-size: 8px; font-weight: 600; white-space: nowrap; }
.vret-chips b { background: #25211e; border-color: #25211e; color: #fff; }
.vret-assets { min-height: 0; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 11px 14px; }
.vret-assets i { position: relative; border: 1px solid #e6e1db; border-radius: 9px; background: linear-gradient(145deg, #eadfd5 0 55%, #ad866b 56% 64%, #f1e7de 65%); }
.vret-assets i:nth-child(2n) { background: linear-gradient(45deg, #76513a 0 22%, #ebd9c8 23% 63%, #b78e70 64%); }
.vret-assets i.is-picked { box-shadow: 0 0 0 3px #2f6fe4 inset; }
.vret-assets i.is-picked::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #2f6fe4; color: #fff; font-size: 10px; }
.vret-panel__foot { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 14px; border-top: 1px solid #ece8e3; }
.vret-panel__foot small { color: #817970; font-size: 8px; }
.vret-panel__foot b { padding: 7px 11px; border-radius: 8px; background: #201d1a; color: #fff; font-size: 8px; }

.vret-drawer { top: 4%; bottom: 4%; left: 3%; width: 31%; display: flex; flex-direction: column; gap: 9px; padding: 13px; border-right: 1px solid #e3ded7; border-radius: 13px; background: #fff; box-shadow: 14px 0 35px -24px rgba(0, 0, 0, .65); overflow: hidden; transform: translateX(-16px); }
.vret-stage[data-step="2"] .vret-scene-details,
.vret-stage[data-step="3"] .vret-point-details { transform: translateX(0); }
.vret-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 11px; }
.vret-drawer__head > div { display: flex; flex-direction: column; gap: 2px; }
.vret-drawer__head small { color: #8b837b; font-size: 7px; }
.vret-drawer__head > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #e5dfd8; border-radius: 7px; color: #716a63; }
.vret-segment { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 8px; background: #f2f0ed; color: #6f6861; font-size: 8px; text-align: center; }
.vret-segment > * { padding: 6px; border-radius: 6px; }
.vret-segment b { background: #fff; color: #211e1b; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.vret-detail-image { height: 83px; flex: none; border-radius: 8px; background: linear-gradient(145deg, #eaded3 0 45%, #9a6d4d 46% 55%, #e5c9b4 56%); }
.vret-drawer > small { color: #877f76; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.vret-variants { display: flex; gap: 5px; }
.vret-variants i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #dfd9d2; border-radius: 7px; background: linear-gradient(135deg, #d8c2af, #8b5c40); color: #7c746c; font-size: 9px; font-style: normal; }
.vret-variants i:last-child { background: #fff; }
.vret-field { min-height: 28px; display: flex; align-items: center; padding: 0 8px; border: 1px solid #e2ddd7; border-radius: 7px; background: #fff; color: #554f49; font-size: 8px; }
.vret-detail-row { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; border: 1px solid #e8e3dd; border-radius: 7px; color: #514c46; font-size: 8px; }
.vret-autosave { margin-top: auto; color: #71806c; font-size: 6.5px; line-height: 1.35; }
.vret-point-details section { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid #e7e2dc; border-radius: 9px; }
.vret-point-details section > b { font-size: 9px; }
.vret-destination { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 7px; padding: 6px; border: 1px solid #e3ddd7; border-radius: 8px; }
.vret-destination i { width: 30px; height: 24px; border-radius: 5px; background: linear-gradient(145deg, #dac6b4, #80573c); }
.vret-destination span { font-size: 8px; font-weight: 700; }
.vret-destination em { color: #2f6fe4; font-size: 6.5px; font-style: normal; }
.vret-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.vret-icons i { height: 29px; display: grid; place-items: center; border: 1px solid #e3ddd7; border-radius: 7px; color: #47423d; font-size: 11px; font-style: normal; }
.vret-icons i:nth-child(4) { background: #201d1a; color: #fff; }
.vret-slider { height: 5px; border-radius: 99px; background: #ddd7d0; }
.vret-slider span { display: block; width: 45%; height: 100%; border-radius: inherit; background: #2f6fe4; }
.vret-point-details section:last-of-type { display: grid; grid-template-columns: 1fr 58px; align-items: center; }
.vret-point-details section:last-of-type > b { grid-column: 1 / -1; }
.vret-point-details button { min-height: 32px; margin-top: auto; border: 0; border-radius: 8px; background: #201d1a; color: #fff; font-size: 8px; font-weight: 700; }

.vret-map { inset: 3.4%; z-index: 18; border: 1px solid #ded9d2; border-radius: 14px; background: #fff; box-shadow: 0 20px 44px -32px rgba(0, 0, 0, .55); overflow: hidden; }
.vret-map__head { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid #ece7e2; color: #69625b; font-size: 8px; }
.vret-map__head b { padding: 6px 9px; border-radius: 7px; background: #f6f4f1; color: #4d4843; }
.vret-map svg { width: 100%; height: calc(100% - 42px); }
.vret-map path { fill: none; stroke: #c7bfb7; stroke-width: 3; stroke-linecap: round; }
.vret-map circle { fill: #fff; stroke: #2f6fe4; stroke-width: 3; filter: drop-shadow(0 5px 8px rgba(40, 40, 40, .12)); }
.vret-map rect { fill: #faf8f5; stroke: #cfc7bf; stroke-width: 2; stroke-dasharray: 6 5; }
.vret-map text { fill: #504942; font: 700 12px 'Instrument Sans', sans-serif; }

.vret-transition { left: 15%; right: 11%; top: 8%; bottom: 7%; }
.vret-transition__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 9px; padding: 13px 14px; }
.vret-transition__route label { display: flex; flex-direction: column; gap: 6px; color: #7d756d; font-size: 7px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.vret-transition__route label b { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e1dbd4; border-radius: 8px; color: #35312d; font-size: 8px; letter-spacing: 0; text-transform: none; }
.vret-transition__route .vret-thumb { width: 36px; height: 27px; flex: none; }
.vret-transition__route > em { padding-bottom: 12px; color: #7c746c; font-style: normal; }
.vret-video-choice { margin: 0 14px 12px; min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px dashed #cfc7bf; border-radius: 9px; color: #68615a; font-size: 13px; }
.vret-video-choice > span { display: flex; flex-direction: column; gap: 3px; }
.vret-video-choice b { color: #3a3530; font-size: 9px; }
.vret-video-choice small { font-size: 7px; }
.vret-transition__list { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; margin: 0 14px 10px; border: 1px solid #e5dfd8; border-radius: 9px; overflow: hidden; }
.vret-transition__list > * { padding: 7px 9px; border-bottom: 1px solid #eee9e4; color: #625b54; font-size: 7px; }
.vret-transition__list small { background: #f8f6f3; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }

.vret-preview-card { inset: 9% 9% 8% 13%; z-index: 24; display: flex; flex-direction: column; border: 1px solid #d8d2cb; border-radius: 16px; background: #fff; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65); overflow: hidden; }
.vret-preview-card__bar { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f6f3ef; color: #847b72; font-size: 7px; }
.vret-preview-card__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d4cbc2; }
.vret-preview-card__bar span { margin-left: 6px; }
.vret-preview-card__room { position: relative; flex: 1; background: linear-gradient(180deg, #eee5dc 0 48%, #a97a59 49% 55%, #ead7c7 56%); overflow: hidden; }
.vret-preview-card__room::before { content: ''; position: absolute; left: 15%; right: 15%; bottom: 27%; height: 32%; border: 10px solid rgba(105, 68, 44, .31); border-bottom: 0; }
.vret-preview-card__room > b { position: absolute; left: 14px; top: 12px; padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .87); color: #4d4640; font-size: 8px; }
.vret-preview-card__note { padding: 10px 14px; color: #53704c; font-size: 8px; line-height: 1.35; }
.vret-publish-menu { z-index: 30; top: 13%; right: 4.2%; width: 235px; display: flex; flex-direction: column; padding: 7px; border: 1px solid #e1dcd6; border-radius: 13px; background: #fff; box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .55); }
.vret-publish-menu > div { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 8px; }
.vret-publish-menu b { color: #27231f; font-size: 9px; }
.vret-publish-menu small { color: #777068; font-size: 7px; line-height: 1.3; }
.vret-publish-menu .is-on { background: #eef4ff; }
.vret-publish-menu .is-on::before { content: '✓'; position: absolute; left: 12px; margin-top: 0; color: #2f6fe4; font-size: 8px; }
.vret-publish-menu .is-on > * { margin-left: 12px; }
.vret-publish-menu .is-danger b { color: #b13b31; }

.vret-cursor { position: absolute; z-index: 50; left: 20%; top: 50%; opacity: 0; color: #172033; font-size: 24px; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); transform: rotate(-18deg); transition: left .65s cubic-bezier(.22, .8, .24, 1), top .65s cubic-bezier(.22, .8, .24, 1), opacity .18s ease; }
.vret-stage[data-step="0"] .vret-cursor { left: 23%; top: 64%; opacity: 1; }
.vret-stage[data-step="1"] .vret-cursor { left: 21%; top: 17%; opacity: 1; }
.vret-stage[data-step="2"] .vret-cursor { left: 20%; top: 71%; opacity: 1; }
.vret-stage[data-step="3"] .vret-cursor { left: 86%; top: 22%; opacity: 1; }
.vret-stage[data-step="4"] .vret-cursor { left: 58%; top: 12%; opacity: 1; }
.vret-stage[data-step="5"] .vret-cursor { left: 86%; top: 32%; opacity: 1; }
.vret-stage[data-step="6"] .vret-cursor { left: 72%; top: 8%; opacity: 1; }
.vret-stage[data-step="7"] .vret-cursor { left: 91%; top: 8%; opacity: 1; }

/* Modal specificity guard: prevents the page behind the active tour from scrolling. */
body.vret-locked { overflow: hidden !important; }

@keyframes vretFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vretDialogIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vretCopyIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes vretPoint { 0%, 100% { box-shadow: 0 0 0 6px rgba(47, 111, 228, .16); } 50% { box-shadow: 0 0 0 13px rgba(47, 111, 228, .04); } }
@keyframes vretMiniStep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(18px); } }

@media (max-width: 900px) {
  .vret-feature { grid-template-columns: 1fr; }
  .vret-feature__art { width: min(620px, 100%); }
  .vret-dialog { max-height: calc(100dvh - 24px); }
  .vret-dialog__body { grid-template-columns: 1fr; overflow: auto; }
  .vret-stage { min-height: 390px; aspect-ratio: 16 / 9; flex: none; }
  .vret-copy { min-height: 310px; border-left: 0; border-top: 1px solid #e6ddd3; overflow: visible; }
  .vret-copy__count { margin-bottom: 18px; }
  .vret-step h3 { font-size: 30px; }
  .vret-dialog__footer { position: sticky; bottom: 0; z-index: 80; }
  .vret-cursor { display: none; }
}

@media (max-width: 640px) {
  .vret-feature { width: min(100% - 24px, 1120px); margin-bottom: 38px; padding: 22px; border-radius: 20px; }
  .vret-feature h2 { max-width: none; font-size: 34px; }
  .vret-feature__actions { align-items: flex-start; flex-direction: column; }
  .vret-feature .vret-primary { width: 100%; }
  .vret-mini { transform: none; }
  .vret-shell { padding: 0; place-items: stretch; }
  .vret-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .vret-dialog__header { min-height: 68px; padding: 10px 12px 9px 16px; }
  .vret-dialog__heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .vret-dialog__heading h2 { max-width: 48vw; font-size: 21px; }
  .vret-skip { max-width: 94px; padding-inline: 7px; font-size: 11px; }
  .vret-close { width: 40px; height: 40px; }
  .vret-stage { width: 100%; height: min(310px, 75vw); min-height: 0; aspect-ratio: auto; }
  .vret-editor { inset: 2.5%; }
  .vret-editor__top { height: 39px; grid-template-columns: 1fr 1.65fr; padding: 0 7px; }
  .vret-editor__tabs { display: none; }
  .vret-editor__status { gap: 3px; }
  .vret-editor__status > span { padding: 5px; font-size: 0; }
  .vret-review::after { content: '!'; font-size: 9px; }
  .vret-preview-trigger::after { content: '◉'; font-size: 9px; }
  .vret-publish-trigger::after { content: '●'; font-size: 9px; }
  .vret-editor__body { grid-template-columns: 33% 1fr; }
  .vret-editor__rail { padding: 7px; gap: 4px; }
  .vret-rail__head b { font-size: 8px; }
  .vret-add-trigger { padding: 5px; font-size: 7px; }
  .vret-search, .vret-filter { min-height: 20px; padding-inline: 5px; font-size: 6px; }
  .vret-card { height: 46px; padding: 3px; font-size: 6px; }
  .vret-card em { font-size: 5px; }
  .vret-editor__main { padding: 6px; }
  .vret-view-tabs { top: 10px; }
  .vret-room__tools { top: 9px; right: 8px; gap: 4px; }
  .vret-room__tools span { width: 22px; height: 22px; }
  .vret-hotspot { width: 25px; height: 25px; font-size: 10px; }
  .vret-overlay { left: 4%; right: 4%; top: 5%; bottom: 5%; }
  .vret-drawer { left: 2%; top: 2%; bottom: 2%; width: 48%; padding: 9px; gap: 6px; }
  .vret-detail-image { height: 58px; }
  .vret-drawer > small,
  .vret-autosave { display: none; }
  .vret-point-details section { padding: 6px; }
  .vret-icons i { height: 23px; }
  .vret-map { inset: 2.5%; }
  .vret-transition { left: 4%; right: 4%; top: 5%; bottom: 5%; }
  .vret-preview-card { inset: 5%; }
  .vret-publish-menu { top: 11%; right: 3%; width: 205px; }
  .vret-copy { min-height: 345px; padding: 22px 20px; }
  .vret-copy__meta { display: none; }
  .vret-step__number { width: 34px; height: 34px; margin-bottom: 13px; }
  .vret-step h3 { margin-bottom: 10px; font-size: 28px; }
  .vret-step > p { font-size: 13.5px; line-height: 1.63; }
  .vret-step aside { margin-top: 17px; }
  .vret-dialog__footer { min-height: 72px; grid-template-columns: auto 1fr auto; gap: 8px; padding: 10px 12px; }
  .vret-dialog__footer .vret-primary,
  .vret-secondary { min-width: 45px; padding-inline: 12px; font-size: 0; }
  .vret-secondary::before { content: '←'; font-size: 16px; }
  .vret-dialog__footer .vret-primary::after { content: '→'; font-size: 16px; }
  .vret-dialog__footer .vret-primary[data-is-finish="true"]::after { content: '✓'; }
  .vret-dots { gap: 4px; }
  .vret-dots button { width: 7px; height: 7px; }
  .vret-dots button[aria-current="step"] { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Accessibility override: user motion preferences outrank component transitions. */
  .vret-feature *,
  .vret-dialog *,
  .vret-backdrop {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ========================================================================== 
   Tutorial principal · 26 acciones visibles (31-ago-2026)

   Esta superficie sustituye la portada, el índice, las guías antiguas y el
   diálogo. La estética toma el azul de selección del editor como color de
   enseñanza; toda la animación representa acciones locales, no datos reales.
   ========================================================================== */
.vret-course-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 4%, rgba(47, 111, 228, .09), transparent 30rem),
    linear-gradient(180deg, #f8faff 0, #eef3fa 56%, #f8fafc 100%);
  color: #101828;
}
.vret-course-main {
  width: min(1480px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 58px) clamp(12px, 2.5vw, 34px) clamp(44px, 6vw, 84px);
}
.vret-course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  margin: 0 auto clamp(24px, 3vw, 38px);
}
.vret-course-hero > div:first-child { max-width: 790px; }
.vret-course-hero .vret-eyebrow,
.vret-course-player .vret-eyebrow { color: #2f6fe4; }
.vret-course-hero h1 {
  max-width: 16ch;
  margin: 10px 0 14px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.vret-course-hero > div:first-child > p:last-child {
  max-width: 68ch;
  margin: 0;
  color: #536176;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  text-wrap: pretty;
}
.vret-course-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 1px;
  border: 1px solid #dce4f0;
  border-radius: 15px;
  background: #dce4f0;
  overflow: hidden;
  box-shadow: 0 18px 48px -38px rgba(15, 23, 42, .5);
}
.vret-course-hero__meta span {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .92);
  color: #6c788b;
  font-size: 11px;
  line-height: 1.3;
}
.vret-course-hero__meta b { color: #172033; font-size: 19px; }
.vret-course-hero__meta i,
.vret-course-now i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28a56a;
  box-shadow: 0 0 0 5px rgba(40, 165, 106, .12);
}
.vret-course-player,
.vret-course-player * {
  scrollbar-color: #9aabc3 #e8eef6;
  scrollbar-width: thin;
}
.vret-course-player.vret-dialog {
  width: 100%;
  height: auto;
  max-height: none;
  border-color: #d9e2ef;
  border-radius: 22px;
  background: #f8fafc;
  box-shadow: 0 36px 90px -54px rgba(15, 23, 42, .65);
  animation: none;
}
.vret-course-player .vret-dialog__header {
  min-height: 78px;
  background: rgba(255, 255, 255, .96);
  border-color: #e2e8f0;
}
.vret-course-player .vret-dialog__heading h2 { color: #172033; }
.vret-course-controls { display: flex; align-items: center; gap: 10px; }
.vret-course-now {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #607089;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.vret-course-now.is-paused i { background: #98a2b3; box-shadow: 0 0 0 5px rgba(152, 162, 179, .13); }
.vret-course-pause {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid #cfd9e8;
  border-radius: 11px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}
.vret-course-pause:hover { border-color: #2f6fe4; color: #2059bd; background: #f5f8ff; }
.vret-course-pause:focus-visible { outline: 3px solid rgba(47, 111, 228, .33); outline-offset: 2px; }
.vret-course-player .vret-progress { height: 5px; background: #dce5f2; }
.vret-course-player .vret-progress span { width: 3.846%; background: linear-gradient(90deg, #2459bd, #4f8ef7); }
.vret-course-player .vret-dialog__body {
  grid-template-columns: minmax(0, 1.85fr) minmax(310px, .72fr);
  min-height: clamp(540px, 64vh, 690px);
}
.vret-course-player .vret-stage {
  min-height: 540px;
  background:
    linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)),
    repeating-linear-gradient(0deg, #dce5ef 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, #dce5ef 0 1px, transparent 1px 26px), #eaf0f7;
}
.vret-course-player .vret-copy { border-color: #e2e8f0; background: #fff; }
.vret-course-player .vret-copy__count { color: #667085; }
.vret-course-player .vret-copy__count b { color: #2f6fe4; }
.vret-course-player .vret-step__number { background: #eaf2ff; color: #2459bd; }
.vret-course-player .vret-step h3 { color: #172033; }
.vret-course-player .vret-step > p { color: #536176; }
.vret-course-player .vret-step aside { border-color: #cfe0fb; background: #f2f7ff; color: #31507d; }
.vret-course-player .vret-step aside > span { background: #2f6fe4; }
.vret-course-player .vret-dialog__footer { border-color: #e2e8f0; background: #fff; }
.vret-course-player .vret-primary { background: #2f6fe4; box-shadow: 0 10px 25px -16px rgba(47, 111, 228, .85); }
.vret-course-player .vret-primary:hover { background: #2459bd; }
.vret-course-player .vret-secondary:hover:not(:disabled) { border-color: #2f6fe4; color: #2459bd; }
.vret-course-player .vret-dots button { flex: 0 0 auto; background: #cbd6e5; }
.vret-course-player .vret-dots button[aria-current='step'] { background: #2f6fe4; }
.vret-course-timeline {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  padding: 10px 5px 9px;
  overflow-x: auto;
  scrollbar-gutter: stable;
}
.vret-course-footnote { margin: 16px auto 0; color: #6c788b; font-size: 12px; line-height: 1.55; text-align: center; }

/* Los paneles aparecen únicamente en el momento que los necesita el curso. */
.vret-course-player .vret-floorplan {
  position: absolute;
  inset: 3.4%;
  z-index: 25;
  display: flex;
  flex-direction: column;
  border: 1px solid #d8e0ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 54px -34px rgba(15, 23, 42, .65);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.98);
  transition: opacity .3s ease, transform .36s cubic-bezier(.22, .8, .24, 1);
  overflow: hidden;
}
.vret-stage[data-course-step='2'] .vret-library,
.vret-stage[data-course-step='5'] .vret-library,
.vret-stage[data-course-step='6'] .vret-library,
.vret-stage[data-course-step='7'] .vret-library,
.vret-stage[data-course-step='3'] .vret-upload-panel,
.vret-stage[data-course-step='4'] .vret-upload-panel,
.vret-stage[data-course-step='10'] .vret-scene-details,
.vret-stage[data-course-step='11'] .vret-scene-details,
.vret-stage[data-course-step='12'] .vret-scene-details,
.vret-stage[data-course-step='15'] .vret-point-details,
.vret-stage[data-course-step='16'] .vret-point-details,
.vret-stage[data-course-step='17'] .vret-point-details,
.vret-stage[data-course-step='18'] .vret-map,
.vret-stage[data-course-step='19'] .vret-map,
.vret-stage[data-course-step='20'] .vret-transition,
.vret-stage[data-course-step='21'] .vret-transition,
.vret-stage[data-course-step='22'] .vret-preview-card,
.vret-stage[data-course-step='23'] .vret-floorplan,
.vret-stage[data-course-step='24'] .vret-floorplan,
.vret-stage[data-course-step='25'] .vret-publish-menu {
  opacity: 1;
  transform: translate(0) scale(1);
}
.vret-stage[data-course-step='2'] .vret-editor,
.vret-stage[data-course-step='3'] .vret-editor,
.vret-stage[data-course-step='4'] .vret-editor,
.vret-stage[data-course-step='5'] .vret-editor,
.vret-stage[data-course-step='6'] .vret-editor,
.vret-stage[data-course-step='7'] .vret-editor,
.vret-stage[data-course-step='20'] .vret-editor,
.vret-stage[data-course-step='21'] .vret-editor { filter: brightness(.56); }
.vret-stage[data-course-step='10'] .vret-scene-details,
.vret-stage[data-course-step='11'] .vret-scene-details,
.vret-stage[data-course-step='12'] .vret-scene-details,
.vret-stage[data-course-step='15'] .vret-point-details,
.vret-stage[data-course-step='16'] .vret-point-details,
.vret-stage[data-course-step='17'] .vret-point-details { transform: translateX(0); }

/* Zonas de carga. */
.vret-upload-panel { left: 16%; right: 12%; top: 9%; bottom: 8%; }
.vret-upload-drop {
  min-height: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 12px 14px 8px;
  border: 2px dashed #b7c7dd;
  border-radius: 11px;
  background: #f6f9fd;
  color: #52647c;
}
.vret-upload-drop b { color: #2f6fe4; font-size: 24px; }
.vret-upload-drop span { font-size: 10px; font-weight: 750; }
.vret-upload-drop small { font-size: 7px; }
.vret-upload-list { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 3px 14px 8px; }
.vret-upload-list > div { min-height: 48px; display: grid; grid-template-columns: 44px 1fr 36px; align-items: center; gap: 9px; padding: 6px; border: 1px solid #e3e9f1; border-radius: 9px; }
.vret-upload-list i { width: 44px; height: 34px; }
.vret-upload-list span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vret-upload-list b { overflow: hidden; color: #344054; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.vret-upload-list small { color: #8490a3; font-size: 6px; }
.vret-upload-list em { height: 4px; border-radius: 99px; background: #dfe7f1; overflow: hidden; }
.vret-upload-list u { display: block; width: 0; height: 100%; border-radius: inherit; background: #2f6fe4; text-decoration: none; }
.vret-upload-list > div:first-child u { width: 100%; }
.vret-upload-list strong { color: #56657a; font-size: 7px; text-align: right; }
.vret-stage[data-course-step='4'] .vret-upload-list > div:nth-child(2) u { animation: vretUploadTwo 1.8s ease both; }
.vret-stage[data-course-step='4'] .vret-upload-list > div:nth-child(3) u { animation: vretUploadThree 1.8s ease both; }

/* Detalles de puntos y mapa. */
.vret-return { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid #dfe6ef; border-radius: 8px; color: #56657a; font-size: 7px; }
.vret-return span { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; background: #2f6fe4; color: #fff; }
.vret-map-loose rect { transition: fill .25s ease, stroke .25s ease, stroke-width .25s ease; }
.vret-stage[data-course-step='19'] .vret-map-loose rect { fill: #edf4ff; stroke: #2f6fe4; stroke-width: 4; }

/* Plano de planta. */
.vret-floorplan__head { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e5ebf2; }
.vret-floorplan__head > div { display: flex; flex-direction: column; gap: 3px; }
.vret-floorplan__head b { color: #27364b; font-size: 12px; }
.vret-floorplan__head small { color: #7a8799; font-size: 8px; }
.vret-floorplan__head > span { padding: 7px 10px; border-radius: 8px; background: #2f6fe4; color: #fff; font-size: 8px; font-weight: 700; }
.vret-floorplan__body { min-height: 0; flex: 1; display: grid; grid-template-columns: 120px 1fr; }
.vret-floorplan__body > aside { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-right: 1px solid #e5ebf2; background: #f8fafc; }
.vret-floorplan__body > aside b { margin-bottom: 4px; color: #78869a; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.vret-floorplan__body > aside span { padding: 8px; border-radius: 7px; color: #617087; font-size: 8px; }
.vret-floorplan__body > aside .is-on { background: #eaf2ff; color: #2459bd; font-weight: 750; }
.vret-floorplan__canvas { position: relative; min-width: 0; margin: 12px; border: 1px solid #dfe7f1; border-radius: 10px; background: #f9fbfd; overflow: hidden; }
.vret-floorplan__canvas svg { width: 100%; height: 100%; }
.vret-floorplan__canvas svg path,
.vret-floorplan__canvas svg rect { fill: none; stroke: #8fa1b7; stroke-width: 3; }
.vret-floorplan__canvas button { position: absolute; left: var(--px); top: var(--py); min-width: 48px; min-height: 28px; padding: 5px 7px; border: 2px solid #fff; border-radius: 999px; background: #2f6fe4; color: #fff; font-size: 7px; font-weight: 750; box-shadow: 0 5px 12px rgba(47, 111, 228, .25); transform: translate(-50%, -50%); }
.vret-floorplan__upload { position: absolute; inset: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 2px dashed #aebfd5; border-radius: 11px; background: rgba(248, 251, 255, .96); color: #53657c; }
.vret-floorplan__upload b { color: #2f6fe4; font-size: 24px; }
.vret-floorplan__upload span { font-size: 10px; font-weight: 750; }
.vret-floorplan__upload small { font-size: 7px; }
.vret-stage[data-course-step='24'] .vret-floorplan__upload { display: none; }
.vret-stage[data-course-step='23'] .vret-floorplan__canvas button { opacity: .15; }

/* Foco azul y cursor: una sola acción protagonista por fotograma. */
.vret-course-player .vret-hot { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.vret-stage[data-course-step='0'] .vret-editor__rail,
.vret-stage[data-course-step='0'] .vret-room,
.vret-stage[data-course-step='1'] .vret-add-trigger,
.vret-stage[data-course-step='2'] .vret-upload-trigger,
.vret-stage[data-course-step='3'] .vret-upload-drop,
.vret-stage[data-course-step='4'] .vret-upload-list,
.vret-stage[data-course-step='5'] .vret-chip-360,
.vret-stage[data-course-step='6'] .vret-assets .is-picked,
.vret-stage[data-course-step='7'] .vret-create-trigger,
.vret-stage[data-course-step='8'] .vret-card.is-active,
.vret-stage[data-course-step='9'] .vret-card--moving,
.vret-stage[data-course-step='10'] .vret-card.is-active em,
.vret-stage[data-course-step='11'] .vret-segment,
.vret-stage[data-course-step='12'] .vret-variant-add,
.vret-stage[data-course-step='13'] .vret-point-trigger,
.vret-stage[data-course-step='14'] .vret-hotspot,
.vret-stage[data-course-step='15'] .vret-point-destination,
.vret-stage[data-course-step='16'] .vret-point-style,
.vret-stage[data-course-step='16'] .vret-point-size,
.vret-stage[data-course-step='17'] .vret-return,
.vret-stage[data-course-step='18'] .vret-map-trigger,
.vret-stage[data-course-step='20'] .vret-transition-trigger,
.vret-stage[data-course-step='21'] .vret-video-choice,
.vret-stage[data-course-step='21'] .vret-transition-save,
.vret-stage[data-course-step='22'] .vret-preview-trigger,
.vret-stage[data-course-step='22'] .vret-review,
.vret-stage[data-course-step='23'] .vret-floor-upload-trigger,
.vret-stage[data-course-step='24'] .vret-floorplan__canvas,
.vret-stage[data-course-step='25'] .vret-publish-trigger {
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(47, 111, 228, .9), 0 9px 24px rgba(47, 111, 228, .3);
  border-color: #2f6fe4;
  z-index: 40;
}
.vret-stage[data-course-step='10'] .vret-card.is-active em { position: relative; padding: 3px; border-radius: 4px; }

.vret-course-player .vret-cursor {
  display: block;
  width: 18px;
  height: 24px;
  left: var(--mouse-x, 52%);
  top: var(--mouse-y, 52%);
  color: transparent;
  opacity: 1;
  fill: #101828;
  stroke: #fff;
  stroke-width: 1.3;
  filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .38));
  transform: rotate(-10deg);
  transition: left .72s cubic-bezier(.22, .8, .24, 1), top .72s cubic-bezier(.22, .8, .24, 1);
}
.vret-click {
  position: absolute;
  z-index: 49;
  left: calc(var(--mouse-x, 52%) + 7px);
  top: calc(var(--mouse-y, 52%) + 9px);
  width: 12px;
  height: 12px;
  border: 2px solid #2f6fe4;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  pointer-events: none;
}
.vret-stage.is-clicking .vret-click { animation: vretClick .5s ease-out both; }
.vret-stage[data-course-step='0'] { --mouse-x: 56%; --mouse-y: 61%; }
.vret-stage[data-course-step='1'] { --mouse-x: 22%; --mouse-y: 13%; }
.vret-stage[data-course-step='2'] { --mouse-x: 82%; --mouse-y: 14%; }
.vret-stage[data-course-step='3'] { --mouse-x: 54%; --mouse-y: 39%; }
.vret-stage[data-course-step='4'] { --mouse-x: 73%; --mouse-y: 67%; }
.vret-stage[data-course-step='5'] { --mouse-x: 66%; --mouse-y: 27%; }
.vret-stage[data-course-step='6'] { --mouse-x: 50%; --mouse-y: 53%; }
.vret-stage[data-course-step='7'] { --mouse-x: 82%; --mouse-y: 83%; }
.vret-stage[data-course-step='8'] { --mouse-x: 17%; --mouse-y: 62%; }
.vret-stage[data-course-step='9'] { --mouse-x: 18%; --mouse-y: 48%; }
.vret-stage[data-course-step='10'] { --mouse-x: 20%; --mouse-y: 67%; }
.vret-stage[data-course-step='11'] { --mouse-x: 18%; --mouse-y: 22%; }
.vret-stage[data-course-step='12'] { --mouse-x: 21%; --mouse-y: 56%; }
.vret-stage[data-course-step='13'] { --mouse-x: 89%; --mouse-y: 27%; }
.vret-stage[data-course-step='14'] { --mouse-x: 62%; --mouse-y: 65%; }
.vret-stage[data-course-step='15'] { --mouse-x: 20%; --mouse-y: 33%; }
.vret-stage[data-course-step='16'] { --mouse-x: 17%; --mouse-y: 62%; }
.vret-stage[data-course-step='17'] { --mouse-x: 17%; --mouse-y: 83%; }
.vret-stage[data-course-step='18'] { --mouse-x: 58%; --mouse-y: 12%; }
.vret-stage[data-course-step='19'] { --mouse-x: 82%; --mouse-y: 51%; }
.vret-stage[data-course-step='20'] { --mouse-x: 89%; --mouse-y: 44%; }
.vret-stage[data-course-step='21'] { --mouse-x: 62%; --mouse-y: 58%; }
.vret-stage[data-course-step='22'] { --mouse-x: 75%; --mouse-y: 8%; }
.vret-stage[data-course-step='23'] { --mouse-x: 79%; --mouse-y: 13%; }
.vret-stage[data-course-step='24'] { --mouse-x: 51%; --mouse-y: 55%; }
.vret-stage[data-course-step='25'] { --mouse-x: 91%; --mouse-y: 8%; }
.vret-stage[data-course-step='9'] .vret-cursor { animation: vretDragCursor 1.75s cubic-bezier(.22, .8, .24, 1) both; }
.vret-stage[data-course-step='9'] .vret-card--moving { animation: vretDragCard 1.75s cubic-bezier(.22, .8, .24, 1) both; }

@keyframes vretClick { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.45); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); } }
@keyframes vretDragCursor { 0% { left: 18%; top: 74%; } 35% { left: 18%; top: 68%; } 100% { left: 18%; top: 48%; } }
@keyframes vretDragCard { 0% { transform: translateY(0); } 35% { transform: translateY(-8px) scale(1.025); box-shadow: 0 12px 22px rgba(47, 111, 228, .25); } 100% { transform: translateY(-56px); } }
@keyframes vretUploadTwo { from { width: 24%; } to { width: 100%; } }
@keyframes vretUploadThree { from { width: 8%; } to { width: 76%; } }

@media (max-width: 1080px) {
  .vret-course-hero { grid-template-columns: 1fr; align-items: start; }
  .vret-course-hero__meta { width: min(100%, 580px); }
  .vret-course-player .vret-dialog__body { grid-template-columns: 1fr; overflow: visible; }
  .vret-course-player .vret-stage { min-height: 470px; aspect-ratio: 16 / 10; }
  .vret-course-player .vret-copy { min-height: 300px; border-left: 0; border-top: 1px solid #e2e8f0; overflow: visible; }
  .vret-course-player .vret-dialog__footer { position: static; }
}

@media (max-width: 640px) {
  .vret-course-main { padding-inline: 10px; padding-top: 26px; }
  .vret-course-hero { gap: 20px; }
  .vret-course-hero h1 { max-width: 11ch; font-size: clamp(41px, 13vw, 58px); }
  .vret-course-hero__meta { grid-template-columns: 1fr 1fr; }
  .vret-course-hero__meta span:last-child { grid-column: 1 / -1; min-height: 58px; }
  .vret-course-player.vret-dialog { width: 100%; height: auto; max-height: none; border: 1px solid #d9e2ef; border-radius: 17px; }
  .vret-course-player .vret-dialog__header { min-height: 0; align-items: flex-start; flex-direction: column; padding: 14px; }
  .vret-course-player .vret-dialog__heading h2 { max-width: none; font-size: 23px; }
  .vret-course-controls { width: 100%; justify-content: space-between; }
  .vret-course-now { font-size: 10px; }
  .vret-course-pause { min-height: 40px; }
  .vret-course-player .vret-stage { width: 100%; height: 330px; min-height: 330px; aspect-ratio: auto; }
  .vret-course-player .vret-cursor { display: block; width: 14px; height: 19px; }
  .vret-course-player .vret-copy { min-height: 330px; padding: 22px 19px; }
  .vret-course-player .vret-step h3 { font-size: 29px; }
  .vret-course-player .vret-dialog__footer { grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px; }
  .vret-course-timeline { padding-inline: 3px; }
  .vret-upload-panel { left: 4%; right: 4%; top: 5%; bottom: 5%; }
  .vret-upload-drop { min-height: 78px; margin-top: 8px; }
  .vret-upload-list > div { min-height: 40px; grid-template-columns: 34px 1fr 28px; gap: 6px; }
  .vret-upload-list i { width: 34px; height: 28px; }
  .vret-floorplan { inset: 2.5%; }
  .vret-floorplan__body { grid-template-columns: 78px 1fr; }
  .vret-floorplan__body > aside { padding: 7px; }
  .vret-floorplan__head { min-height: 44px; padding: 7px 9px; }
  .vret-floorplan__canvas { margin: 7px; }
  .vret-floorplan__canvas button { min-width: 38px; min-height: 24px; font-size: 6px; }
  .vret-floorplan__upload { inset: 12%; }
}

@media (forced-colors: active) {
  .vret-course-player .vret-hot,
  .vret-course-player button:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .vret-click { border-color: Highlight; }
}

/* ==========================================================================
   Centro de recorridos + curso de Plantillas · 30 acciones (31-ago-2026)

   La página mantiene el azul técnico del recorrido de Escenas. Plantillas usa
   un acento cobre sobre la cuadrícula del lienzo real para distinguir el curso
   sin convertirlo en otra marca. El riel, el lienzo y el inspector son la
   firma visual de esta segunda demostración.
   ========================================================================== */
.vret-course-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto clamp(26px, 3.5vw, 48px);
}
.vret-course-picker a {
  min-width: 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 19px;
  border: 1px solid #d8e2ef;
  border-radius: 17px;
  background: rgba(255, 255, 255, .88);
  color: #172033;
  text-decoration: none;
  box-shadow: 0 20px 48px -42px rgba(15, 23, 42, .72);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vret-course-picker a:hover {
  border-color: #97b4e8;
  box-shadow: 0 24px 54px -39px rgba(28, 61, 112, .52);
  transform: translateY(-2px);
}
.vret-course-picker a:focus-visible { outline: 3px solid rgba(47, 111, 228, .34); outline-offset: 3px; }
.vret-course-picker a > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf2ff;
  color: #2459bd;
  font-size: 11px;
  font-weight: 800;
}
.vret-course-picker a:nth-child(2) > span { background: #fff0e6; color: #a64f1d; }
.vret-course-picker a > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vret-course-picker b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.vret-course-picker small { color: #66758a; font-size: 11px; line-height: 1.4; }
.vret-course-picker em { color: #6e7f96; font-size: 12px; font-style: normal; font-weight: 800; }
.vret-course-divider {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin: clamp(52px, 8vw, 108px) 0 18px;
}
.vret-course-divider span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0e6;
  color: #a64f1d;
  font-size: 10px;
  font-weight: 800;
}
.vret-course-divider i { height: 1px; background: linear-gradient(90deg, #d8e2ef, transparent); }

.vret-course-player--templates .vret-eyebrow { color: #b55b27; }
.vret-course-player--templates .vret-progress span { background: linear-gradient(90deg, #9a4319, #da8148); }
.vret-course-player--templates .vret-copy__count b { color: #b55b27; }
.vret-course-player--templates .vret-step__number { background: #fff0e6; color: #a64f1d; }
.vret-course-player--templates .vret-step aside { border-color: #f0d2bd; background: #fff8f3; color: #754124; }
.vret-course-player--templates .vret-step aside > span,
.vret-course-player--templates .vret-primary { background: #b85f2b; }
.vret-course-player--templates .vret-primary:hover { background: #98491f; }
.vret-course-player--templates .vret-secondary:hover:not(:disabled) { border-color: #b85f2b; color: #98491f; }
.vret-course-player--templates .vret-dots button[aria-current='step'] { background: #b85f2b; }
.vret-course-player--templates .vret-course-pause:hover { border-color: #b85f2b; color: #98491f; background: #fff8f3; }
.vret-course-player--templates .vret-course-pause:focus-visible { outline-color: rgba(184, 95, 43, .32); }
.vret-course-player--templates .vret-click { border-color: #b85f2b; }

.vret-template-stage { overflow: hidden; }
.vrtpl-editor {
  position: absolute;
  inset: 3%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #d8dde5;
  border-radius: 13px;
  background: #fff;
  color: #374151;
  box-shadow: 0 18px 42px -33px rgba(15, 23, 42, .72);
  overflow: hidden;
  transition: filter .25s ease, transform .3s ease;
}
.vrtpl-top {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-bottom: 1px solid #e5e8ed;
  background: #fff;
}
.vrtpl-title { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; align-items: center; }
.vrtpl-title > span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #e1e5eb; border-radius: 8px; color: #6b7280; }
.vrtpl-title b,
.vrtpl-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrtpl-title b { color: #1f2937; font-size: 8px; }
.vrtpl-title small { color: #8b95a5; font-size: 6px; }
.vrtpl-devices { display: flex; gap: 3px; padding: 3px; border: 1px solid #e5e9f0; border-radius: 9px; background: #f7f9fc; }
.vrtpl-devices span { width: 26px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: #8793a5; font-size: 10px; }
.vrtpl-devices .is-on { background: #fff; color: #2f6fe4; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.vrtpl-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.vrtpl-actions > * { flex: none; padding: 6px 7px; border: 1px solid #e1e6ee; border-radius: 7px; color: #657287; font-size: 6px; font-style: normal; }
.vrtpl-actions .vrtpl-saved { border-color: transparent; background: #edfbf4; color: #218558; }
.vrtpl-actions .vrtpl-ai-trigger { color: #2f63b9; }
.vrtpl-actions .vrtpl-publish-trigger { border-color: #2f6fe4; background: #2f6fe4; color: #fff; }
.vrtpl-body { min-height: 0; flex: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; }
.vrtpl-pages {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-right: 1px solid #e3e7ee;
  background: #fbfcfe;
}
.vrtpl-pages__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.vrtpl-pages__head b { color: #5e6877; font-size: 7px; }
.vrtpl-pages__head span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #dde3ec; border-radius: 6px; background: #fff; font-size: 11px; }
.vrtpl-page {
  min-height: 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #657186;
  font-size: 7px;
}
.vrtpl-page b { font-size: 7px; }
.vrtpl-page em { padding: 3px 5px; border-radius: 5px; background: #f0f2f6; color: #8993a3; font-size: 5px; font-style: normal; }
.vrtpl-page i { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #22a56c; color: #fff; font-size: 5px; font-style: normal; }
.vrtpl-page.is-on { border-color: #d6e3fb; background: #ebf3ff; color: #2d61b8; }
.vrtpl-pages__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.vrtpl-pages__bottom > * { min-height: 29px; display: flex; align-items: center; padding: 7px; border: 1px solid #dfe5ed; border-radius: 7px; background: #fff; color: #5f6d81; font-size: 6px; }
.vrtpl-pages__bottom b { justify-content: center; border-color: #c9dafa; background: #edf4ff; color: #2d61b8; }
.vrtpl-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 9px 13px 13px;
  background:
    radial-gradient(circle, #d9dee7 1px, transparent 1px) 0 0 / 15px 15px,
    #f8fafc;
}
.vrtpl-workspace__label { display: flex; gap: 4px; padding: 0 0 7px; color: #8791a1; font-size: 6px; }
.vrtpl-workspace__label b { color: #5c6675; }
.vrtpl-canvas {
  position: relative;
  min-height: 0;
  flex: 1;
  border-radius: 9px;
  background: #171a20;
  box-shadow: 0 11px 24px -18px rgba(15, 23, 42, .78);
  overflow: hidden;
}
.vrtpl-room {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(47, 31, 25, .1) 0 37%, rgba(203, 181, 157, .16) 37% 64%, rgba(32, 27, 26, .12) 64%),
    linear-gradient(180deg, rgba(18, 20, 25, .12), rgba(18, 20, 25, .56)),
    linear-gradient(135deg, #8f7b68, #d0bd9f 46%, #79695b 47%, #a99479);
}
.vrtpl-room::before,
.vrtpl-room::after { content: ''; position: absolute; border: 4px solid rgba(255, 255, 255, .11); }
.vrtpl-room::before { left: 9%; top: 10%; width: 27%; height: 75%; }
.vrtpl-room::after { right: 10%; top: 13%; width: 31%; height: 68%; }
.vrtpl-menu,
.vrtpl-tools { position: absolute; z-index: 2; top: 8%; padding: 7px; border-radius: 99px; background: rgba(18, 20, 25, .78); color: #fff; font-size: 7px; }
.vrtpl-menu { left: 5%; }
.vrtpl-tools { right: 5%; }
.vrtpl-logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 32%;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  transform: translateX(-50%);
}
.vrtpl-heading {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  color: #fff;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.vrtpl-enter {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 61%;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .78);
  color: #fff;
  font-size: 7px;
  font-weight: 760;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.vrtpl-scene-strip,
.vrtpl-floor-mini,
.vrtpl-contact-strip { display: none; }
.vrtpl-selection {
  position: absolute;
  z-index: 8;
  left: 39%;
  top: 42%;
  width: 34%;
  height: 20%;
  display: none;
  border: 2px solid #f18b4b;
  border-radius: 5px;
  color: transparent;
}
.vrtpl-selection > i { position: absolute; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #f18b4b; }
.vrtpl-selection > i:nth-child(1) { left: -5px; top: -5px; }
.vrtpl-selection > i:nth-child(2) { right: -5px; top: -5px; }
.vrtpl-selection > i:nth-child(3) { right: -5px; bottom: -5px; }
.vrtpl-selection > i:nth-child(4) { left: -5px; bottom: -5px; }
.vrtpl-selection > span { position: absolute; left: 0; bottom: calc(100% + 4px); padding: 3px 5px; border-radius: 4px; background: #f18b4b; color: #fff; font-size: 5px; }
.vrtpl-alt-note {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 75%;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(19, 25, 34, .9);
  color: #fff;
  font-size: 6px;
  transform: translateX(-50%);
}
.vrtpl-alt-note kbd { padding: 3px 5px; border: 1px solid #76849a; border-radius: 4px; background: #2e3745; font: inherit; }
.vrtpl-inspector { min-width: 0; padding: 12px; border-left: 1px solid #e3e7ee; background: #fff; }
.vrtpl-inspector-empty { max-width: 145px; color: #8791a0; font-size: 7px; line-height: 1.5; }
.vrtpl-inspector-edit { display: none; flex-direction: column; gap: 8px; }
.vrtpl-inspector__head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #e4e8ee; }
.vrtpl-inspector__head b { color: #2e3745; font-size: 8px; }
.vrtpl-inspector-edit label,
.vrtpl-inspector-edit > div:not(.vrtpl-inspector__head) { display: flex; flex-direction: column; gap: 4px; color: #7c8797; font-size: 6px; }
.vrtpl-inspector-edit label span,
.vrtpl-style-field span { min-height: 27px; display: flex; align-items: center; padding: 6px; border: 1px solid #dfe5ed; border-radius: 6px; background: #fff; color: #445064; font-size: 6px; }
.vrtpl-align-field span { min-height: 27px; display: flex; align-items: center; justify-content: space-around; border: 1px solid #dfe5ed; border-radius: 6px; color: #536176; }
.vrtpl-visible-field span { min-height: 21px; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border-radius: 5px; background: #f5f7fa; color: #5e6a7d; }
.vrtpl-inspector__foot { margin-top: 4px; padding: 7px; border-radius: 6px; background: #effaf5; color: #22855a; }

.vrtpl-entry,
.vrtpl-library,
.vrtpl-new-page-dialog,
.vrtpl-settings,
.vrtpl-modals,
.vrtpl-ai,
.vrtpl-publish {
  position: absolute;
  z-index: 20;
  border: 1px solid #dce2ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 24px 58px -28px rgba(15, 23, 42, .68);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.98);
  transition: opacity .28s ease, transform .34s cubic-bezier(.22, .8, .24, 1);
  overflow: hidden;
}
.vrtpl-entry { inset: 8%; padding: 15px; background: #f8fafc; }
.vrtpl-entry__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; color: #677488; font-size: 7px; }
.vrtpl-entry__head b { color: #263246; font-size: 11px; }
.vrtpl-entry__head strong { padding-bottom: 4px; border-bottom: 2px solid #2f6fe4; color: #2f5fae; }
.vrtpl-entry__cards { height: calc(100% - 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vrtpl-entry__cards > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #dfe5ed; border-radius: 10px; background: #fff; }
.vrtpl-entry__cards i { min-height: 90px; border-radius: 7px; background: linear-gradient(145deg, #1d232d 0 46%, #c6a987 47% 100%); }
.vrtpl-entry__cards > div:nth-child(2) i { background: linear-gradient(145deg, #b17754, #efe2d3 50%, #31506a); }
.vrtpl-entry__cards b { color: #303b4d; font-size: 8px; }
.vrtpl-entry__cards small { color: #8b95a4; font-size: 6px; }
.vrtpl-entry__cards .vrtpl-create-template { align-items: center; justify-content: center; border-style: dashed; background: #fdfbf9; text-align: center; }
.vrtpl-create-template em { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff0e6; color: #ad5727; font-size: 20px; font-style: normal; }
.vrtpl-library { left: 13%; right: 9%; top: 7%; bottom: 7%; display: flex; flex-direction: column; padding-bottom: 10px; }
.vrtpl-library__head,
.vrtpl-panel-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #e3e7ed; }
.vrtpl-library__head b,
.vrtpl-panel-head b { color: #2d3747; font-size: 10px; }
.vrtpl-library__search { margin: 9px 12px 6px; padding: 8px; border: 1px solid #dfe5ed; border-radius: 7px; color: #8a95a6; font-size: 7px; }
.vrtpl-library__tabs { display: flex; gap: 5px; padding: 0 12px 6px; }
.vrtpl-library__tabs span { padding: 6px 9px; border-radius: 7px; background: #f1f4f8; color: #657286; font-size: 7px; }
.vrtpl-library__hint { padding: 0 12px 7px; color: #8c97a7; font-size: 6px; }
.vrtpl-lib-grid { min-height: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 12px; }
.vrtpl-lib-grid > div { min-width: 0; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 2px 8px; padding: 7px; border: 1px solid #e1e6ed; border-radius: 8px; }
.vrtpl-lib-grid i { grid-row: 1 / 3; width: 48px; height: 42px; display: grid; place-items: center; border-radius: 6px; background: #232a35; color: #fff; font-size: 9px; font-style: normal; }
.vrtpl-lib-grid b { overflow: hidden; color: #3c4758; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.vrtpl-lib-grid small { color: #8b95a4; font-size: 5px; }
.vrtpl-lib-cover { display: grid; }
.vrtpl-lib-tour { display: none; }
.vrtpl-new-page-dialog { left: 27%; right: 22%; top: 24%; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.vrtpl-new-page-dialog small { color: #9b542c; font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vrtpl-new-page-dialog b { color: #303a49; font-size: 10px; }
.vrtpl-new-page-dialog > span { min-height: 34px; display: flex; align-items: center; padding: 8px; border: 1px solid #dce2ea; border-radius: 7px; color: #566276; font-size: 7px; }
.vrtpl-new-page-dialog > div { display: flex; justify-content: flex-end; gap: 6px; }
.vrtpl-new-page-dialog em,
.vrtpl-new-page-dialog strong { padding: 7px 10px; border-radius: 7px; font-size: 7px; font-style: normal; }
.vrtpl-new-page-dialog em { border: 1px solid #dce2ea; color: #687589; }
.vrtpl-new-page-dialog strong { background: #b85f2b; color: #fff; }
.vrtpl-settings { left: 22%; right: 18%; top: 7%; bottom: 7%; display: flex; flex-direction: column; gap: 9px; padding-bottom: 11px; }
.vrtpl-settings > label { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; color: #7b8797; font-size: 6px; }
.vrtpl-settings > label span { padding: 7px; border: 1px solid #dde3eb; border-radius: 6px; color: #4e5b6e; }
.vrtpl-settings section { display: flex; flex-direction: column; gap: 6px; margin: 0 12px; padding: 9px; border: 1px solid #e0e5ec; border-radius: 8px; }
.vrtpl-settings section > b { color: #4b5769; font-size: 7px; }
.vrtpl-palettes div { display: flex; gap: 6px; }
.vrtpl-palettes i { width: 25px; height: 25px; border: 3px solid #fff; border-radius: 7px; background: #1f242b; box-shadow: 0 0 0 1px #d8dee7; }
.vrtpl-palettes i:nth-child(2) { background: #a85f35; }
.vrtpl-palettes i:nth-child(3) { background: #315e48; }
.vrtpl-palettes i:nth-child(4) { background: #284c6a; }
.vrtpl-palettes i:nth-child(5) { background: #702f3d; }
.vrtpl-palettes i:nth-child(6) { background: #a5863e; }
.vrtpl-palettes small { color: #8c96a5; font-size: 5px; }
.vrtpl-fonts div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.vrtpl-fonts span { display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid #e0e5ec; border-radius: 6px; color: #687487; font-size: 5px; }
.vrtpl-fonts em { color: #273244; font-family: 'Instrument Serif', Georgia, serif; font-size: 13px; font-style: normal; }
.vrtpl-settings > strong { align-self: flex-end; margin: auto 12px 0; padding: 7px 12px; border-radius: 7px; background: #263243; color: #fff; font-size: 7px; }
.vrtpl-modals { left: 18%; right: 13%; top: 6%; bottom: 6%; display: flex; flex-direction: column; padding-bottom: 9px; }
.vrtpl-modals > small { padding: 8px 12px 5px; color: #8b95a4; font-size: 6px; }
.vrtpl-modals > div:not(.vrtpl-panel-head) { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 8px; margin: 3px 12px; padding: 8px; border: 1px solid #e2e7ed; border-radius: 7px; }
.vrtpl-modals > div b { color: #465266; font-size: 7px; }
.vrtpl-modals > div span { padding: 5px; border-radius: 5px; background: #f4f6f9; color: #687588; font-size: 6px; }
.vrtpl-modals > div em { color: #7c8797; font-size: 7px; font-style: normal; }
.vrtpl-ai { top: 7%; right: 4%; bottom: 7%; width: 245px; display: flex; flex-direction: column; padding-bottom: 11px; }
.vrtpl-ai > small { align-self: flex-start; margin: 9px 12px 0; padding: 4px 6px; border-radius: 5px; background: #eef2f8; color: #657286; font-size: 5px; }
.vrtpl-ai p { margin: 10px 12px; color: #566276; font-size: 7px; line-height: 1.5; }
.vrtpl-ai > div { display: flex; flex-direction: column; gap: 5px; padding: 0 12px; }
.vrtpl-ai > div span { padding: 7px; border: 1px solid #dfe5ed; border-radius: 7px; color: #5d6a7e; font-size: 6px; }
.vrtpl-ai label { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: auto 12px 0; padding: 8px; border: 1px solid #d8e0eb; border-radius: 8px; color: #8b95a4; font-size: 6px; }
.vrtpl-ai label b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #2f6fe4; color: #fff; }
.vrtpl-publish { left: 27%; right: 20%; top: 13%; display: flex; flex-direction: column; padding-bottom: 12px; }
.vrtpl-publish p { margin: 10px 12px 6px; color: #6f7b8d; font-size: 7px; }
.vrtpl-publish > div:not(.vrtpl-panel-head) { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin: 4px 12px; padding: 9px; border: 1px solid #e0e5ec; border-radius: 8px; }
.vrtpl-publish > div.is-on { border-color: #c9daf9; background: #f1f6ff; }
.vrtpl-publish > div i { width: 14px; height: 14px; margin-top: 1px; border: 1px solid #b9c4d2; border-radius: 50%; }
.vrtpl-publish > div.is-on i { border: 4px solid #2f6fe4; }
.vrtpl-publish > div span { display: flex; flex-direction: column; gap: 3px; }
.vrtpl-publish > div b { color: #394659; font-size: 7px; }
.vrtpl-publish > div small { color: #7d8898; font-size: 6px; }
.vrtpl-publish > strong { align-self: flex-end; margin: 8px 12px 0; padding: 8px 13px; border-radius: 7px; background: #2f6fe4; color: #fff; font-size: 7px; }

/* Estado visual de cada acción del curso de Plantillas. */
.vret-template-stage[data-course-step='0'] .vrtpl-entry,
.vret-template-stage[data-course-step='1'] .vrtpl-entry,
.vret-template-stage[data-course-step='5'] .vrtpl-library,
.vret-template-stage[data-course-step='6'] .vrtpl-library,
.vret-template-stage[data-course-step='7'] .vrtpl-library,
.vret-template-stage[data-course-step='8'] .vrtpl-library,
.vret-template-stage[data-course-step='9'] .vrtpl-library,
.vret-template-stage[data-course-step='15'] .vrtpl-new-page-dialog,
.vret-template-stage[data-course-step='17'] .vrtpl-library,
.vret-template-stage[data-course-step='18'] .vrtpl-library,
.vret-template-stage[data-course-step='19'] .vrtpl-library,
.vret-template-stage[data-course-step='20'] .vrtpl-library,
.vret-template-stage[data-course-step='22'] .vrtpl-settings,
.vret-template-stage[data-course-step='23'] .vrtpl-settings,
.vret-template-stage[data-course-step='24'] .vrtpl-settings,
.vret-template-stage[data-course-step='25'] .vrtpl-modals,
.vret-template-stage[data-course-step='27'] .vrtpl-ai,
.vret-template-stage[data-course-step='29'] .vrtpl-publish {
  opacity: 1;
  transform: translate(0) scale(1);
}
.vret-template-stage[data-course-step='0'] .vrtpl-editor,
.vret-template-stage[data-course-step='1'] .vrtpl-editor,
.vret-template-stage[data-course-step='5'] .vrtpl-editor,
.vret-template-stage[data-course-step='6'] .vrtpl-editor,
.vret-template-stage[data-course-step='7'] .vrtpl-editor,
.vret-template-stage[data-course-step='8'] .vrtpl-editor,
.vret-template-stage[data-course-step='9'] .vrtpl-editor,
.vret-template-stage[data-course-step='15'] .vrtpl-editor,
.vret-template-stage[data-course-step='17'] .vrtpl-editor,
.vret-template-stage[data-course-step='18'] .vrtpl-editor,
.vret-template-stage[data-course-step='19'] .vrtpl-editor,
.vret-template-stage[data-course-step='20'] .vrtpl-editor,
.vret-template-stage[data-course-step='22'] .vrtpl-editor,
.vret-template-stage[data-course-step='23'] .vrtpl-editor,
.vret-template-stage[data-course-step='24'] .vrtpl-editor,
.vret-template-stage[data-course-step='25'] .vrtpl-editor,
.vret-template-stage[data-course-step='27'] .vrtpl-editor,
.vret-template-stage[data-course-step='29'] .vrtpl-editor { filter: brightness(.58); }
.vret-template-stage[data-course-step='10'] .vrtpl-selection,
.vret-template-stage[data-course-step='11'] .vrtpl-selection,
.vret-template-stage[data-course-step='12'] .vrtpl-selection,
.vret-template-stage[data-course-step='13'] .vrtpl-selection,
.vret-template-stage[data-course-step='14'] .vrtpl-selection,
.vret-template-stage[data-course-step='26'] .vrtpl-selection { display: block; }
.vret-template-stage[data-course-step='12'] .vrtpl-inspector-empty,
.vret-template-stage[data-course-step='13'] .vrtpl-inspector-empty,
.vret-template-stage[data-course-step='14'] .vrtpl-inspector-empty { display: none; }
.vret-template-stage[data-course-step='12'] .vrtpl-inspector-edit,
.vret-template-stage[data-course-step='13'] .vrtpl-inspector-edit,
.vret-template-stage[data-course-step='14'] .vrtpl-inspector-edit { display: flex; }
.vret-template-stage[data-course-step='16'] .vrtpl-page,
.vret-template-stage[data-course-step='17'] .vrtpl-page,
.vret-template-stage[data-course-step='18'] .vrtpl-page,
.vret-template-stage[data-course-step='19'] .vrtpl-page,
.vret-template-stage[data-course-step='20'] .vrtpl-page,
.vret-template-stage[data-course-step='21'] .vrtpl-page { background: transparent; color: #657186; border-color: transparent; }
.vret-template-stage[data-course-step='16'] .vrtpl-page-tour,
.vret-template-stage[data-course-step='17'] .vrtpl-page-tour,
.vret-template-stage[data-course-step='18'] .vrtpl-page-tour,
.vret-template-stage[data-course-step='19'] .vrtpl-page-tour,
.vret-template-stage[data-course-step='20'] .vrtpl-page-tour { border-color: #d6e3fb; background: #ebf3ff; color: #2d61b8; }
.vret-template-stage[data-course-step='21'] .vrtpl-page-scene { border-color: #d6e3fb; background: #ebf3ff; color: #2d61b8; }
.vret-template-stage[data-course-step='16'] .vrtpl-page-label,
.vret-template-stage[data-course-step='17'] .vrtpl-page-label,
.vret-template-stage[data-course-step='18'] .vrtpl-page-label,
.vret-template-stage[data-course-step='19'] .vrtpl-page-label,
.vret-template-stage[data-course-step='20'] .vrtpl-page-label,
.vret-template-stage[data-course-step='21'] .vrtpl-page-label { font-size: 0; }
.vret-template-stage[data-course-step='16'] .vrtpl-page-label::after,
.vret-template-stage[data-course-step='17'] .vrtpl-page-label::after,
.vret-template-stage[data-course-step='18'] .vrtpl-page-label::after,
.vret-template-stage[data-course-step='19'] .vrtpl-page-label::after,
.vret-template-stage[data-course-step='20'] .vrtpl-page-label::after,
.vret-template-stage[data-course-step='21'] .vrtpl-page-label::after { content: attr(data-tour); font-size: 6px; }
.vret-template-stage[data-course-step='16'] .vrtpl-logo,
.vret-template-stage[data-course-step='17'] .vrtpl-logo,
.vret-template-stage[data-course-step='18'] .vrtpl-logo,
.vret-template-stage[data-course-step='19'] .vrtpl-logo,
.vret-template-stage[data-course-step='20'] .vrtpl-logo,
.vret-template-stage[data-course-step='21'] .vrtpl-logo,
.vret-template-stage[data-course-step='16'] .vrtpl-heading,
.vret-template-stage[data-course-step='17'] .vrtpl-heading,
.vret-template-stage[data-course-step='18'] .vrtpl-heading,
.vret-template-stage[data-course-step='19'] .vrtpl-heading,
.vret-template-stage[data-course-step='20'] .vrtpl-heading,
.vret-template-stage[data-course-step='21'] .vrtpl-heading,
.vret-template-stage[data-course-step='16'] .vrtpl-enter,
.vret-template-stage[data-course-step='17'] .vrtpl-enter,
.vret-template-stage[data-course-step='18'] .vrtpl-enter,
.vret-template-stage[data-course-step='19'] .vrtpl-enter,
.vret-template-stage[data-course-step='20'] .vrtpl-enter,
.vret-template-stage[data-course-step='21'] .vrtpl-enter { display: none; }
.vret-template-stage[data-course-step='16'] .vrtpl-scene-strip,
.vret-template-stage[data-course-step='17'] .vrtpl-scene-strip,
.vret-template-stage[data-course-step='18'] .vrtpl-scene-strip,
.vret-template-stage[data-course-step='19'] .vrtpl-scene-strip,
.vret-template-stage[data-course-step='20'] .vrtpl-scene-strip,
.vret-template-stage[data-course-step='21'] .vrtpl-scene-strip {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  bottom: 7%;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.vret-template-stage[data-course-step='16'] .vrtpl-scene-strip span,
.vret-template-stage[data-course-step='17'] .vrtpl-scene-strip span,
.vret-template-stage[data-course-step='18'] .vrtpl-scene-strip span,
.vret-template-stage[data-course-step='19'] .vrtpl-scene-strip span,
.vret-template-stage[data-course-step='20'] .vrtpl-scene-strip span,
.vret-template-stage[data-course-step='21'] .vrtpl-scene-strip span { padding: 6px 9px; border-radius: 6px; background: rgba(18, 23, 31, .82); color: #fff; font-size: 6px; }
.vret-template-stage[data-course-step='17'] .vrtpl-lib-cover,
.vret-template-stage[data-course-step='18'] .vrtpl-lib-cover,
.vret-template-stage[data-course-step='19'] .vrtpl-lib-cover,
.vret-template-stage[data-course-step='20'] .vrtpl-lib-cover { display: none; }
.vret-template-stage[data-course-step='17'] .vrtpl-lib-tour,
.vret-template-stage[data-course-step='18'] .vrtpl-lib-tour,
.vret-template-stage[data-course-step='19'] .vrtpl-lib-tour,
.vret-template-stage[data-course-step='20'] .vrtpl-lib-tour { display: grid; }
.vret-template-stage[data-course-step='26'] .vrtpl-alt-note { display: flex; }

/* Un único foco cobre por fotograma. */
.vret-template-stage[data-course-step='0'] .vrtpl-entry,
.vret-template-stage[data-course-step='1'] .vrtpl-create-template,
.vret-template-stage[data-course-step='2'] .vrtpl-body,
.vret-template-stage[data-course-step='3'] .vrtpl-page.is-on,
.vret-template-stage[data-course-step='4'] .vrtpl-devices,
.vret-template-stage[data-course-step='5'] .vrtpl-add-trigger,
.vret-template-stage[data-course-step='6'] .vrtpl-lib-cover-tab,
.vret-template-stage[data-course-step='7'] .vrtpl-widget-logo,
.vret-template-stage[data-course-step='8'] .vrtpl-widget-title,
.vret-template-stage[data-course-step='9'] .vrtpl-widget-enter,
.vret-template-stage[data-course-step='10'] .vrtpl-selection,
.vret-template-stage[data-course-step='11'] .vrtpl-selection > i:nth-child(3),
.vret-template-stage[data-course-step='12'] .vrtpl-inspector-edit label:first-of-type,
.vret-template-stage[data-course-step='13'] .vrtpl-style-field,
.vret-template-stage[data-course-step='14'] .vrtpl-visible-field,
.vret-template-stage[data-course-step='15'] .vrtpl-new-page-dialog strong,
.vret-template-stage[data-course-step='16'] .vrtpl-page-tour,
.vret-template-stage[data-course-step='17'] .vrtpl-lib-tour-tab,
.vret-template-stage[data-course-step='18'] .vrtpl-widget-scenes,
.vret-template-stage[data-course-step='19'] .vrtpl-widget-plan,
.vret-template-stage[data-course-step='20'] .vrtpl-widget-contact,
.vret-template-stage[data-course-step='21'] .vrtpl-page-scene,
.vret-template-stage[data-course-step='22'] .vrtpl-settings,
.vret-template-stage[data-course-step='23'] .vrtpl-palettes,
.vret-template-stage[data-course-step='24'] .vrtpl-fonts,
.vret-template-stage[data-course-step='25'] .vrtpl-modals > div:nth-of-type(2),
.vret-template-stage[data-course-step='26'] .vrtpl-alt-note,
.vret-template-stage[data-course-step='27'] .vrtpl-ai,
.vret-template-stage[data-course-step='28'] .vrtpl-saved,
.vret-template-stage[data-course-step='28'] .vrtpl-undo,
.vret-template-stage[data-course-step='29'] .vrtpl-publish strong {
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(184, 95, 43, .88), 0 9px 24px rgba(184, 95, 43, .28);
  border-color: #b85f2b;
  z-index: 40;
}
.vret-template-stage[data-course-step='2'] .vrtpl-body,
.vret-template-stage[data-course-step='22'] .vrtpl-settings,
.vret-template-stage[data-course-step='25'] .vrtpl-modals > div:nth-of-type(2),
.vret-template-stage[data-course-step='27'] .vrtpl-ai { position: relative; }
.vret-template-stage[data-course-step='11'] .vrtpl-selection > i:nth-child(3) { width: 10px; height: 10px; }

/* Cursor real, clic y gestos de arrastre/redimensión. */
.vret-course-player--templates .vret-template-stage { --mouse-x: 50%; --mouse-y: 50%; }
.vret-course-player--templates .vret-template-stage[data-course-step='0'] { --mouse-x: 70%; --mouse-y: 63%; }
.vret-course-player--templates .vret-template-stage[data-course-step='1'] { --mouse-x: 73%; --mouse-y: 62%; }
.vret-course-player--templates .vret-template-stage[data-course-step='2'] { --mouse-x: 53%; --mouse-y: 50%; }
.vret-course-player--templates .vret-template-stage[data-course-step='3'] { --mouse-x: 11%; --mouse-y: 30%; }
.vret-course-player--templates .vret-template-stage[data-course-step='4'] { --mouse-x: 52%; --mouse-y: 9%; }
.vret-course-player--templates .vret-template-stage[data-course-step='5'] { --mouse-x: 11%; --mouse-y: 88%; }
.vret-course-player--templates .vret-template-stage[data-course-step='6'] { --mouse-x: 35%; --mouse-y: 30%; }
.vret-course-player--templates .vret-template-stage[data-course-step='7'] { --mouse-x: 35%; --mouse-y: 51%; }
.vret-course-player--templates .vret-template-stage[data-course-step='8'] { --mouse-x: 67%; --mouse-y: 51%; }
.vret-course-player--templates .vret-template-stage[data-course-step='9'] { --mouse-x: 36%; --mouse-y: 73%; }
.vret-course-player--templates .vret-template-stage[data-course-step='10'] { --mouse-x: 54%; --mouse-y: 53%; }
.vret-course-player--templates .vret-template-stage[data-course-step='11'] { --mouse-x: 67%; --mouse-y: 59%; }
.vret-course-player--templates .vret-template-stage[data-course-step='12'] { --mouse-x: 89%; --mouse-y: 33%; }
.vret-course-player--templates .vret-template-stage[data-course-step='13'] { --mouse-x: 89%; --mouse-y: 47%; }
.vret-course-player--templates .vret-template-stage[data-course-step='14'] { --mouse-x: 89%; --mouse-y: 68%; }
.vret-course-player--templates .vret-template-stage[data-course-step='15'] { --mouse-x: 67%; --mouse-y: 65%; }
.vret-course-player--templates .vret-template-stage[data-course-step='16'] { --mouse-x: 11%; --mouse-y: 38%; }
.vret-course-player--templates .vret-template-stage[data-course-step='17'] { --mouse-x: 64%; --mouse-y: 30%; }
.vret-course-player--templates .vret-template-stage[data-course-step='18'] { --mouse-x: 36%; --mouse-y: 51%; }
.vret-course-player--templates .vret-template-stage[data-course-step='19'] { --mouse-x: 67%; --mouse-y: 51%; }
.vret-course-player--templates .vret-template-stage[data-course-step='20'] { --mouse-x: 36%; --mouse-y: 73%; }
.vret-course-player--templates .vret-template-stage[data-course-step='21'] { --mouse-x: 12%; --mouse-y: 46%; }
.vret-course-player--templates .vret-template-stage[data-course-step='22'] { --mouse-x: 11%; --mouse-y: 78%; }
.vret-course-player--templates .vret-template-stage[data-course-step='23'] { --mouse-x: 50%; --mouse-y: 52%; }
.vret-course-player--templates .vret-template-stage[data-course-step='24'] { --mouse-x: 51%; --mouse-y: 70%; }
.vret-course-player--templates .vret-template-stage[data-course-step='25'] { --mouse-x: 50%; --mouse-y: 43%; }
.vret-course-player--templates .vret-template-stage[data-course-step='26'] { --mouse-x: 55%; --mouse-y: 53%; }
.vret-course-player--templates .vret-template-stage[data-course-step='27'] { --mouse-x: 85%; --mouse-y: 78%; }
.vret-course-player--templates .vret-template-stage[data-course-step='28'] { --mouse-x: 78%; --mouse-y: 9%; }
.vret-course-player--templates .vret-template-stage[data-course-step='29'] { --mouse-x: 68%; --mouse-y: 73%; }
.vret-course-player--templates .vret-template-stage[data-course-step='9'] .vret-cursor { animation: none; }
.vret-course-player--templates .vret-template-stage[data-course-step='10'] .vret-cursor { animation: vrtplDragCursor 1.75s cubic-bezier(.22, .8, .24, 1) both; }
.vret-course-player--templates .vret-template-stage[data-course-step='10'] .vrtpl-selection { animation: vrtplDragWidget 1.75s cubic-bezier(.22, .8, .24, 1) both; }
.vret-course-player--templates .vret-template-stage[data-course-step='11'] .vret-cursor { animation: vrtplResizeCursor 1.75s cubic-bezier(.22, .8, .24, 1) both; }
.vret-course-player--templates .vret-template-stage[data-course-step='11'] .vrtpl-selection { animation: vrtplResizeWidget 1.75s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes vrtplDragCursor { 0% { left: 54%; top: 53%; } 35% { left: 54%; top: 49%; } 100% { left: 44%; top: 40%; } }
@keyframes vrtplDragWidget { 0% { transform: translate(0); } 35% { transform: translate(-3%, -4%) scale(1.02); } 100% { transform: translate(-30%, -48%); } }
@keyframes vrtplResizeCursor { 0% { left: 62%; top: 55%; } 100% { left: 69%; top: 63%; } }
@keyframes vrtplResizeWidget { 0% { width: 28%; height: 16%; } 100% { width: 41%; height: 25%; } }

@media (max-width: 1080px) {
  .vret-course-picker { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vret-course-picker a { min-height: 82px; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 13px; }
  .vret-course-picker a > span { width: 36px; height: 36px; }
  .vret-course-picker em { display: none; }
  .vret-course-divider { margin-top: 62px; }
  .vrtpl-editor { inset: 2.5%; }
  .vrtpl-top { min-height: 41px; grid-template-columns: minmax(80px, 1fr) auto minmax(92px, 1fr); gap: 4px; padding: 5px; }
  .vrtpl-title > span { width: 22px; height: 22px; }
  .vrtpl-title b { font-size: 6px; }
  .vrtpl-title small { display: none; }
  .vrtpl-devices span { width: 20px; height: 20px; font-size: 7px; }
  .vrtpl-actions { gap: 2px; }
  .vrtpl-actions > * { padding: 5px; font-size: 0; }
  .vrtpl-actions .vrtpl-saved::after { content: '✓'; font-size: 7px; }
  .vrtpl-actions .vrtpl-ai-trigger::after { content: '✦'; font-size: 7px; }
  .vrtpl-actions .vrtpl-publish-trigger::after { content: '↑'; font-size: 7px; }
  .vrtpl-body { grid-template-columns: 78px minmax(0, 1fr) 72px; }
  .vrtpl-pages { gap: 3px; padding: 5px; }
  .vrtpl-pages__head b { font-size: 5px; }
  .vrtpl-pages__head span { width: 18px; height: 18px; }
  .vrtpl-page { min-height: 28px; gap: 3px; padding: 4px; font-size: 5px; }
  .vrtpl-page b { font-size: 5px; }
  .vrtpl-page em { display: none; }
  .vrtpl-pages__bottom > * { min-height: 22px; padding: 4px; font-size: 5px; }
  .vrtpl-workspace { padding: 6px; }
  .vrtpl-inspector { padding: 6px; }
  .vrtpl-inspector-empty { font-size: 5px; }
  .vrtpl-inspector-edit { gap: 4px; }
  .vrtpl-heading { font-size: 9px; }
  .vrtpl-entry { inset: 5%; padding: 9px; }
  .vrtpl-entry__cards { gap: 5px; }
  .vrtpl-entry__cards > div { padding: 6px; }
  .vrtpl-entry__cards i { min-height: 60px; }
  .vrtpl-library { left: 4%; right: 4%; top: 4%; bottom: 4%; }
  .vrtpl-lib-grid > div { grid-template-columns: 34px 1fr; padding: 5px; }
  .vrtpl-lib-grid i { width: 34px; height: 32px; }
  .vrtpl-settings { left: 6%; right: 6%; top: 4%; bottom: 4%; }
  .vrtpl-modals { left: 4%; right: 4%; top: 4%; bottom: 4%; }
  .vrtpl-ai { top: 4%; right: 3%; bottom: 4%; width: 180px; }
  .vrtpl-publish { left: 12%; right: 8%; top: 10%; }
  .vrtpl-new-page-dialog { left: 12%; right: 10%; top: 20%; }
}
@media (forced-colors: active) {
  .vret-course-picker a,
  .vret-course-player--templates .vret-hot { outline-color: Highlight; }
}

/* ==========================================================================
   Tutoriales en video · YouTube al inicio de la pagina (12-sep-2026)
   ========================================================================== */
.vret-videos { margin: 0 auto clamp(26px, 3.5vw, 48px); }
.vret-videos__head { max-width: 790px; margin: 0 0 16px; }
.vret-videos__head .vret-eyebrow { color: #2f6fe4; }
.vret-videos__head h2 {
  margin: 8px 0 8px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.vret-videos__head > p:last-child { max-width: 68ch; margin: 0; color: #536176; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; }
.vret-video {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 18px;
  border: 1px solid #d8e2ef;
  border-radius: 17px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 20px 48px -42px rgba(15, 23, 42, .72);
}
.vret-video + .vret-video { margin-top: 12px; }
.vret-video__frame { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; border-radius: 12px; overflow: hidden; background: #0f172a; }
.vret-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vret-video__copy { min-width: 0; }
.vret-video__copy h3 { margin: 0 0 8px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; letter-spacing: -.02em; }
.vret-video__copy p { margin: 0 0 16px; color: #536176; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.vret-video__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #2f6fe4;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.vret-video__btn:hover { background: #2459bd; transform: translateY(-1px); }
.vret-video__btn:focus-visible { outline: 3px solid rgba(47, 111, 228, .34); outline-offset: 3px; }
@media (max-width: 1080px) {
  .vret-video { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vret-video { gap: 14px; padding: 12px; border-radius: 14px; }
  .vret-video__btn { width: 100%; justify-content: center; }
}