/* ════════════════════════════════════════════════════════════════════
   WEBLYM · «PRUÉBALO»: EL EDITOR DE JUGUETE DE LA PORTADA       (06/10)

   La segunda sección de la portada: el titular, su lema a la derecha y,
   debajo, un editor con una tienda de ejemplo (Solstice Rituals desde el
   11/10; antes Verplant) que se puede
   tocar. El marcado está en index.html y lo que se mueve, en prueba.js.

   ── DE DÓNDE SALEN LOS NÚMEROS ─────────────────────────────────────
   De medir dos referencias del 06/10:
     · la sección entera (357 px de ancho, leída como una pantalla de
       1088: factor 3,05) da la cabecera y dónde cae el editor;
     · el editor a tamaño grande (el marco mide 2159 px) da todo lo de
       dentro. Esas medidas van en `--p`, un 1 % del ancho del marco, así
       que la tienda entera escala con la pantalla sin descolocarse.
   ════════════════════════════════════════════════════════════════════ */

/* INTER CON TODOS SUS PESOS. La casa la declara en 400, 500 y 600
   (fuentes.css), pero el archivo es VARIABLE y lleva del 100 al 900: la
   tienda de la referencia usa pesos intermedios —el menú y «LOG IN» van
   finos, «Inicio» y «Miembros» algo más llenos— y con los tres de la casa
   no salían. Mismo archivo, así que no hay ni una descarga más. */
@font-face {
  font-family: 'Inter Demo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../Resources/Fuentes/inter-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Demo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../Resources/Fuentes/inter-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* LAS LETRAS DE LA TIENDA DE EJEMPLO (11/10): Solstice Rituals. Las mismas
   que el editor ofrece (packages/editor/src/recursos/fuentes), copiadas a
   resources/fuentes: la CSP no deja pedirlas fuera. */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(resources/fuentes/roboto-condensed-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(resources/fuentes/eb-garamond-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(resources/fuentes/playfair-display-normal-400-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── LA CABECERA DE LA SECCIÓN ──────────────────────────────────── */

.prueba {
  --u: calc(min(100vw, 1920px) / 1088);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 0 calc(140 * var(--u));
}

.prueba__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(30 * var(--u)) calc(43 * var(--u)) 0 calc(46 * var(--u));
}

.prueba__titulo {
  margin: 0;
  font-size: max(26px, calc(43 * var(--u)));
  font-weight: 400;
  line-height: 1.24;
}

.prueba__lema {
  margin: calc(18 * var(--u)) 0 0;
  font-size: max(12px, calc(18 * var(--u)));
  line-height: 1.24;
  color: var(--tinta-suave);
}

/* ── EL MARCO DEL EDITOR ────────────────────────────────────────── */

/* EL RESPLANDOR DE DETRÁS (06/10, pedido: «una sombra similar a las de la
   animación de arriba, de un color similar al de la página»). Es la
   misma receta que `.escena__resplandor` —un degradado elíptico, liso por
   construcción, con las mismas cuatro paradas— en el melocotón de las
   tarjetas de Verplant (su fondo mide 241, 223, 212; aquí va más
   saturado para que se note sobre el blanco). Detrás del marco y sin
   clics. A dos tercios de la fuerza del de arriba (06/10, «que se note un
   poco menos»).
   DESDE EL 11/10, EN ARENA (214, 188, 140): la tienda es Solstice Rituals, de
   tarjetas crema (240, 237, 222), y el melocotón ya no venía de nada. */
.prueba__escenario {
  position: relative;
}

.prueba__escenario::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(960 * var(--u) * 1.3);
  height: calc(960 * var(--u) * 1.3 * 462 / 928 * 1.5);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgb(214 188 140 / 0.2) 45%,
    rgb(214 188 140 / 0.11) 68%,
    rgb(214 188 140 / 0.035) 86%,
    rgb(214 188 140 / 0) 100%
  );
  pointer-events: none;
}

/* ── EL EDITOR NUEVO (07/10, referencia) ──────────────────────────
   Toda la interfaz se rehízo sobre una imagen del editor de 928 × 462: la
   barra de arriba, la fila de herramientas, la ventana de la página y el
   panel de Lym. `--p` ES UN 1 % DEL ANCHO DEL MARCO, así que cada medida
   de la imagen se escribe aquí dividida entre 9,28.
   EL MARCO MIDE 960 Y NO 731: a 731 la letra de la interfaz se quedaba en
   8 px; a 960 queda casi a la escala de la imagen (1 unidad ≈ 9,6 px).
   `--p` sale de la misma cuenta que el ancho y no de medirlo (`cqw`):
   Firefox, con el zoom del 90 % de la portada, aplicaba el zoom dos veces
   a las unidades de contenedor (06/10). */
.demo {
  --p: calc(9.6 * var(--u));
  position: relative;
  z-index: 1;
  width: calc(960 * var(--u));
  aspect-ratio: 928 / 462;
  margin: calc(60 * var(--u)) auto 0;
  border-radius: calc(1 * var(--p)) calc(1 * var(--p)) 0 0;
  background: #f0f0f0;
  /* Los cantos finos van en sombra y no en borde: un borde de menos de
     1 px se redondea a 1 px entero. */
  box-shadow: 0 0 0 0.5px #dbdbdb;
  overflow: hidden;
  color: #000;
  font-family: 'Inter Demo', Inter, system-ui, sans-serif;
  line-height: 1;
}

.demo button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.demo__chev {
  width: calc(0.95 * var(--p));
  height: calc(0.95 * var(--p));
}

/* ── LA BARRA DE ARRIBA ── 36 px de alto, con su canto debajo. */
.demo__cabeza {
  position: absolute;
  /* Por encima de la fila de herramientas: el menú del zoom cae sobre
     ella y, debajo, los clics se los llevaban sus botones. */
  z-index: 4;
  inset: 0 0 auto;
  height: calc(3.88 * var(--p));
  /* EL CANTO DE ABAJO (08/10, pedido): 1 px de raya gris y, pegado
     debajo, 1 px de blanco (primero fueron 2). La raya va por dentro de la
     barra y el blanco por fuera, sobre la fila de herramientas, que no
     tiene fondo. */
  box-shadow: inset 0 -1px 0 #e2e2e2, 0 1px 0 #fff;
  font-size: calc(0.95 * var(--p));
  font-weight: 500;
}

.demo__cabeza > * {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* EL LOGO Y EL MENÚ COMPARTEN SITIO (08/10, pedido). Con el ratón fuera
   del lienzo —la ventana de la página— se ve el menú de tres rayas; al
   entrar, vuelve el logo. EL RELEVO ES EL DEL NAV PLEGADO de la casa
   (styles/02, «RELEVO RÁPIDO EN DOS TIEMPOS»): el que se va encoge a 0,78
   y se funde en 90 ms; después el que llega crece de 0,78 a 1 en 140 ms
   con la curva de la casa. Son transiciones, así que si el ratón vuelve a
   mitad, siguen desde donde estaban sin saltar. */
.demo__marca {
  left: calc(1.29 * var(--p));
  display: grid;
  place-items: center;
  width: calc(2.05 * var(--p));
  height: calc(2.05 * var(--p));
}

.demo__marca > * {
  grid-area: 1 / 1;
  transform-origin: center;
}

.demo__marca-logo {
  width: 100%;
  height: auto;
}

.demo__marca-menu {
  width: calc(1.75 * var(--p));
  height: calc(1.75 * var(--p));
  color: #1a1a1a;
}

/* MÁS BORROSO Y UN POCO MÁS LENTO (08/10, pedido): además de encoger y
   fundirse, el que sale se desenfoca y el que llega se enfoca. Los tiempos
   suben un 50 % (de 90 + 140 a 140 + 210 ms), sin perder el relevo. */
/* Lo que entra: 210 ms con la curva, tras los 140 del que sale. */
.demo__marca-logo,
.demo--fuera .demo__marca-menu {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity 0.21s cubic-bezier(0.32, 0.72, 0, 1) 0.14s,
    transform 0.21s cubic-bezier(0.32, 0.72, 0, 1) 0.14s,
    filter 0.21s cubic-bezier(0.32, 0.72, 0, 1) 0.14s;
}

/* Lo que sale: encoge, se desenfoca y se funde en 140 ms. */
.demo__marca-menu,
.demo--fuera .demo__marca-logo {
  opacity: 0;
  transform: scale(0.78);
  filter: blur(calc(0.35 * var(--p)));
  transition:
    opacity 0.14s ease-in,
    transform 0.14s ease-in,
    filter 0.14s ease-in;
}

.demo__avatar {
  left: calc(5.71 * var(--p));
  display: grid;
  place-items: center;
  width: calc(1.88 * var(--p));
  height: calc(1.88 * var(--p));
  border-radius: 50%;
  background: linear-gradient(135deg, #5b6b7a, #2c3640);
  box-shadow: 0 0 0 calc(0.12 * var(--p)) #6f8fd6;
  color: #fff;
  font-size: calc(0.9 * var(--p));
  font-weight: 600;
}

.demo__menu {
  display: inline-flex;
  align-items: center;
  gap: calc(0.75 * var(--p));
  color: #000;
}

.demo__menu--tienda { left: calc(9.27 * var(--p)); }
.demo__menu--marca  { left: calc(16.49 * var(--p)); }
/* El zoom: el botón y su menú van juntos en `.demo__zoom`, que es lo que
   se coloca en la barra. */
.demo__zoom { left: calc(44.07 * var(--p)); }
.demo__menu--zoom { position: relative; color: #0f0f0f; }

.demo__zoom-menu {
  position: absolute;
  top: calc(100% + 0.6 * var(--p));
  left: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: calc(12 * var(--p));
  padding: calc(0.4 * var(--p));
  transform: translateX(-50%);
  border-radius: calc(0.8 * var(--p));
  background: #fff;
  box-shadow: 0 0 0 0.5px #dcdcdc, 0 calc(0.5 * var(--p)) calc(1.8 * var(--p)) rgb(0 0 0 / 0.12);
  font-size: calc(0.95 * var(--p));
  font-weight: 500;
}

.demo__zoom-menu[hidden] {
  display: none;
}

.demo__zoom-pasos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.2 * var(--p)) calc(0.2 * var(--p)) calc(0.4 * var(--p));
}

.demo__zoom-paso {
  display: grid;
  place-items: center;
  width: calc(2.1 * var(--p));
  height: calc(2.1 * var(--p));
  border-radius: 50% !important;
  font-size: calc(1.3 * var(--p)) !important;
  line-height: 1;
}

.demo__zoom-paso:hover:not(:disabled) {
  background: #f2f2f2 !important;
}

.demo__zoom-paso:disabled {
  opacity: 0.3;
  cursor: default !important;
}

.demo__zoom-valor {
  min-width: calc(4 * var(--p));
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.demo__zoom-op {
  padding: calc(0.5 * var(--p)) calc(0.7 * var(--p)) !important;
  border-radius: calc(0.45 * var(--p)) !important;
  color: #333 !important;
  text-align: left;
}

.demo__zoom-op:hover {
  background: #f2f2f2 !important;
}

.demo__mejorar {
  left: calc(74.46 * var(--p));
  color: #0055ff !important;
}

.demo__hist {
  width: calc(1.2 * var(--p));
  height: calc(1.2 * var(--p));
  color: #4c4b4b;
}

.demo__hist svg { width: 100%; height: 100%; }
.demo__hist:disabled { color: #b9b9b8; cursor: default !important; }
/* En la imagen la flecha de deshacer va oscura aunque no haya nada que
   deshacer todavía; la de rehacer, clara. Se copia. */
.demo__hist--deshacer:disabled { color: #4c4b4b; }
.demo__hist--deshacer { left: calc(82.05 * var(--p)); }
.demo__hist--rehacer  { left: calc(84.0 * var(--p)); }

.demo__vista {
  left: calc(86.64 * var(--p));
  color: #0f0f0f;
}

.demo__publicar {
  left: calc(92.99 * var(--p));
  width: calc(5.93 * var(--p));
  height: calc(2.26 * var(--p));
  border-radius: calc(0.55 * var(--p)) !important;
  background: #1961e0 !important;
  /* Un canto azul casi negro de medio píxel (08/10, pedido): apenas se
     ve, pero recorta el botón contra el gris. */
  box-shadow: 0 0 0 0.5px #0a1f4d;
  color: #fff !important;
}

/* ── LA SEGUNDA FILA: Agregar, las herramientas y la cabecera de Lym. */
.demo__fila {
  position: absolute;
  z-index: 2;
  inset: calc(3.88 * var(--p)) 0 auto;
  height: calc(3.9 * var(--p));
}

.demo__fila > * {
  position: absolute;
  top: calc(2.32 * var(--p));
  transform: translateY(-50%);
}

.demo__agregar {
  left: calc(1.29 * var(--p));
  display: inline-flex;
  align-items: center;
  gap: calc(0.45 * var(--p));
  /* UN POCO MÁS GRANDE Y DE CRISTAL (08/10, pedido): blanco medio
     transparente con lo de detrás desenfocado, el brillo blanco del canto
     de arriba y dos sombras, la receta de la caja del chat en suave. */
  width: calc(6.5 * var(--p));
  height: calc(2.3 * var(--p));
  padding: 0 0 0 calc(0.65 * var(--p)) !important;
  border-radius: calc(0.6 * var(--p)) !important;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.45)) !important;
  -webkit-backdrop-filter: blur(calc(1 * var(--p))) saturate(1.8);
  backdrop-filter: blur(calc(1 * var(--p))) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.4),
    0 0 0 0.5px rgb(150 160 190 / 0.3),
    0 1px 2px rgb(30 40 80 / 0.08),
    0 calc(0.4 * var(--p)) calc(1.2 * var(--p)) rgb(40 60 120 / 0.1);
  /* EL MISMO PESO QUE LAS HERRAMIENTAS (08/10, pedido): letra 600 y del
     mismo color que «Cambiar estilo», y el «+» con su trazo grueso. */
  color: #333334 !important;
  font-size: calc(0.98 * var(--p)) !important;
  font-weight: 600 !important;
}

/* «Agregar» va más arriba que las herramientas: en la imagen su centro
   cae a 18 px de la barra y el de ellas a 21. */
.demo__fila > .demo__agregar {
  top: calc(1.94 * var(--p));
}

.demo__agregar svg {
  width: calc(0.85 * var(--p));
  height: calc(0.85 * var(--p));
}

/* CENTRADA EN SU HUECO (07/10, pedido): entre la raya de la barra de
   arriba y el canto de la ventana hay 4,09 unidades, y la banda va justo
   en medio (2,05 desde la raya). Antes caía 0,27 más abajo. */
.demo__fila > .demo__herramientas {
  top: calc(2.05 * var(--p));
}

.demo__herramientas {
  left: calc(21.34 * var(--p));
  display: flex;
  align-items: center;
  width: calc(38.6 * var(--p));
  height: calc(1.83 * var(--p));
  /* Sin banda de fondo (07/10, pedido): la imagen traía una franja un
     punto más clara detrás y se veía como un parche. */
  color: #333334;
  font-size: calc(0.95 * var(--p));
  font-weight: 600;
}

/* SOLO CON ALGO SELECCIONADO (08/10, pedido): la barra de herramientas
   sale al pulsar un elemento y se va al soltarlo, con el desenfoque de la
   casa —el que se va se emborrona; el que llega se enfoca—. Sin clics
   mientras está escondida. */
.demo__herramientas {
  opacity: 0;
  filter: blur(calc(0.35 * var(--p)));
  pointer-events: none;
  transition: opacity .16s ease-in, filter .16s ease-in;
}

.demo--con-sel .demo__herramientas {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition: opacity .2s ease-out, filter .2s ease-out;
}

.demo__herr {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: calc(0.85 * var(--p));
  transform: translateY(-50%);
}

.demo__herr svg {
  width: calc(1.3 * var(--p));
  height: calc(1.3 * var(--p));
}

/* Centrado ÓPTICO y no de caja: los dibujos de los iconos y las
   mayúsculas quedan medio píxel por encima del centro de su caja, así que
   todo baja esa cantidad (medido a 4x: con esto los centros de iconos y
   letras caen a ±1,5 de los 31,5 del centro de la banda). */
.demo__herramientas > .demo__herr {
  transform: translateY(calc(-50% + 0.05 * var(--p)));
}

.demo__herr:nth-of-type(1) { left: calc(0.54 * var(--p)); }
.demo__herr:nth-of-type(2) { left: calc(10.4 * var(--p)); gap: calc(0.55 * var(--p)); }
.demo__herr:nth-of-type(3) { left: calc(22.63 * var(--p)); }
.demo__herr:nth-of-type(4) { left: calc(26.72 * var(--p)); }
.demo__herr:nth-of-type(5) { left: calc(29.52 * var(--p)); }
.demo__herr:nth-of-type(6) { left: calc(32.22 * var(--p)); }
.demo__herr:nth-of-type(7) { left: calc(36.2 * var(--p)); }

.demo__circulo {
  width: calc(1.4 * var(--p));
  height: calc(1.4 * var(--p));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px #c9c9c9, 0 0.5px 1.5px rgb(0 0 0 / 0.08);
}

.demo__herr-corte {
  position: absolute;
  top: 50%;
  width: 1px;
  height: calc(1.2 * var(--p));
  transform: translateY(-50%);
  background: #e2e2e3;
}

.demo__herr-corte:nth-of-type(1) { left: calc(25.0 * var(--p)); }
.demo__herr-corte:nth-of-type(2) { left: calc(34.69 * var(--p)); }
.demo__herr-corte:nth-of-type(3) { left: calc(38.57 * var(--p)); }

.demo__lym-cabeza {
  left: calc(76.08 * var(--p));
  right: 0;
  height: calc(1.6 * var(--p));
}

.demo__lym-nombre {
  position: absolute;
  left: calc(2.48 * var(--p));
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(0.92 * var(--p));
  font-weight: 700;
}

.demo__lym-iconos {
  position: absolute;
  right: calc(1.6 * var(--p));
  top: 50%;
  display: flex;
  gap: calc(0.55 * var(--p));
  transform: translateY(-50%);
  color: #2b2b2b;
}

.demo__lym-iconos svg {
  width: calc(0.85 * var(--p));
  height: calc(0.85 * var(--p));
}

/* ── LA VENTANA DE LA PÁGINA ── Una tarjeta blanca con su barra (los tres
   puntos, el monitor y «Inicio») y una sombra ancha alrededor; se sale por
   abajo del marco, como en la imagen. */
/* EL ESCENARIO: el hueco entre la columna de la izquierda y el panel de
   Lym, desde la fila de herramientas hasta abajo. La ventana va dentro,
   centrada en lo que deja el hueco de la izquierda (ese hueco es de las
   herramientas), y con el ZOOM (`zoom` en la ventana, lo pone prueba.js)
   crece o encoge entera. Si se sale, el escenario se desliza, sin barras.
   El aire de los lados es para que su sombra no se corte. */
.demo__escenario-lienzo {
  position: absolute;
  left: 0;
  right: calc(21.9 * var(--p));
  top: calc(6.97 * var(--p));
  bottom: 0;
  padding: calc(1 * var(--p)) calc(2 * var(--p)) 0 calc(5.82 * var(--p));
  overflow: auto;
  scrollbar-width: none;
  /* SIN CANTO HACIA LYM (08/10, reportado): el escenario recorta lo que se
     sale, y ese recorte era una raya recta en el borde del panel —la
     sombra de la ventana y, ampliada, la página—. Ahora se desvanece en
     sus últimas 2,5 unidades, justo antes de Lym: ni raya ni página
     metida debajo de su texto. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5 * var(--p)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5 * var(--p)), transparent);
}

.demo__escenario-lienzo::-webkit-scrollbar {
  display: none;
}

.demo__ventana {
  position: relative;
  /* Centrada en su hueco, y con margen a la vista si se hace pequeña. */
  margin: 0 auto;
  height: calc(43.8 * var(--p));
  width: calc(70.04 * var(--p));
  padding: 0 calc(0.21 * var(--p));
  border-radius: calc(0.86 * var(--p)) calc(0.86 * var(--p)) 0 0;
  background: #fafafa;
  /* LA SOMBRA VA A LOS LADOS (08/10, pedido): una a la izquierda y otra
     a la derecha, desplazadas hacia fuera y encogidas, así que por arriba
     apenas asoman; arriba solo queda una muy suave. */
  box-shadow:
    0 0 0 0.5px #e4e4e4,
    calc(-1.3 * var(--p)) calc(0.6 * var(--p)) calc(2.4 * var(--p)) calc(-0.7 * var(--p)) rgb(0 0 0 / 0.16),
    calc(1.3 * var(--p)) calc(0.6 * var(--p)) calc(2.4 * var(--p)) calc(-0.7 * var(--p)) rgb(0 0 0 / 0.16),
    0 calc(-0.2 * var(--p)) calc(0.8 * var(--p)) rgb(0 0 0 / 0.04);
}

.demo__ventana-barra {
  position: relative;
  /* Por encima de la capa de los marcos: el menú del monitor cae sobre
     la página y la capa, que va después, lo tapaba. */
  z-index: 3;
  height: calc(2.59 * var(--p));
  box-shadow: inset 0 -0.5px 0 #ececec;
}

.demo__ventana-barra > * {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.demo__puntos {
  left: calc(0.8 * var(--p));
  display: flex;
  gap: calc(0.38 * var(--p));
}

.demo__puntos i {
  width: calc(0.72 * var(--p));
  height: calc(0.72 * var(--p));
  border-radius: 50%;
  background: #ececec;
  box-shadow: inset 0 0 0 0.5px #d8d8d8;
}

/* EL MONITOR E «INICIO», CENTRADOS EN LA BARRA (09/10, pedido): iban en
   un left fijo (22,15 y 23,89) que solo caía en el centro con la ventana
   de 70. Ahora cuelgan del 50 %, con los mismos números a ese ancho, así
   que siguen centrados cuando la ventana se ensancha al cerrar Lym. */
.demo__disp {
  left: calc(50% - 12.68 * var(--p));
}

.demo__disp-abrir {
  display: grid;
  place-items: center;
  width: calc(1.5 * var(--p));
  height: calc(1.5 * var(--p));
  /* Redondo (08/10, pedido): el fondo del hover es un círculo. */
  border-radius: 50% !important;
  color: #3a3a3a;
}

.demo__disp-abrir:hover {
  background: #ececec !important;
}

.demo__disp-ic {
  grid-area: 1 / 1;
  width: calc(0.95 * var(--p));
  height: calc(0.95 * var(--p));
  opacity: 0;
}

.demo[data-disp="ordenador"] .demo__disp-ic--ordenador,
.demo[data-disp="tablet"] .demo__disp-ic--tablet,
.demo[data-disp="movil"] .demo__disp-ic--movil {
  opacity: 1;
}

.demo__pagina {
  left: calc(50% - 10.94 * var(--p));
  width: calc(21.88 * var(--p));
  height: calc(1.94 * var(--p));
}

.demo__pagina-sel {
  position: absolute;
  inset: 0;
  transition: background-color .15s ease;
  width: calc(21.88 * var(--p));
  height: calc(1.94 * var(--p));
  border-radius: 999px !important;
  background: #fbfbfb !important;
  box-shadow: inset 0 0 0 0.5px #c9c9c9;
  color: #424242 !important;
  font-size: calc(0.86 * var(--p)) !important;
  font-weight: 500 !important;
}

.demo__pagina-sel > * {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* LOS DOS ICONOS DE «INICIO», TAN GRANDES COMO EL MONITOR (08/10,
   pedido). Lo que se iguala es el DIBUJO, no la caja: el monitor ocupa 17
   de sus 24, las flechas de recargar 14 y el chevron 12, así que cada caja
   crece en esa proporción (0,95 × 17/14 y × 17/12) y los tres trazos
   quedan del mismo grosor que el del monitor. */
.demo__recargar {
  left: calc(1.0 * var(--p));
  width: calc(1.15 * var(--p));
  height: calc(1.15 * var(--p));
  stroke-width: 1.65;
}

/* EL NOMBRE, CENTRADO; LA RUTA, A LA IZQUIERDA. Al pasar el ratón (o con
   el menú abierto) el nombre se apaga y entra la ruta, en gris, junto a
   las flechas —el cruce del vídeo, unos 150 ms—; la pastilla se oscurece
   un punto. */
/* EL RELEVO, EN DOS TIEMPOS Y CON DESENFOQUE (08/10, pedido): primero el
   que se va se emborrona y se apaga (140 ms); después, cuando ya no está,
   el que llega pasa de borroso a nítido (180 ms). Al quitar el ratón, lo
   mismo al revés. Es el mismo relevo que el del logo y el menú. */
.demo__pagina-nombre {
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

.demo__pagina-ruta {
  left: calc(2.75 * var(--p));
  color: #a3a3a3;
}

/* Lo que entra: nítido, tras el hueco del que sale. */
.demo__pagina-nombre,
.demo__pagina-sel:hover .demo__pagina-ruta,
.demo__pagina-sel[aria-expanded="true"] .demo__pagina-ruta {
  opacity: 1;
  filter: blur(0);
  transition: opacity .18s ease-out .14s, filter .18s ease-out .14s;
}

/* Lo que sale: se emborrona y se apaga, sin esperar. */
.demo__pagina-ruta,
.demo__pagina-sel:hover .demo__pagina-nombre,
.demo__pagina-sel[aria-expanded="true"] .demo__pagina-nombre {
  opacity: 0;
  filter: blur(calc(0.35 * var(--p)));
  transition: opacity .14s ease-in, filter .14s ease-in;
}

.demo__pagina-sel:hover,
.demo__pagina-sel[aria-expanded="true"] {
  background: #f4f4f4 !important;
}

/* Abierto, el chevron apunta hacia arriba. */
.demo__pagina-sel .demo__chev {
  transition: transform .2s cubic-bezier(.32, .72, 0, 1);
}

.demo__pagina-sel[aria-expanded="true"] .demo__chev {
  transform: translateY(-50%) rotate(180deg);
}

/* EL MENÚ DE PÁGINAS: del ancho de la pastilla, blanco, esquinas de 12,
   el buscador arriba con la ruta seleccionada y la lista debajo; la
   página en la que estás, con su fila gris, la marca y el botón de sus
   ajustes. Medido en el vídeo. */
.demo__pagina-menu {
  position: absolute;
  top: calc(100% + 0.45 * var(--p));
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-radius: calc(1.05 * var(--p));
  background: #fff;
  box-shadow:
    0 0 0 0.5px #dcdcdc,
    0 calc(0.4 * var(--p)) calc(1.6 * var(--p)) rgb(0 0 0 / 0.12);
  overflow: hidden;
  transform-origin: 50% 0;
  animation: demo-pagina-abre .16s cubic-bezier(.32, .72, 0, 1);
}

@keyframes demo-pagina-abre {
  from { opacity: 0; transform: translateY(calc(-0.3 * var(--p))) scale(.97); }
}

.demo__pagina-menu[hidden] {
  display: none;
}

.demo__pagina-buscar {
  display: flex;
  align-items: center;
  gap: calc(0.55 * var(--p));
  height: calc(2.6 * var(--p));
  padding: 0 calc(0.9 * var(--p)) 0 calc(1.05 * var(--p));
  border-bottom: 0.5px solid #ececec;
  color: #9a9a9a;
}

.demo__pagina-buscar > svg {
  width: calc(1.1 * var(--p));
  height: calc(1.1 * var(--p));
}

.demo__pagina-campo {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: #1a1a1a;
  font: inherit;
  font-size: calc(0.95 * var(--p));
}

.demo__pagina-campo::selection {
  background: #2f6fe6;
  color: #fff;
}

.demo__pagina-borrar {
  display: grid;
  place-items: center;
  width: calc(1.4 * var(--p));
  height: calc(1.4 * var(--p));
  border-radius: 50% !important;
  color: #555 !important;
}

.demo__pagina-borrar svg {
  width: calc(0.85 * var(--p));
  height: calc(0.85 * var(--p));
}

.demo__pagina-borrar:hover {
  background: #f0f0f0 !important;
}

.demo__pagina-lista {
  display: flex;
  flex-direction: column;
  padding: calc(0.4 * var(--p));
}

.demo__pagina-op {
  display: flex;
  align-items: center;
  gap: calc(0.7 * var(--p));
  height: calc(2.35 * var(--p));
  padding: 0 calc(0.75 * var(--p)) !important;
  border-radius: calc(0.6 * var(--p)) !important;
  background: #f2f2f2 !important;
  color: #1a1a1a !important;
  font-size: calc(0.95 * var(--p)) !important;
  text-align: left;
}

.demo__pagina-op:hover {
  background: #ebebeb !important;
}

.demo__pagina-op span {
  flex: 1;
}

.demo__pagina-op[hidden] {
  display: none;
}

.demo__pagina-ir-txt {
  color: #777;
}

.demo__pagina-ir-ruta {
  color: #1a1a1a;
  font-weight: 400;
}

.demo__pagina-check {
  width: calc(1.05 * var(--p));
  height: calc(1.05 * var(--p));
}

.demo__pagina-ajustes {
  width: calc(1.05 * var(--p));
  height: calc(1.05 * var(--p));
  color: #6b6b6b;
}

.demo__pagina-sel .demo__chev {
  /* Más pequeño que el monitor (08/10, «no tan grande»). */
  right: calc(1.15 * var(--p));
  width: calc(1.05 * var(--p));
  height: calc(1.05 * var(--p));
  stroke-width: 1.8;
}

/* LAS HERRAMIENTAS DE LA SECCIÓN: una columna en el hueco de la izquierda,
   centrada en él y con su primer botón a la altura del borde de arriba del
   apartado (lo coloca prueba.js). Iconos oscuros, sin caja, como en la
   referencia. */
.demo__sec-herr {
  position: absolute;
  z-index: 3;
  /* Pegada al lienzo (08/10, pedido): su centro a 1,6 unidades del canto
     izquierdo de la ventana, y los dos botones casi juntos. */
  left: calc(4.33 * var(--p));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.5 * var(--p));
  transform: translateX(-50%);
  color: #2b2b2b;
}

.demo__sec-herr[hidden] {
  display: none;
}

.demo__sec-herr button {
  display: grid;
  place-items: center;
  width: calc(2.2 * var(--p));
  height: calc(2.2 * var(--p));
  border-radius: 50% !important;
  transition: background-color .15s ease;
}

.demo__sec-herr button:disabled {
  opacity: 0.3;
  cursor: default !important;
}

.demo__sec-herr[data-fija] .demo__sec-mover {
  display: none;
}

.demo__sec-herr button:not(:disabled):hover {
  background: rgb(0 0 0 / 0.06) !important;
}

.demo__sec-herr svg {
  width: calc(1.35 * var(--p));
  height: calc(1.35 * var(--p));
}

/* EL BOTÓN DE CAPAS: abajo del hueco de la izquierda, centrado en él. Solo
   el icono, sin pastilla (08/10, pedido); al pasar el ratón, un fondo
   gris suave como los de la columna de la sección. */
.demo__capas {
  position: absolute;
  z-index: 3;
  left: calc(2.96 * var(--p));
  bottom: calc(1.6 * var(--p));
  display: grid;
  place-items: center;
  width: calc(2.9 * var(--p));
  height: calc(2.9 * var(--p));
  transform: translateX(-50%);
  border-radius: 50% !important;
  color: #2b2b2b !important;
  transition: background-color .15s ease;
}

.demo__capas svg {
  width: calc(1.6 * var(--p));
  height: calc(1.6 * var(--p));
}

.demo__capas:hover {
  background: rgb(0 0 0 / 0.06) !important;
}

/* LA BARRA DE DESPLAZAMIENTO DEL LIENZO, POR FUERA (08/10, pedido). La del
   editor de verdad (packages/editor/src/estilos.css, .lienzo__barra): fina,
   un carril que casi no se ve y el pulgar, que es lo que se lee y se puede
   agarrar. Va en el hueco entre la ventana y la caja de Lym, que está
   vacío; la coloca prueba.js. 5 px y no 6: es la escala del resto del
   chrome de la demo. */
/* MÁS FINA Y DE CRISTAL (08/10, pedido): 3 px, y la receta de «Agregar» y
   de la caja de Lym —blanco medio transparente con lo de detrás
   desenfocado y saturado, el brillo blanco del canto, el canto azulado de
   medio píxel y dos sombras—. El carril es el mismo vidrio casi sin
   cuerpo; el pulgar lleva el cuerpo entero, que es lo que se lee. Como
   3 px se agarran mal, la zona de agarre es más ancha que lo que se ve
   (el ::before), sin mover nada. */
.demo__barra {
  position: absolute;
  z-index: 5;
  width: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(4px) saturate(1.8);
  backdrop-filter: blur(4px) saturate(1.8);
  box-shadow:
    inset 0 0 0 0.5px rgb(255 255 255 / 0.7),
    0 0 0 0.5px rgb(150 160 190 / 0.18);
}

.demo__barra::before {
  content: "";
  position: absolute;
  inset: 0 -5px;
}

.demo__barra[hidden] {
  display: none;
}

.demo__barra-pulgar {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 999px;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.5));
  -webkit-backdrop-filter: blur(6px) saturate(1.8);
  backdrop-filter: blur(6px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.4),
    0 0 0 0.5px rgb(120 135 175 / 0.45),
    0 1px 2px rgb(30 40 80 / 0.12),
    0 2px 6px rgb(40 60 120 / 0.14);
  touch-action: none;
  transition: box-shadow .15s ease;
}

/* La zona de agarre del pulgar, como la del carril. */
.demo__barra-pulgar::before {
  content: "";
  position: absolute;
  inset: 0 -5px;
}

.demo__barra-pulgar:hover,
.demo__barra-pulgar.is-cogido {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.4),
    0 0 0 0.5px rgb(90 110 170 / 0.7),
    0 1px 2px rgb(30 40 80 / 0.16),
    0 2px 8px rgb(40 60 120 / 0.22);
}

/* ── EL PANEL DE LYM ── El saludo, las tres propuestas y la caja de
   escribir abajo. Va sobre el gris de la aplicación. */
/* EL DEGRADADO AZUL (08/10, referencia): el panel va de casi blanco
   arriba (250) a un azul muy claro abajo (240, 246, 254); por su canto
   izquierdo, una sombra azulada que lo separa de la ventana; y detrás de
   la caja de escribir, un resplandor azul. Colores medidos en la imagen
   y bajados dos veces (08/10, «un poco menos»): hoy es menos de la mitad
   de lo que mide la referencia.
   Empieza justo debajo de la barra de arriba, así que también va detrás
   de la cabecera de Lym (la fila se pinta encima, ver .demo__fila). */
.demo__lym {
  position: absolute;
  left: calc(76.08 * var(--p));
  right: 0;
  top: calc(3.88 * var(--p) + 1px);
  bottom: 0;
  text-align: center;
  /* SIN FONDO PROPIO NI CANTO (08/10, pedido: «que sea el mismo
     apartado, sin cortes»): el degradado lo pinta `.demo::before`, que se
     funde con el gris de la izquierda en vez de acabar en una raya. */
  isolation: isolate;
}

/* EL DEGRADADO DEL PANEL DE LYM, SIN BORDE: el mismo de antes (casi
   blanco arriba, azul muy claro abajo), pero empieza bastante antes del
   panel y se va haciendo transparente hacia la izquierda, así que no hay
   ningún sitio donde se vea que el panel empieza. Va debajo de todo —la
   ventana de la página lo tapa donde se cruzan—. */
.demo::before {
  content: "";
  position: absolute;
  top: calc(3.88 * var(--p) + 1px);
  right: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(to bottom, #fafafa 0%, #f9f9fa 40%, #f6f7fb 75%, #f4f6fc 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  pointer-events: none;
}

/* Y UN POCO DEL MISMO DEGRADADO EN EL HUECO DE LA IZQUIERDA (08/10,
   pedido), en espejo y más flojo, para que los dos lados de la ventana
   se lean como una sola superficie. Por debajo de todo (`z-index: -1`
   dentro del marco, que hace de contexto). */
.demo::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(3.88 * var(--p) + 1px);
  left: 0;
  bottom: 0;
  width: 22%;
  background: linear-gradient(to bottom, #fafafa 0%, #f9f9fa 40%, #f6f7fb 75%, #f4f6fc 100%);
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 60%);
  mask-image: linear-gradient(to left, transparent 0%, #000 60%);
  pointer-events: none;
}

/* LA PREGUNTA DE LYM (08/10, referencia): en negro, en tres líneas y un
   poco por encima del centro del panel. Sustituye al saludo, la pregunta
   pequeña y los tres chips. */
.demo__lym-saludo {
  margin: calc(18.12 * var(--p)) 0 0;
  color: #111;
  font-size: calc(1.8 * var(--p));
  font-weight: 400;
  line-height: 1.22;
}

.demo__lym-caja {
  position: absolute;
  left: calc(1.51 * var(--p));
  width: calc(20.69 * var(--p));
  top: calc(38.15 * var(--p));
  height: calc(7.2 * var(--p));
  margin: 0;
  border-radius: calc(1.08 * var(--p));
  text-align: left;
  /* LIQUID GLASS (08/10, pedido: «tipo Apple, muy realista»). Las cuatro
     cosas que hacen que se lea como vidrio y no como plástico blanco —la
     misma receta que las barras del editor de verdad (§41)—:
       1. SE VE A TRAVÉS: blanco al 55 % con el fondo desenfocado detrás.
       2. SATURACIÓN: lo de detrás se cuela teñido, no gris.
       3. BRILLO ESPECULAR: una línea blanca por dentro del canto de arriba
          y otra más floja abajo, el reflejo del borde de una pieza de
          vidrio.
       4. DOS SOMBRAS: una corta pegada al canto y otra ancha y suave.
     Y un velo de luz en diagonal, más claro arriba a la izquierda, que es
     lo que le da volumen. El canto es BLANCO: el borde de un vidrio
     devuelve luz, no sombra. */
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.18) 45%, rgb(255 255 255 / 0.32) 100%),
    rgb(255 255 255 / 0.42);
  -webkit-backdrop-filter: blur(calc(2.2 * var(--p))) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(calc(2.2 * var(--p))) saturate(1.9) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.45),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.7),
    0 0 0 0.5px rgb(150 160 190 / 0.28),
    0 1px 2px rgb(30 40 80 / 0.08),
    0 calc(0.8 * var(--p)) calc(2.4 * var(--p)) rgb(40 60 120 / 0.12);
}

/* EL RESPLANDOR AZUL DE ABAJO NO ACABA EN EL CANTO DEL PANEL (08/10,
   pedido). Era un fondo del panel y se cortaba en recto en su borde
   izquierdo; ahora es una pieza aparte, en el mismo sitio y con la misma
   fuerza, que se sale por ese lado y se desvanece sola. */
.demo__lym::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -35%;
  right: -35%;
  top: 66%;
  bottom: -14%;
  background: radial-gradient(closest-side, rgb(196 214 255 / 0.22), rgb(196 214 255 / 0.1) 55%, rgb(196 214 255 / 0) 100%);
  pointer-events: none;
}

/* Lo que se ve a través: sin algo de color detrás, un cristal no se
   distingue de un blanco liso. Tres manchas suaves (azul, lila, celeste)
   solo debajo de la caja, que el desenfoque convierte en luz teñida. */
.demo__lym::after {
  content: "";
  position: absolute;
  left: calc(2 * var(--p));
  width: calc(19.7 * var(--p));
  top: calc(37.2 * var(--p));
  height: calc(9 * var(--p));
  z-index: 0;
  background:
    radial-gradient(circle at 22% 60%, rgb(110 150 255 / 0.55), rgb(110 150 255 / 0) 45%),
    radial-gradient(circle at 70% 35%, rgb(185 140 255 / 0.4), rgb(185 140 255 / 0) 45%),
    radial-gradient(circle at 88% 85%, rgb(120 210 255 / 0.45), rgb(120 210 255 / 0) 40%);
  filter: blur(calc(0.8 * var(--p)));
  pointer-events: none;
}

.demo__lym-caja {
  z-index: 1;
}

.demo__lym-campo {
  position: absolute;
  left: calc(1.4 * var(--p));
  right: calc(1.4 * var(--p));
  top: calc(1.5 * var(--p));
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: #222;
  font: inherit;
  font-size: calc(1.13 * var(--p));
}

.demo__lym-campo::placeholder {
  color: #969696;
}

.demo__lym-pie {
  position: absolute;
  left: calc(1.3 * var(--p));
  right: calc(0.9 * var(--p));
  bottom: calc(0.95 * var(--p));
  display: flex;
  align-items: center;
  gap: calc(1.1 * var(--p));
  color: #363636;
}

.demo__lym-pie svg {
  width: calc(1.0 * var(--p));
  height: calc(1.0 * var(--p));
}

.demo__lym-pie > :first-child svg {
  width: calc(1.35 * var(--p));
  height: calc(1.35 * var(--p));
}

.demo__lym-nivel {
  display: inline-flex;
  align-items: center;
  gap: calc(0.3 * var(--p));
  margin-left: auto;
  font-size: calc(1.04 * var(--p)) !important;
}

/* ── EL ESFUERZO: EL DESLIZADOR DE LA CASA (08/10, pedido) ─────────
   Copiado de styles/18-controles-ia.css (.tiendas-esfuerzo y compañía):
   la cápsula blanca con su canto, la línea gris con cuatro puntos, el
   relleno azul hasta el nivel elegido y el círculo blanco que viaja. En
   «Máximo», las ondas de color y las motas que suben, como allí. Los
   números de allí son píxeles; aquí van en `--e`, un píxel de allí a la
   escala de este editor. Se abre HACIA ARRIBA: la caja está abajo del
   todo y por debajo no cabe. */
.demo__esf {
  --e: calc(var(--p) * 0.085);
  --esf-viaje: .34s;
  --esf-curva: cubic-bezier(.4, 0, .2, 1);
  --esf-punto-sobre-azul: rgb(255 255 255 / .30);
  --esf-punto-sobre-vacio: rgb(50 65 130 / .4);
  position: relative;
  margin-left: auto;
  display: inline-flex;
}

.demo__esf .demo__lym-nivel {
  position: relative;
  margin-left: 0;
  overflow: hidden;
}

.demo__esf-label {
  display: inline-block;
  white-space: nowrap;
  transition:
    transform .18s cubic-bezier(.32, .72, 0, 1),
    filter .18s ease,
    opacity .18s ease;
}

/* El nombre nuevo entra por abajo y el viejo se va por arriba, los dos
   desenfocándose: el relevo de la etiqueta de la casa. */
.demo__esf-label.esf-entra {
  transition: none;
  transform: translateY(70%);
  filter: blur(1.6px);
  opacity: 0;
}

.demo__esf-fantasma {
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  transition:
    transform .18s cubic-bezier(.32, .72, 0, 1),
    filter .18s ease,
    opacity .18s ease;
}

.demo__esf-fantasma.se-va {
  transform: translateY(-70%);
  filter: blur(1.6px);
  opacity: 0;
}

.demo__esf-panel {
  --esf-relleno-ancho: calc(10.5 * var(--e) + (100% - 21 * var(--e)) * var(--paso, 1) / 3);
  position: absolute;
  z-index: 25;
  right: calc(-1 * var(--p));
  bottom: calc(100% + 6 * var(--e));
  width: calc(186 * var(--e));
  height: calc(44 * var(--e));
  display: flex;
  align-items: center;
  padding: 0 calc(14 * var(--e));
  border-radius: calc(22 * var(--e));
  /* DE CRISTAL Y DEL COLOR DEL PANEL (08/10, pedido). La receta de la caja
     del chat —blanco medio transparente, lo de detrás desenfocado y
     saturado, brillo blanco en el canto de arriba y dos sombras— con el
     tinte del panel de Lym: un velo azul y lila muy suave, los mismos tonos
     del degradado de detrás, en vez de un blanco liso que no casaba. */
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.7) 0%, rgb(255 255 255 / 0.4) 50%, rgb(255 255 255 / 0.55) 100%),
    linear-gradient(100deg, rgb(214 226 255 / 0.72), rgb(232 222 255 / 0.68) 55%, rgb(214 236 255 / 0.68));
  /* Más desenfoque y un velo más denso que en la caja: va encima del
     texto de la caja, y con menos se leía «Pide lo que sea» a través. */
  -webkit-backdrop-filter: blur(calc(30 * var(--e))) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(calc(30 * var(--e))) saturate(1.9) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.45),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.7),
    0 0 0 0.5px rgb(150 160 200 / 0.3),
    0 1px 2px rgb(30 40 80 / 0.08),
    0 calc(6 * var(--e)) calc(18 * var(--e)) rgb(60 80 160 / 0.16);
  transform-origin: calc(100% - var(--p)) 100%;
  transition: opacity .11s ease, transform .15s cubic-bezier(.4, 0, .2, 1);
}

.demo__esf-panel[hidden] {
  display: none;
}

/* Con la cápsula abierta, el texto de la caja se aparta. Dentro de la caja
   —que ya es un cristal— el desenfoque de la cápsula no alcanza al texto
   que tiene justo debajo (medido: «Pide lo que sea» se leía a través), así
   que se funde en vez de verse a medias. */
.demo__lym-campo {
  transition: opacity .15s ease;
}

.demo__lym-caja:has(.demo__esf-panel:not([hidden])) .demo__lym-campo {
  opacity: 0;
}


/* Abrir y cerrar: crece desde el botón y se encoge hacia él. */
.demo__esf[data-entrando] .demo__esf-panel,
.demo__esf[data-cerrando] .demo__esf-panel {
  opacity: 0;
  transform: translateY(6px) scale(.6);
}

.demo__esf[data-entrando] .demo__esf-panel {
  transition: none;
}

.demo__esf-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: calc(18 * var(--e));
  margin: 0;
  border-radius: calc(12 * var(--e));
  cursor: pointer;
  --esf-r0: calc(1.2 * var(--e));
  --esf-r1: calc(1.2 * var(--e));
  --esf-r2: calc(1.2 * var(--e));
  --esf-r3: calc(1.2 * var(--e));
  --t: calc(21 * var(--e));
  --m: calc(10.5 * var(--e));
  background:
    radial-gradient(circle at var(--m) 50%, var(--esf-punto-sobre-azul) 0 var(--esf-r0), transparent calc(var(--esf-r0) + .7px)),
    radial-gradient(circle at calc(var(--m) + (100% - var(--t)) / 3) 50%, var(--esf-punto-sobre-azul) 0 var(--esf-r1), transparent calc(var(--esf-r1) + .7px)),
    radial-gradient(circle at calc(var(--m) + (100% - var(--t)) * 2 / 3) 50%, var(--esf-punto-sobre-azul) 0 var(--esf-r2), transparent calc(var(--esf-r2) + .7px)),
    radial-gradient(circle at calc(100% - var(--m)) 50%, var(--esf-punto-sobre-azul) 0 var(--esf-r3), transparent calc(var(--esf-r3) + .7px)),
    linear-gradient(rgb(57 126 248), rgb(57 126 248)),
    linear-gradient(rgb(70 90 160 / .12), rgb(70 90 160 / .12)),
    radial-gradient(circle at var(--m) 50%, var(--esf-punto-sobre-vacio) 0 var(--esf-r0), transparent calc(var(--esf-r0) + .7px)),
    radial-gradient(circle at calc(var(--m) + (100% - var(--t)) / 3) 50%, var(--esf-punto-sobre-vacio) 0 var(--esf-r1), transparent calc(var(--esf-r1) + .7px)),
    radial-gradient(circle at calc(var(--m) + (100% - var(--t)) * 2 / 3) 50%, var(--esf-punto-sobre-vacio) 0 var(--esf-r2), transparent calc(var(--esf-r2) + .7px)),
    radial-gradient(circle at calc(100% - var(--m)) 50%, var(--esf-punto-sobre-vacio) 0 var(--esf-r3), transparent calc(var(--esf-r3) + .7px));
  background-size:
    auto, auto, auto, auto,
    var(--esf-relleno-ancho) 100%,
    auto,
    auto, auto, auto, auto;
  background-repeat: no-repeat;
  transition: background-size var(--esf-viaje) var(--esf-curva);
}

.demo__esf-input[data-punto="0"] { --esf-r0: calc(1.8 * var(--e)); }
.demo__esf-input[data-punto="1"] { --esf-r1: calc(1.8 * var(--e)); }
.demo__esf-input[data-punto="2"] { --esf-r2: calc(1.8 * var(--e)); }
.demo__esf-input[data-punto="3"] { --esf-r3: calc(1.8 * var(--e)); }

/* El tirador de verdad es invisible: el que se ve es el círculo de
   abajo, que sí se puede animar. */
.demo__esf-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(21 * var(--e));
  height: calc(21 * var(--e));
  border-radius: 50%;
  background: transparent;
}

.demo__esf-input::-moz-range-thumb {
  width: calc(21 * var(--e));
  height: calc(21 * var(--e));
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.demo__esf-tirador {
  position: absolute;
  top: 50%;
  left: calc(14 * var(--e) + (100% - 28 * var(--e) - 21 * var(--e)) * var(--paso, 1) / 3);
  width: calc(21 * var(--e));
  height: calc(21 * var(--e));
  margin-top: calc(-10.5 * var(--e));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgb(0 0 0 / .18);
  pointer-events: none;
  transition: left var(--esf-viaje) var(--esf-curva), transform .15s cubic-bezier(.32, .72, 0, 1);
}

.demo__esf-panel[data-sobre="tirador"] .demo__esf-tirador { transform: scale(1.12); }

.demo__esf-panel[data-arrastrando] .demo__esf-tirador,
.demo__esf-panel[data-arrastrando] .demo__esf-ondas,
.demo__esf-panel[data-arrastrando] .demo__esf-carga,
.demo__esf-panel[data-arrastrando] .demo__esf-input { transition: none; }

/* «MÁXIMO»: ondas de color y motas que suben por el relleno azul. */
.demo__esf-carga,
.demo__esf-ondas {
  position: absolute;
  top: 50%;
  left: calc(14 * var(--e));
  right: calc(14 * var(--e));
  height: calc(18 * var(--e));
  margin-top: calc(-9 * var(--e));
  border-radius: calc(12 * var(--e));
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 calc(100% - var(--esf-relleno-ancho)) 0 0);
  transition: opacity .18s ease, clip-path var(--esf-viaje) var(--esf-curva);
}

.demo__esf[data-paso="3"] .demo__esf-carga,
.demo__esf[data-paso="3"] .demo__esf-ondas { opacity: 1; }

.demo__esf-carga {
  background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .16) 0 1.8px, transparent 2.5px);
  background-size: 78px 30px;
  animation: demo-esf-carga-lenta 4.6s linear infinite;
}

.demo__esf-carga::before,
.demo__esf-carga::after {
  content: "";
  position: absolute;
  inset: -40px -90px;
  background-repeat: repeat;
}

.demo__esf-carga::before {
  background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .32) 0 1.4px, transparent 2px);
  background-size: 46px 26px;
  animation: demo-esf-carga-menuda 2.8s linear infinite;
}

.demo__esf-carga::after {
  background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .2) 0 2.4px, transparent 3.1px);
  background-size: 62px 22px;
  animation: demo-esf-carga-gruesa 3.8s linear infinite;
}

@keyframes demo-esf-carga-menuda { to { transform: translate(46px, -26px); } }
@keyframes demo-esf-carga-gruesa { to { transform: translate(-62px, 22px); } }
@keyframes demo-esf-carga-lenta { to { background-position: 78px 30px; } }

.demo__esf-ondas {
  --esf-onda-celeste: color-mix(in srgb, rgb(57 126 248) 40%, #62b8ff);
  --esf-onda-indigo: color-mix(in srgb, rgb(57 126 248) 35%, #776bfa);
  --esf-onda-profunda: color-mix(in srgb, rgb(57 126 248) 40%, #204bbf);
}

.demo__esf-ondas::before,
.demo__esf-ondas::after {
  content: "";
  position: absolute;
  inset: -22px -50px;
  background-repeat: no-repeat;
}

.demo__esf-ondas::before {
  opacity: .68;
  background-image:
    radial-gradient(ellipse 50% 85% at 18% 75%, transparent 30%, var(--esf-onda-celeste) 52%, transparent 74%),
    radial-gradient(ellipse 48% 85% at 82% 24%, transparent 24%, var(--esf-onda-indigo) 50%, transparent 76%);
  animation: demo-esf-onda-clara 6s ease-in-out -2s infinite alternate;
}

.demo__esf-ondas::after {
  opacity: .5;
  background-image:
    radial-gradient(ellipse 43% 95% at 34% 22%, var(--esf-onda-profunda), transparent 74%),
    radial-gradient(ellipse 38% 80% at 80% 74%, var(--esf-onda-celeste), transparent 78%);
  animation: demo-esf-onda-profunda 8.5s ease-in-out -4.25s infinite alternate;
}

@keyframes demo-esf-onda-clara {
  from { transform: translate(-34px, -13px) rotate(-7deg); }
  to { transform: translate(34px, 14px) rotate(7deg); }
}

@keyframes demo-esf-onda-profunda {
  from { transform: translate(32px, 14px) rotate(5deg); }
  to { transform: translate(-32px, -14px) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .demo__esf-panel,
  .demo__esf-tirador,
  .demo__esf-input { transition: none; }
  .demo__esf-carga,
  .demo__esf-ondas { display: none; }
}

.demo__lym-nivel .demo__chev {
  width: calc(0.7 * var(--p));
  height: calc(0.7 * var(--p));
}

.demo__lym-enviar {
  display: grid;
  place-items: center;
  width: calc(1.62 * var(--p));
  height: calc(1.62 * var(--p));
  border-radius: 50% !important;
  background: #cdcecf !important;
  color: #fff !important;
}

.demo__lym-enviar svg {
  width: calc(0.95 * var(--p)) !important;
  height: calc(0.95 * var(--p)) !important;
}

@media (hover: hover) {
  .demo__menu:hover,
  .demo__vista:hover,
  .demo__lym-iconos button:hover,
  .demo__hist:not(:disabled):hover {
    opacity: 0.7;
  }

  .demo__publicar:hover {
    background: #1554c4 !important;
  }

  .demo__agregar:hover {
    background: linear-gradient(160deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.6)) !important;
  }
}

/* ── EL LIENZO Y LA TIENDA ──────────────────────────────────────── */

/* En ordenador la tienda ocupa el lienzo entero; en tablet y móvil se
   estrecha en medio de un gris, como en el editor de verdad. Si la página
   no cabe, el lienzo se desliza (sin barra: no hay sitio para ella). */
/* LA TIENDA VA A LA ESCALA DE LA VENTANA: sus medidas están escritas en
   «1 % del ancho de su página», y la página ya no es el marco entero sino
   el hueco de la ventana, que mide el 69,61 % del marco. Por eso aquí
   `--p` se redefine; lo mismo, en prueba.js (ESCALA_TIENDA). */
.demo__lienzo {
  --p: calc(9.6 * var(--u) * 0.6961);
  height: calc(100% - 2.59 * 9.6 * var(--u));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  background: #f0f0f0;
}

.demo__lienzo::-webkit-scrollbar {
  display: none;
}

/* La ventana se sale por abajo del marco, así que en los tres tamaños la
   tienda es más alta que lo que se ve y el lienzo se desliza. */

.demo__web {
  display: flex;
  flex-direction: column;
  --ancho: 100%;
  width: var(--ancho);
  min-height: 100%;
  margin: 0 auto;
  /* El papel de Solstice Rituals (11/10): textura que se repite, a la
     escala de la tienda. */
  background: #f5f5f0 url(resources/prueba/papel.webp?v=2a9b883c) 0 0 / calc(44.9 * var(--p)) auto repeat;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.demo[data-disp="tablet"] .demo__web { --ancho: 56%; }
.demo[data-disp="movil"] .demo__web { --ancho: 30%; }

/* Lo que se puede tocar enseña que se puede tocar: los elementos se
   arrastran, así que llevan la mano de mover. Y la página no se deja
   seleccionar como texto, que arrastrar un título lo subrayaría entero;
   solo lo que se está editando. */
.demo__web {
  user-select: none;
  -webkit-user-select: none;
}

.demo__web [data-tipo] {
  cursor: default;
}

/* Solo se mueve lo de dentro del apartado abierto. */
.demo--dentro .demo__web [data-tipo] {
  cursor: move;
}

.demo__web img {
  -webkit-user-drag: none;
}

.demo__web [contenteditable] {
  cursor: text;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.demo--moviendo,
.demo--moviendo * {
  cursor: move !important;
}

/* MIENTRAS SE MUEVE DESAPARECE EL CHROME DE LA SELECCIÓN (§44 del editor
   de verdad): el marco, los contornos de varios y los de pasar el ratón
   taparían justo lo que estás colocando. Arrastrando se quedan las guías
   y las medidas; CON LAS FLECHAS se van también las medidas (06/10,
   pedido) y solo quedan las guías rosas. */
.demo--moviendo .demo__marco,
.demo--flechas .demo__marco,
.demo--flechas .demo__sep {
  display: none !important;
}

/* ══ LA TIENDA DE EJEMPLO: SOLSTICE RITUALS (11/10) ══════════════════
   Sustituye a Verplant. Primero se copió la referencia del usuario
   (Pictures/Gemini_Generated_Image_v78rvbv78rvbv78r.jpg) y se pidió que se
   pareciera MENOS a la tienda de antes y que tuviera más que deslizar: el
   logo pasa a la fila del menú, los productos son uno destacado y tres
   alrededor, y debajo hay una banda con la frase de la marca, tres
   ventajas, «Sobre nosotros» con foto, el boletín y el pie.
   Las fotos y el logo están recortados de la referencia; el papel de fondo
   es una textura generada que se repite sin costuras
   (resources/prueba/papel.webp). Las letras son libres y viajan con la
   página: Roboto Condensed (menú, precios, textos cortos), EB Garamond
   (nombres y párrafos) y Playfair Display (títulos).
   Todo va en `--p`: 1 % del ancho de la ventana, así que la tienda escala
   con la pantalla sin descolocarse. */

.demo__web {
  --tinta-tienda: #1d1b17;
  --suave-tienda: #5f594d;
  --crema-tienda: rgb(240 237 222);
  --canto-tienda: rgb(206 200 186);
  --oscuro-tienda: #2b2823;
  color: var(--tinta-tienda);
}

/* LA CABECERA: logo, menú y cuenta en una sola fila. */
.demo__cabecera {
  display: flex;
  align-items: center;
  height: calc(7.6 * var(--p));
  padding: 0 calc(3.4 * var(--p));
  border-bottom: 1px solid rgb(206 200 186 / 0.6);
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
}

.demo__logo {
  display: block;
  flex: none;
  width: calc(17 * var(--p));
  height: auto;
}

.demo__nav {
  display: flex;
  gap: calc(2.2 * var(--p));
  margin-left: auto;
  font-size: calc(1.42 * var(--p));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.demo__cuenta {
  display: flex;
  align-items: center;
  margin-left: calc(3.4 * var(--p));
}

.demo__entrar {
  font-size: calc(1.25 * var(--p));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.demo__icono {
  display: block;
  flex: none;
  width: calc(1.7 * var(--p));
  height: calc(1.7 * var(--p));
  margin-left: calc(0.85 * var(--p));
}

.demo__icono--lupa {
  width: calc(1.5 * var(--p));
  height: calc(1.5 * var(--p));
  margin-left: calc(1.8 * var(--p));
}

.demo__icono--menu {
  display: none;
}

/* LOS PRODUCTOS: uno grande que ocupa dos filas a la izquierda; a la
   derecha dos tarjetas y debajo una tumbada que coge las dos columnas. */
.demo__productos {
  padding: calc(2.6 * var(--p)) calc(3.4 * var(--p)) calc(4.4 * var(--p));
}

.demo__productos-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(1.6 * var(--p));
}

.demo__h {
  display: block;
  width: fit-content;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(2.4 * var(--p));
  font-weight: 400;
  line-height: 1.1;
}

.demo__ver {
  display: block;
  width: fit-content;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.3 * var(--p));
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.demo__rejilla {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: calc(1.6 * var(--p));
}

.demo__tarjeta {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.demo__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgb(205 196 181 / 0.8);
  border-radius: calc(0.6 * var(--p));
}

/* Una tarjeta normal: el nombre a la izquierda y el precio a la derecha. */
.demo__tarjeta figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(0.8 * var(--p));
  margin-top: calc(0.8 * var(--p));
}

/* Los textos miden lo que su letra: el marco que sale al pasar el ratón
   es el del texto, como en el editor. */
.demo__web [data-tipo="Texto"],
.demo__web [data-tipo="Botón"] {
  width: fit-content;
}

.demo__nombre {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: calc(1.55 * var(--p));
  line-height: 1.2;
  white-space: nowrap;
}

.demo__precio {
  display: block;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.35 * var(--p));
  line-height: 1.2;
  white-space: nowrap;
}

/* EL DESTACADO: la foto llena el alto de las dos filas y el texto va
   debajo, apilado y más grande. */
.demo__tarjeta--grande {
  grid-row: 1 / 3;
}

.demo__tarjeta--grande .demo__foto {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

.demo__tarjeta--grande figcaption {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.35 * var(--p));
  margin-top: calc(1 * var(--p));
}

.demo__etiq {
  display: block;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.05 * var(--p));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6a45;
}

.demo__tarjeta--grande .demo__nombre {
  font-size: calc(2.2 * var(--p));
}

.demo__tarjeta--grande .demo__precio {
  font-size: calc(1.55 * var(--p));
}

/* LA TUMBADA: en una caja crema, con la foto a la izquierda. */
.demo__tarjeta--ancha {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: calc(11 * var(--p)) 1fr;
  gap: calc(1.6 * var(--p));
  align-items: center;
  padding: calc(1 * var(--p));
  border: 1px solid var(--canto-tienda);
  border-radius: calc(0.8 * var(--p));
  background: var(--crema-tienda);
  box-shadow: 0 calc(0.12 * var(--p)) calc(0.3 * var(--p)) rgb(60 50 30 / 0.12);
}

.demo__tarjeta--ancha figcaption {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.45 * var(--p));
  margin: 0;
}

.demo__texto {
  display: block;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.2 * var(--p));
  line-height: 1.4;
  color: var(--suave-tienda);
}

/* LA BANDA DE LA MARCA: una frase grande sobre crema. */
.demo__ritual {
  padding: calc(6 * var(--p)) calc(12 * var(--p));
  background: var(--crema-tienda);
  text-align: center;
}

.demo__cita {
  margin: 0 auto;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(2.6 * var(--p));
  line-height: 1.3;
  text-wrap: balance;
}

.demo__firma {
  display: block;
  margin: calc(1.8 * var(--p)) auto 0;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.15 * var(--p));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave-tienda);
}

/* LAS TRES VENTAJAS */
.demo__ventajas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(3 * var(--p));
  padding: calc(5 * var(--p)) calc(3.4 * var(--p));
}

.demo__ventaja {
  display: flex;
  flex-direction: column;
  gap: calc(0.6 * var(--p));
}

.demo__icono--ventaja {
  width: calc(2.4 * var(--p));
  height: calc(2.4 * var(--p));
  margin: 0 0 calc(0.4 * var(--p));
  color: #7a6a45;
}

.demo__ventaja-t {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: calc(1.75 * var(--p));
  line-height: 1.2;
}

/* SOBRE NOSOTROS: la foto y el texto lado a lado. */
.demo__nosotros {
  display: grid;
  grid-template-columns: calc(30 * var(--p)) 1fr;
  gap: calc(4 * var(--p));
  align-items: center;
  padding: calc(1 * var(--p)) calc(3.4 * var(--p)) calc(5.5 * var(--p));
}

.demo__nosotros-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(0.8 * var(--p));
}

.demo__subtitulo {
  display: block;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(2.4 * var(--p));
  font-weight: 400;
  line-height: 1.15;
}

.demo__parrafo {
  max-width: calc(40 * var(--p));
  margin: calc(1.2 * var(--p)) 0 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: calc(1.5 * var(--p));
  line-height: 1.45;
  color: #4a463e;
}

.demo__boton {
  display: block;
  margin-top: calc(1.8 * var(--p));
  padding: calc(0.75 * var(--p)) calc(2 * var(--p));
  border: 1px solid var(--oscuro-tienda);
  border-radius: 999px;
  background: var(--oscuro-tienda);
  color: #f5f2ea;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.25 * var(--p));
  line-height: 1.2;
  white-space: nowrap;
}

.demo__boton--claro {
  background: transparent;
  color: var(--oscuro-tienda);
}

/* EL BOLETÍN */
.demo__boletin {
  padding: calc(5 * var(--p)) calc(3.4 * var(--p)) calc(5.5 * var(--p));
  border-top: 1px solid rgb(206 200 186 / 0.6);
  text-align: center;
}

.demo__boletin .demo__subtitulo,
.demo__boletin .demo__parrafo {
  margin-left: auto;
  margin-right: auto;
}

.demo__boletin-fila {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.8 * var(--p));
  margin-top: calc(1.8 * var(--p));
}

.demo__campo {
  display: block;
  width: calc(26 * var(--p)) !important;
  padding: calc(0.75 * var(--p)) calc(1.6 * var(--p));
  border: 1px solid #b9b1a0;
  border-radius: 999px;
  background: #fbfaf6;
  color: #8b8576;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
  font-size: calc(1.25 * var(--p));
  line-height: 1.2;
  text-align: left;
}

.demo__boletin .demo__boton {
  margin-top: 0;
}

/* EL PIE: oscuro, hasta el final del lienzo. */
.demo__pie {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(2 * var(--p));
  min-height: calc(7 * var(--p));
  /* ABAJO, 2,9 DE MÁS: la ventana se mete 2,83 --p por debajo del marco
     del editor (medido a 1024, 1440 y 1920), así que al bajar del todo
     ese trozo no se ve nunca. Se lo come el propio pie y no su contenido. */
  padding: calc(2.4 * var(--p)) calc(3.4 * var(--p)) calc(5.3 * var(--p));
  background: var(--oscuro-tienda);
  color: #e9e4d6;
  font-family: 'Roboto Condensed', 'Inter Demo', sans-serif;
}

.demo__pie-marca {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(1.7 * var(--p));
  white-space: nowrap;
}

.demo__pie-enlaces {
  display: flex;
  gap: calc(2 * var(--p));
  font-size: calc(1.2 * var(--p));
  white-space: nowrap;
}

.demo__pie-legal {
  display: block;
  font-size: calc(1.1 * var(--p));
  white-space: nowrap;
  opacity: 0.6;
}

/* ── TABLET ──────────────────────────────────────────────────────────
   La página mide el 56 % de la ventana: el menú se aprieta, «LOG IN» se
   queda en su icono y los productos pasan a dos columnas, con el
   destacado y la tumbada de lado a lado. */
.demo[data-disp="tablet"] .demo__cabecera {
  padding: 0 calc(2.4 * var(--p));
}

.demo[data-disp="tablet"] .demo__logo {
  width: calc(12 * var(--p));
}

.demo[data-disp="tablet"] .demo__nav {
  gap: calc(1.3 * var(--p));
  font-size: calc(1.12 * var(--p));
}

.demo[data-disp="tablet"] .demo__cuenta {
  margin-left: calc(1.6 * var(--p));
}

.demo[data-disp="tablet"] .demo__entrar {
  display: none;
}

.demo[data-disp="tablet"] .demo__icono:first-of-type {
  margin-left: 0;
}

.demo[data-disp="tablet"] .demo__productos,
.demo[data-disp="tablet"] .demo__ventajas,
.demo[data-disp="tablet"] .demo__nosotros,
.demo[data-disp="tablet"] .demo__boletin,
.demo[data-disp="tablet"] .demo__pie {
  padding-left: calc(2.4 * var(--p));
  padding-right: calc(2.4 * var(--p));
}

.demo[data-disp="tablet"] .demo__rejilla {
  grid-template-columns: 1fr 1fr;
}

/* El destacado, tumbado como la tarjeta de abajo: a lo ancho de la tablet
   su foto se estiraba por encima de su tamaño y se veía borrosa. */
.demo[data-disp="tablet"] .demo__tarjeta--grande {
  grid-row: auto;
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: calc(24 * var(--p)) 1fr;
  gap: calc(2 * var(--p));
  align-items: center;
}

.demo[data-disp="tablet"] .demo__tarjeta--grande .demo__foto {
  aspect-ratio: 1 / 1;
}

.demo[data-disp="tablet"] .demo__tarjeta--grande figcaption {
  margin-top: 0;
}

.demo[data-disp="tablet"] .demo__tarjeta--ancha {
  grid-column: 1 / 3;
}

.demo[data-disp="tablet"] .demo__nombre {
  font-size: calc(1.35 * var(--p));
}

.demo[data-disp="tablet"] .demo__ritual {
  padding: calc(5 * var(--p)) calc(5 * var(--p));
}

.demo[data-disp="tablet"] .demo__ventajas {
  gap: calc(2 * var(--p));
}

.demo[data-disp="tablet"] .demo__ventaja-t {
  font-size: calc(1.45 * var(--p));
}

.demo[data-disp="tablet"] .demo__nosotros {
  grid-template-columns: calc(20 * var(--p)) 1fr;
  gap: calc(2.4 * var(--p));
}

.demo[data-disp="tablet"] .demo__campo {
  width: calc(20 * var(--p)) !important;
}

.demo[data-disp="tablet"] .demo__pie {
  flex-wrap: wrap;
}

/* ── MÓVIL ───────────────────────────────────────────────────────────
   La página mide el 30 % de la ventana: el menú se recoge en su icono,
   todo va en una columna (los dos productos pequeños, en dos) y las
   letras se aprietan. */
.demo[data-disp="movil"] .demo__cabecera {
  height: calc(5.6 * var(--p));
  padding: 0 calc(1.6 * var(--p));
}

.demo[data-disp="movil"] .demo__logo {
  width: calc(12 * var(--p));
}

.demo[data-disp="movil"] .demo__nav,
.demo[data-disp="movil"] .demo__entrar {
  display: none;
}

.demo[data-disp="movil"] .demo__cuenta {
  margin-left: auto;
}

.demo[data-disp="movil"] .demo__icono {
  width: calc(1.45 * var(--p));
  height: calc(1.45 * var(--p));
  margin-left: calc(1 * var(--p));
}

.demo[data-disp="movil"] .demo__icono--menu {
  display: block;
}

.demo[data-disp="movil"] .demo__productos,
.demo[data-disp="movil"] .demo__ventajas,
.demo[data-disp="movil"] .demo__nosotros,
.demo[data-disp="movil"] .demo__boletin {
  padding-left: calc(1.6 * var(--p));
  padding-right: calc(1.6 * var(--p));
}

.demo[data-disp="movil"] .demo__productos {
  padding-top: calc(1.8 * var(--p));
}

.demo[data-disp="movil"] .demo__h,
.demo[data-disp="movil"] .demo__subtitulo {
  font-size: calc(1.9 * var(--p));
}

.demo[data-disp="movil"] .demo__ver {
  font-size: calc(1.05 * var(--p));
}

.demo[data-disp="movil"] .demo__rejilla {
  grid-template-columns: 1fr 1fr;
  gap: calc(1.2 * var(--p));
}

.demo[data-disp="movil"] .demo__tarjeta--grande {
  grid-row: auto;
  grid-column: 1 / 3;
}

.demo[data-disp="movil"] .demo__tarjeta--grande .demo__foto {
  flex: none;
  aspect-ratio: 4 / 3;
}

.demo[data-disp="movil"] .demo__tarjeta--ancha {
  grid-column: 1 / 3;
  grid-template-columns: calc(8 * var(--p)) 1fr;
  gap: calc(1 * var(--p));
  padding: calc(0.7 * var(--p));
}

.demo[data-disp="movil"] .demo__tarjeta figcaption {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.2 * var(--p));
  margin-top: calc(0.5 * var(--p));
}

.demo[data-disp="movil"] .demo__tarjeta--ancha figcaption {
  margin-top: 0;
}

.demo[data-disp="movil"] .demo__nombre {
  font-size: calc(1.15 * var(--p));
  white-space: normal;
}

.demo[data-disp="movil"] .demo__tarjeta--grande .demo__nombre {
  font-size: calc(1.55 * var(--p));
}

.demo[data-disp="movil"] .demo__precio,
.demo[data-disp="movil"] .demo__tarjeta--grande .demo__precio {
  font-size: calc(1.05 * var(--p));
}

.demo[data-disp="movil"] .demo__texto {
  font-size: calc(1.05 * var(--p));
}

.demo[data-disp="movil"] .demo__ritual {
  padding: calc(4 * var(--p)) calc(2 * var(--p));
}

.demo[data-disp="movil"] .demo__cita {
  font-size: calc(1.8 * var(--p));
}

.demo[data-disp="movil"] .demo__ventajas {
  grid-template-columns: 1fr;
  gap: calc(2.2 * var(--p));
  padding-top: calc(3.6 * var(--p));
  padding-bottom: calc(3.6 * var(--p));
}

.demo[data-disp="movil"] .demo__ventaja-t {
  font-size: calc(1.4 * var(--p));
}

.demo[data-disp="movil"] .demo__nosotros {
  grid-template-columns: 1fr;
  gap: calc(1.8 * var(--p));
}

.demo[data-disp="movil"] .demo__parrafo {
  font-size: calc(1.25 * var(--p));
}

.demo[data-disp="movil"] .demo__boton {
  font-size: calc(1.1 * var(--p));
}

.demo[data-disp="movil"] .demo__boletin-fila {
  flex-direction: column;
}

.demo[data-disp="movil"] .demo__campo {
  width: 100% !important;
  font-size: calc(1.1 * var(--p));
}

.demo[data-disp="movil"] .demo__pie {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1.2 * var(--p));
  padding: calc(2.4 * var(--p)) calc(1.6 * var(--p)) calc(5.3 * var(--p));
}

.demo[data-disp="movil"] .demo__pie-marca {
  font-size: calc(1.5 * var(--p));
}

.demo[data-disp="movil"] .demo__pie-enlaces {
  gap: calc(1.2 * var(--p));
  font-size: calc(1.05 * var(--p));
}

/* ── EL CHROME DEL EDITOR: MARCOS, ETIQUETAS Y TIRADORES ────────── */

/* Una capa encima del lienzo y SIN CLICS: si se los comiera, pasar el
   ratón por un marco lo apagaría. Recorta lo que se sale del lienzo. */
.demo__capa {
  position: absolute;
  top: calc(2.59 * var(--p));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  /* Por encima de lo movido o escalado, que lleva z-index 1 para
     quedar sobre sus vecinos: sin esto tapaba sus propias esquinas. */
  z-index: 2;
}

.demo__marco {
  position: absolute;
  display: none;
  border: 1px solid #397ef8;
}

.demo__marco.is-visible {
  display: block;
}

/* EL APARTADO AL PASAR POR ENCIMA: el marco de grupo del editor de
   verdad (.lienzo__grupo) — a trazos y con un velo azul muy suave, porque
   solo está diciendo «esto es una pieza». */
.demo__marco--seccion {
  border-style: dashed;
  background: rgb(57 126 248 / 0.05);
}

/* EL APARTADO EN EL QUE ESTÁS: solo su canto azul. En el editor de
   verdad (.lienzo__foco) todo lo de fuera se apaga con un velo; aquí se
   pidió que no (06/10): el resto de la tienda se queda como está. */
.demo__foco {
  position: absolute;
  display: none;
  border: 1px solid #397ef8;
}

.demo__foco.is-visible {
  display: block;
}

/* «AGREGAR SECCIÓN» Y LA PASTILLA DEL ALTO (08/10, referencia). Los dos a
   caballo del borde de abajo del apartado abierto: el botón centrado y la
   pastilla al 80 % del ancho, como en la imagen. Medidas de la referencia
   (211 × 44 el botón, 43 × 18 la pastilla) a unos dos tercios, que es la
   escala del resto del chrome de la demo (la etiqueta va a 11 px). La
   pastilla lleva el azul del marco: en la referencia era verde porque su
   marco lo era. La capa no tiene clics, así que estos dos los recuperan. */
.demo__sec-agregar,
.demo__sec-alto {
  position: absolute;
  top: 100%;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  /* POR ENCIMA DE LOS DEMÁS MARCOS (08/10, reportado): el del apartado de
     al lado al pasar el ratón, y el de un elemento, van después en la capa
     y su línea cruzaba el botón. */
  z-index: 3;
}

/* Más pequeño (08/10, pedido): de 29 a 22 de alto y la letra a 10,5. */
.demo .demo__sec-agregar {
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: 5px;
  background: #2f5dff;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.demo .demo__sec-agregar:hover {
  background: #1f4ae6;
}

.demo__sec-agregar svg {
  width: 10px;
  height: 10px;
}

.demo__sec-alto {
  left: 80%;
  width: 28px;
  height: 12px;
  border: 1.5px solid #397ef8;
  border-radius: 999px;
  background: #fff;
  cursor: ns-resize;
  touch-action: none;
}

/* Mientras se mueve o se escala algo, fuera: tapan lo que se coloca. */
.demo--moviendo .demo__foco > *,
.demo--flechas .demo__foco > *,
.demo--escalando .demo__foco > * {
  display: none;
}

.demo--alto,
.demo--alto * {
  cursor: ns-resize !important;
}

.demo__marco--sel {
  border-width: 2px;
}

/* Cada uno de los elegidos cuando son varios: solo su contorno. */
.demo__marco--varios {
  display: block;
  border-width: 2px;
}

.demo__etiqueta {
  position: absolute;
  bottom: 100%;
  left: -1px;
  padding: 3px 6px;
  border-radius: 4px 4px 4px 0;
  background: #397ef8;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

/* La del apartado va POR DENTRO y a la DERECHA: la del elemento va
   arriba a la izquierda, y un elemento pegado a la esquina del apartado
   —el título de «Sobre nosotros», el logo— las montaba una encima de la
   otra. Y en un tono más suave, que es contexto. */
.demo__marco--seccion .demo__etiqueta {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0 0 0 4px;
  background: rgb(57 126 248 / 0.85);
}

/* Cuando arriba no cabe —un elemento pegado al techo del lienzo— la
   etiqueta se mete por dentro. */
.demo__marco--dentro .demo__etiqueta {
  top: 0;
  bottom: auto;
  border-radius: 0 0 4px 0;
}

.demo__marco--sel .demo__etiqueta {
  left: -2px;
}

/* LAS ESQUINAS ESCALAN, así que son lo único de la capa que se puede
   pulsar: la capa entera va sin clics para no comerse el ratón. */
.demo__tirador {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid #397ef8;
  border-radius: 1.5px;
  background: #fff;
  pointer-events: auto;
}

.demo__tirador--ai { top: -5px; left: -5px; cursor: nwse-resize; }
.demo__tirador--ad { top: -5px; right: -5px; cursor: nesw-resize; }
.demo__tirador--bi { bottom: -5px; left: -5px; cursor: nesw-resize; }
.demo__tirador--bd { bottom: -5px; right: -5px; cursor: nwse-resize; }

.demo__marco--sin-esquinas .demo__tirador {
  display: none;
}

/* Mientras se escala, la etiqueta se va: tapa la esquina de arriba. */
.demo--escalando .demo__etiqueta {
  display: none;
}

/* LAS GUÍAS Y LAS SEPARACIONES: las del editor de verdad, copiadas de
   packages/editor/src/estilos.css (.lienzo__guia, .lienzo__sep). Rosas y
   no azules —el azul es «lo que tienes cogido»—, la del centro del
   contenedor a trazos, y el hueco con sus dos topes y su número en una
   pastilla, en verde cuando dos huecos miden lo mismo. */
.demo__guia {
  position: absolute;
  pointer-events: none;
  background: #f24d9d;
  z-index: 5;
}

.demo__guia--x { width: 1px; }
.demo__guia--y { height: 1px; }

.demo__guia--centro {
  background: none;
}

.demo__guia--centro.demo__guia--x {
  border-left: 1px dashed #f24d9d;
}

.demo__guia--centro.demo__guia--y {
  border-top: 1px dashed #f24d9d;
}

.demo__sep {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo__sep::before,
.demo__sep::after {
  content: '';
  position: absolute;
  background: #f24d9d;
}

.demo__sep--x {
  height: 1px;
  background: #f24d9d;
}

.demo__sep--x::before,
.demo__sep--x::after { width: 1px; height: 9px; top: -4px; }
.demo__sep--x::before { left: 0; }
.demo__sep--x::after { right: 0; }

.demo__sep--y {
  width: 1px;
  background: #f24d9d;
  flex-direction: column;
}

.demo__sep--y::before,
.demo__sep--y::after { height: 1px; width: 9px; left: -4px; }
.demo__sep--y::before { top: 0; }
.demo__sep--y::after { bottom: 0; }

.demo__sep-num {
  background: #f24d9d;
  color: #ffffff;
  font: 500 10px/1 Inter, system-ui, sans-serif;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.demo__sep--igual,
.demo__sep--igual::before,
.demo__sep--igual::after { background: #12a150; }

.demo__sep--igual .demo__sep-num { background: #12a150; }

/* EL AVISO de «Miembros» y «Publicar»: abajo en medio, y se va solo. */
.demo__aviso {
  z-index: 3;
  position: absolute;
  left: 50%;
  bottom: calc(2.2 * var(--p));
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgb(20 20 20 / 0.88);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.demo__aviso.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* EN PANTALLAS NORMALES (menos de 1,5 puntos por píxel) MEDIO PÍXEL NO
   SE VE IGUAL EN TODOS LOS NAVEGADORES: Firefox no pinta la sombra
   interior de medio píxel sobre un radio de pastilla (06/10, medido). Ahí
   va un borde de 1 px entero, más claro para que pese lo mismo. Va al
   final de la hoja para ganar a las reglas de cada pieza. */
@media (max-resolution: 1.49dppx) {
  .demo__pagina-sel {
    border: 1px solid #d6d6d6 !important;
    box-shadow: none;
  }
}

/* ── EN MÓVIL NO SALE ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .prueba {
    display: none;
  }
}

/* ── EL MENÚ DE «AGREGAR» (09/10, pedido con referencia) ─────────────
   Al pulsar «Agregar» caen debajo tres tarjetas —Elementos, Secciones,
   Páginas—, UNA DETRÁS DE OTRA y de arriba abajo, y se recogen todas a la
   vez al cerrar: abrir se mira, cerrar no hace esperar a nadie. Sin los
   dibujos de la izquierda de la imagen (pedido así).
   EL CRISTAL es la receta de «Agregar» con más cuerpo: blanco medio
   transparente, lo de detrás desenfocado y teñido (saturate), el brillo
   del canto de arriba y dos sombras, contacto y ambiente (§41).
   Solo se animan opacidad y posición: un `filter` en la misma pieza que
   el `backdrop-filter` haría parpadear el cristal en algunos navegadores. */
/* Cuelga de la fila, al lado de su botón: así cae justo debajo de él. */
.demo__fila > .demo__agregar-menu {
  position: absolute;
  z-index: 30;
  left: calc(1.29 * var(--p));
  top: calc(3.6 * var(--p));
  transform: none;
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--p));
  width: calc(13.6 * var(--p));
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .18s;
}

/* LO QUE SALE AL PASAR POR UNA SECCIÓN QUEDA DEBAJO (09/10, pedido): la
   fila es su propio contexto de apilado (z-index 2), así que el 30 del
   menú solo cuenta dentro de ella, y la columna de la sección (z 3) le
   pasaba por encima. Con el menú abierto, la fila entera sube. */
.demo--agregar .demo__fila {
  z-index: 30;
}

.demo--agregar .demo__fila > .demo__agregar-menu {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.demo .demo__agregar-op {
  display: flex;
  align-items: center;
  gap: calc(1.1 * var(--p));
  height: calc(4.6 * var(--p));
  padding: 0 calc(1.35 * var(--p)) 0 calc(0.85 * var(--p)) !important;
  border: 0 !important;
  border-radius: calc(1 * var(--p)) !important;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5)) !important;
  -webkit-backdrop-filter: blur(calc(1.4 * var(--p))) saturate(1.8);
  backdrop-filter: blur(calc(1.4 * var(--p))) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.45),
    0 0 0 0.5px rgb(150 160 190 / 0.32),
    0 1px 2px rgb(30 40 80 / 0.08),
    0 calc(0.5 * var(--p)) calc(1.6 * var(--p)) rgb(40 60 120 / 0.12);
  color: #333334 !important;
  font-size: calc(1.08 * var(--p)) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(calc(-0.9 * var(--p))) scale(0.97);
  transform-origin: 50% 0;
  transition:
    opacity .14s ease-in,
    transform .18s ease-in,
    background-color .15s ease,
    box-shadow .15s ease;
}

.demo--agregar .demo__agregar-op {
  opacity: 1;
  transform: none;
  transition:
    opacity .26s ease-out,
    transform .38s cubic-bezier(.2, .9, .25, 1.12),
    box-shadow .15s ease;
}

/* De arriba abajo: cada una sale 55 ms después de la de encima. */
.demo--agregar .demo__agregar-op:nth-child(2) { transition-delay: 55ms, 55ms, 0s; }
.demo--agregar .demo__agregar-op:nth-child(3) { transition-delay: 110ms, 110ms, 0s; }

.demo .demo__agregar-op:hover {
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.68)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 1),
    inset 0 -1px 0 rgb(255 255 255 / 0.5),
    0 0 0 0.5px rgb(140 150 185 / 0.4),
    0 1px 2px rgb(30 40 80 / 0.1),
    0 calc(0.7 * var(--p)) calc(2 * var(--p)) rgb(40 60 120 / 0.16);
}

.demo .demo__agregar-op:active {
  transform: scale(0.985);
}

/* «Agregar» abierto se queda hundido, para que se sepa de dónde cuelga. */
.demo--agregar .demo__agregar {
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.7)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .demo .demo__agregar-op,
  .demo--agregar .demo__agregar-op { transform: none; transition: opacity .12s linear; }
}

/* ── LOS DIBUJOS DE LAS TARJETAS (09/10, pedido con la misma referencia):
   cada uno son dos o tres piezas apiladas —hojas, tarjetas, un cursor—,
   y cada pieza es CRISTAL: medio transparente, con su brillo en el canto
   y lo que tiene detrás desenfocado. Dentro de la tarjeta ese desenfoque
   solo alcanza a las piezas de debajo (la tarjeta ya es un backdrop root,
   §41), que es justo lo que se quiere: la hoja de delante deja ver la de
   atrás. AL PASAR EL RATÓN se mueven un poco —se abren, giran o se
   asoman— con un muelle suave; nada que distraiga.
   (Se probó una versión propia en azul, menos parecida a la referencia,
   y se pidió volver a esta.) */
.demo__ico {
  position: relative;
  flex: none;
  /* Un poco más pequeño (09/10, pedido): era 3,7 x 3,2. */
  width: calc(3.1 * var(--p));
  height: calc(2.7 * var(--p));
}

.demo__ico-capa {
  position: absolute;
  display: block;
  border-radius: calc(0.32 * var(--p));
  transition: transform .45s cubic-bezier(.3, 1.45, .5, 1);
}

.demo__ico-capa svg { display: block; width: 100%; height: 100%; }

/* El cristal de cada pieza, claro u oscuro. */
.demo__ico-hoja, .demo__ico-tarjeta, .demo__ico-pag2, .demo__ico-pag1, .demo__ico-boton {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.48));
  -webkit-backdrop-filter: blur(calc(0.35 * var(--p))) saturate(1.8);
  backdrop-filter: blur(calc(0.35 * var(--p))) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.5),
    0 0 0 0.5px rgb(120 135 160 / 0.25),
    0 calc(0.15 * var(--p)) calc(0.45 * var(--p)) rgb(30 50 40 / 0.16);
}

.demo__ico-fondo, .demo__ico-pag3 {
  background: linear-gradient(155deg, rgb(48 112 80 / 0.92), rgb(24 78 52 / 0.78));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 calc(0.15 * var(--p)) calc(0.45 * var(--p)) rgb(20 50 35 / 0.2);
}

/* Lo de dentro: renglones y una foto cálida. */
.demo__ico-lineas {
  position: absolute;
  left: 12%; top: 22%;
  width: 34%; height: 8%;
  border-radius: 99px;
  background: rgb(110 160 200 / 0.55);
  box-shadow: 0 calc(0.27 * var(--p)) 0 rgb(110 160 200 / 0.35);
}

.demo__ico-foto {
  position: absolute;
  right: 9%; top: 14%; bottom: 14%;
  width: 40%;
  border-radius: calc(0.2 * var(--p));
  background:
    radial-gradient(circle at 50% 38%, #f1c9a0 0 22%, transparent 24%),
    linear-gradient(180deg, #d99b62, #9a5e34);
}

/* Elementos: una hoja con un jarrón, un trébol y el botón con su cursor. */
.demo__ico-hoja   { left: 4%; top: 2%; width: 56%; height: 74%; transform: rotate(-7deg); }
.demo__ico-trebol { left: 54%; top: 34%; width: 40%; height: 46%; border-radius: 50%; }
.demo__ico-boton  { left: 30%; top: 50%; width: 38%; height: 44%; border-radius: 50%; }

.demo__agregar-op:hover .demo__ico-hoja   { transform: rotate(-12deg) translateY(-6%); }
.demo__agregar-op:hover .demo__ico-trebol { transform: rotate(45deg) scale(1.06); }
.demo__agregar-op:hover .demo__ico-boton  { transform: translate(-8%, -8%); }

/* Secciones: una sección oscura detrás y una tarjeta clara delante. */
.demo__ico-fondo   { left: 2%; top: 6%; width: 64%; height: 62%; transform: rotate(-3deg); }
.demo__ico-tarjeta { left: 26%; top: 34%; width: 70%; height: 60%; transform: rotate(4deg); }

.demo__agregar-op:hover .demo__ico-fondo   { transform: rotate(-7deg) translate(-4%, -6%); }
.demo__agregar-op:hover .demo__ico-tarjeta { transform: rotate(8deg) translate(5%, 2%); }

/* Páginas: tres hojas apiladas y un cursor. */
.demo__ico-pag3   { left: 22%; top: 2%; width: 60%; height: 54%; transform: rotate(7deg); }
.demo__ico-pag2   { left: 8%; top: 18%; width: 60%; height: 54%; transform: rotate(-4deg); }
.demo__ico-pag1   { left: 32%; top: 40%; width: 62%; height: 54%; }
.demo__ico-cursor { left: 2%; top: 58%; width: 30%; height: 36%; border-radius: 0; }
.demo__ico-pag2 .demo__ico-foto { left: 10%; right: auto; width: 46%; }

.demo__agregar-op:hover .demo__ico-pag3   { transform: rotate(13deg) translate(6%, -6%); }
.demo__agregar-op:hover .demo__ico-pag2   { transform: rotate(-9deg) translateX(-4%); }
.demo__agregar-op:hover .demo__ico-pag1   { transform: translate(4%, -3%); }
.demo__agregar-op:hover .demo__ico-cursor { transform: translate(12%, -14%); }

@media (prefers-reduced-motion: reduce) {
  .demo__ico-capa { transition: none; }
}

/* ── CERRAR LYM DE VERDAD (09/10, pedido) ─────────────────────────────
   La X de la cabecera de Lym enseñaba el aviso y no cerraba nada. Ahora
   el panel —su cabecera, la pregunta, la caja y su degradado de fondo—
   se va con el desenfoque de la casa (el que se va se emborrona) y el
   escenario de la página se ensancha hasta el canto derecho, así que la
   ventana se recentra en el hueco nuevo. En su sitio queda un destello de
   cristal, el de «Agregar», que lo vuelve a abrir. */
.demo__lym,
.demo__fila > .demo__lym-cabeza,
.demo::before {
  transition: opacity .2s ease-in, filter .2s ease-in, visibility 0s;
}

.demo--sin-lym .demo__lym,
.demo--sin-lym .demo__fila > .demo__lym-cabeza,
.demo--sin-lym::before {
  opacity: 0;
  filter: blur(calc(0.35 * var(--p)));
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease-in, filter .2s ease-in, visibility 0s linear .2s;
}

.demo__escenario-lienzo {
  transition: right .38s cubic-bezier(.3, .8, .3, 1);
}

.demo--sin-lym .demo__escenario-lienzo {
  right: 0;
}

/* Y LA PÁGINA, UN POCO MÁS ANCHA (09/10, pedido): con el hueco de Lym
   libre, la ventana pasa de 70 a 80 unidades. La tienda de dentro se
   reparte sola: sus medidas van en % del lienzo. */
.demo__ventana {
  transition: width .38s cubic-bezier(.3, .8, .3, 1);
}

.demo--sin-lym .demo__ventana {
  width: calc(80 * var(--p));
}

/* LA BARRA DE HERRAMIENTAS SIGUE A LA VENTANA (09/10, pedido): va
   centrada sobre ella. Con Lym abierto el hueco de la ventana va de 5,82
   a 76,1 (centro 40,96) y la barra mide 38,6, de ahí su 21,34; cerrado, el
   hueco llega a 98 (centro 51,91), así que la barra va a 32,61. */
.demo__fila > .demo__herramientas {
  transition: left .38s cubic-bezier(.3, .8, .3, 1), opacity .16s ease-in, filter .16s ease-in;
}

.demo--sin-lym .demo__fila > .demo__herramientas {
  left: calc(32.61 * var(--p));
}

.demo__fila > .demo__lym-abrir {
  right: calc(1.6 * var(--p));
  display: grid;
  place-items: center;
  width: calc(2.3 * var(--p));
  height: calc(2.3 * var(--p));
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(0.6 * var(--p)) !important;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.45)) !important;
  -webkit-backdrop-filter: blur(calc(1 * var(--p))) saturate(1.8);
  backdrop-filter: blur(calc(1 * var(--p))) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.4),
    0 0 0 0.5px rgb(150 160 190 / 0.3),
    0 1px 2px rgb(30 40 80 / 0.08),
    0 calc(0.4 * var(--p)) calc(1.2 * var(--p)) rgb(40 60 120 / 0.1);
  color: #333334 !important;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease-in, visibility 0s linear .16s;
}

.demo__lym-abrir svg {
  width: calc(1.05 * var(--p));
  height: calc(1.05 * var(--p));
  transition: transform .45s cubic-bezier(.3, 1.45, .5, 1);
}

.demo__lym-abrir:hover svg {
  transform: rotate(18deg) scale(1.08);
}

.demo--sin-lym .demo__fila > .demo__lym-abrir {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease-out .12s;
}

@media (prefers-reduced-motion: reduce) {
  .demo__escenario-lienzo { transition: none; }
}

/* ── EL PANEL «AGREGAR ELEMENTOS» (09/10, pedido con referencia) ──────
   Sale al pulsar la tarjeta Elementos del menú de «Agregar». Los números
   salen de medir la referencia (el marco a 946 px: 1 unidad = 9,46 px):
   el panel empieza a 2,11 del canto y a 7,72 de arriba, mide 51,2 de
   ancho y acaba a 1,37 del suelo; la cabecera, 3,6 de alto; la columna de
   categorías, 14,3 de ancho y en #f6f6f6 con su sombra por dentro del
   canto derecho; la rejilla, tres columnas de 3,9 de alto en #f6f6f6.
   Va colgado del marco (no de la fila) y por encima de todo lo del
   lienzo, también de la columna de la sección. Entra y sale con el
   desenfoque de la casa. */
.demo__elem {
  position: absolute;
  z-index: 40;
  left: calc(2.11 * var(--p));
  top: calc(7.72 * var(--p));
  bottom: calc(1.37 * var(--p));
  width: calc(51.2 * var(--p));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(0.9 * var(--p));
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(0.2 * var(--p)) calc(0.6 * var(--p)) rgb(20 30 60 / 0.06),
    0 calc(1 * var(--p)) calc(3 * var(--p)) rgb(20 30 60 / 0.12);
  color: #1d1d1f;
  text-align: left;
  /* ENTRA DESDE EL LADO IZQUIERDO (09/10, pedido): parte entero fuera del
     marco —que recorta— y se desliza hasta su sitio frenando al final; al
     cerrar vuelve por donde vino, más rápido. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(-100% - 3 * var(--p)));
  pointer-events: none;
  transition:
    transform .28s cubic-bezier(.5, 0, .75, 0),
    opacity .12s ease-in .16s,
    visibility 0s linear .28s;
}

.demo--elem .demo__elem {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    transform .5s cubic-bezier(.16, 1, .3, 1),
    opacity .14s ease-out;
}

.demo__elem-cabeza {
  flex: none;
  position: relative;
  height: calc(3.6 * var(--p));
  box-shadow: inset 0 -0.5px 0 #e2e2e2;
}

.demo__elem-titulo {
  position: absolute;
  left: calc(2 * var(--p));
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(1.37 * var(--p));
  font-weight: 500;
}

.demo__elem-botones {
  position: absolute;
  right: calc(1.16 * var(--p));
  top: 50%;
  display: flex;
  gap: calc(0.63 * var(--p));
  transform: translateY(-50%);
}

.demo .demo__elem-botones button {
  display: grid;
  place-items: center;
  width: calc(1.75 * var(--p));
  height: calc(1.75 * var(--p));
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fafafa !important;
  box-shadow: inset 0 0 0 0.5px #c9c9c9;
  color: #2b2b2b !important;
  cursor: pointer;
  transition: background-color .15s ease;
}

.demo .demo__elem-botones button:hover {
  background: #ececec !important;
}

.demo__elem-botones svg {
  width: calc(0.95 * var(--p));
  height: calc(0.95 * var(--p));
}

.demo__elem-cuerpo {
  flex: 1;
  display: flex;
  min-height: 0;
}

.demo__elem-cats {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.37 * var(--p));
  width: calc(14.3 * var(--p));
  padding: calc(1.25 * var(--p)) 0 0 calc(0.8 * var(--p));
  background: #f6f6f6;
  box-shadow: inset calc(-0.15 * var(--p)) 0 calc(0.2 * var(--p)) rgb(0 0 0 / 0.05);
  overflow: auto;
  scrollbar-width: none;
}

.demo .demo__elem-cat {
  height: calc(1.6 * var(--p));
  padding: 0 calc(1.2 * var(--p)) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #3a3a3a !important;
  font-size: calc(1.0 * var(--p)) !important;
  font-weight: 450 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.demo .demo__elem-cat:hover {
  background: #ececec !important;
}

.demo .demo__elem-cat.is-activa {
  background: #d6e6fe !important;
  color: #2f5dff !important;
  font-weight: 500 !important;
}

.demo__elem-lista {
  flex: 1;
  min-width: 0;
  padding: calc(1.15 * var(--p)) calc(0.85 * var(--p)) 0 calc(1.06 * var(--p));
  overflow: auto;
  scrollbar-width: none;
}

.demo .demo__elem-h,
.demo .demo__elem-sub {
  margin: 0;
  font-size: calc(1.27 * var(--p));
  font-weight: 500;
  line-height: 1.2;
}

.demo .demo__elem-sub {
  margin-top: calc(1.45 * var(--p));
  font-size: calc(1.15 * var(--p));
}

.demo__elem-pestanas {
  display: flex;
  gap: calc(0.15 * var(--p));
  margin-top: calc(0.95 * var(--p));
}

.demo .demo__elem-pestana {
  height: calc(1.7 * var(--p));
  padding: 0 calc(0.9 * var(--p)) !important;
  border-radius: calc(0.35 * var(--p)) !important;
  background: transparent !important;
  color: #2b2b2b !important;
  font-size: calc(0.95 * var(--p)) !important;
  font-weight: 450 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}

.demo .demo__elem-pestana:hover,
.demo .demo__elem-pestana.is-activa {
  background: #f1f1f1 !important;
}

.demo__elem-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(0.42 * var(--p));
  margin-top: calc(0.75 * var(--p));
}

.demo .demo__elem-ej {
  height: calc(3.9 * var(--p));
  padding: 0 !important;
  border-radius: calc(0.32 * var(--p)) !important;
  background: #f6f6f6 !important;
  color: #111 !important;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.demo .demo__elem-ej:hover {
  background: #efefef !important;
  box-shadow: inset 0 0 0 1px #2f5dff;
}

/* Los tres primeros, palo seco grueso y estrecho; los tres últimos, con
   remate. Cada uno un punto más pequeño que el anterior. */
.demo .demo__elem-ej--1,
.demo .demo__elem-ej--2,
.demo .demo__elem-ej--3 {
  font-family: Impact, 'Arial Narrow', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

.demo .demo__elem-ej--4,
.demo .demo__elem-ej--5,
.demo .demo__elem-ej--6 {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
}

.demo .demo__elem-ej--1 { font-size: calc(1.3 * var(--p)) !important; }
.demo .demo__elem-ej--2 { font-size: calc(1.17 * var(--p)) !important; }
.demo .demo__elem-ej--3 { font-size: calc(1.05 * var(--p)) !important; }
.demo .demo__elem-ej--4 { font-size: calc(1.5 * var(--p)) !important; }
.demo .demo__elem-ej--5 { font-size: calc(1.36 * var(--p)) !important; }
.demo .demo__elem-ej--6 { font-size: calc(1.2 * var(--p)) !important; }

@media (prefers-reduced-motion: reduce) {
  .demo__elem, .demo--elem .demo__elem { transform: none; }
}

/* ── EL BUSCADOR DEL PANEL (09/10, pedido: «con la animación que ya
   tenemos en la página de inicio») ───────────────────────────────────
   Es la del buscador de Tiendas del panel (styles/21, «Búsqueda
   integrada»), con sus mismos tiempos y su curva, en tres tiempos:
     1 · el título se apaga corriéndose 4 px a la izquierda (110 ms);
     2 · una pastilla gris CRECE DESDE LA LUPA hasta ocupar la cabecera
         (260 ms) —la lupa se queda dentro, a su izquierda—;
     3 · entran el campo y su X, corriéndose 4 px desde la derecha (180 ms).
   Al cerrar, al revés: el campo sale en 90 ms, la pastilla vuelve a la
   lupa y el título regresa. `is-buscando` es el tiempo 2 y `is-lista` el
   3; prueba.js los pone uno detrás de otro. */
.demo__elem-titulo {
  transition: opacity .18s cubic-bezier(.32, .72, 0, 1), translate .18s cubic-bezier(.32, .72, 0, 1);
}


.demo__elem-pastilla {
  position: absolute;
  top: 50%;
  left: calc(100% - 3.54 * var(--p) - 1.75 * var(--p));
  right: calc(3.54 * var(--p));
  height: calc(1.75 * var(--p));
  border-radius: 999px;
  /* El mismo fondo y canto que la X redonda de al lado (09/10, pedido). */
  background: #fafafa;
  box-shadow: inset 0 0 0 0.5px #c9c9c9;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
  /* AL CERRAR, TODO A LA VEZ (09/10, reportado: «hay cosas que se cierran
     antes que otras»): la pastilla vuelve a la lupa en 240 ms y, al
     llegar, se funde con ella —la pastilla se apaga mientras la lupa
     vuelve—, en vez de desaparecer de golpe. */
  transition:
    left .24s cubic-bezier(.32, .72, 0, 1),
    opacity .1s ease .18s;
}

/* MÁS CORTA (09/10, pedido: «no tan grande horizontalmente»): 18 unidades
   desde la lupa hacia la izquierda, no la cabecera entera. Así ya no
   llega al título, que se queda donde está. */
.demo__elem.is-buscando .demo__elem-pastilla {
  left: calc(100% - 3.54 * var(--p) - 18 * var(--p));
  opacity: 1;
  transition: left .26s cubic-bezier(.32, .72, 0, 1), opacity 0s;
}

/* La lupa redonda se esconde detrás de la pastilla que nace de ella y,
   al cerrar, vuelve justo cuando la pastilla llega a su sitio. */
.demo .demo__elem-botones .demo__elem-buscar {
  transition: background-color .15s ease, opacity .1s ease .18s;
}

.demo .demo__elem.is-buscando .demo__elem-botones .demo__elem-buscar {
  opacity: 0;
  pointer-events: none;
  transition: background-color .15s ease, opacity .06s ease;
}

.demo__elem-busca {
  position: absolute;
  /* POR ENCIMA DE LOS BOTONES DE LA CABECERA (09/10, reportado: «la X no
     funciona»). Su X cae justo donde estaba la lupa redonda, y la caja de
     esos botones —que va después en el HTML— se comía el clic aunque la
     lupa ya fuera invisible. */
  z-index: 1;
  top: 50%;
  /* Va pegada a la pastilla: crece y encoge con ella, y recorta lo que no
     cabe, así que al cerrar el texto y la X se recogen dentro en vez de
     quedarse flotando fuera. */
  left: calc(100% - 3.54 * var(--p) - 1.75 * var(--p));
  right: calc(3.54 * var(--p));
  overflow: hidden;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--p));
  height: calc(1.75 * var(--p));
  padding: 0 calc(0.2 * var(--p)) 0 calc(0.7 * var(--p));
  color: #8a8a8a;
  /* Invisible pero SIN visibility: hidden, que no deja enfocar. Así el
     campo recibe el foco con el primer clic, aunque todavía no se vea (lo
     mismo que hace Tiendas con su estado «abriendo»). */
  opacity: 0;
  transform: translateY(-50%);
  translate: 4px 0;
  pointer-events: none;
  transition: left .24s cubic-bezier(.32, .72, 0, 1), opacity .12s ease, translate .12s ease;
}

.demo__elem.is-buscando .demo__elem-busca {
  left: calc(100% - 3.54 * var(--p) - 18 * var(--p));
  transition: left .26s cubic-bezier(.32, .72, 0, 1), opacity .09s ease, translate .09s ease;
}

.demo__elem.is-lista .demo__elem-busca {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition: left .26s cubic-bezier(.32, .72, 0, 1), opacity .18s cubic-bezier(.32, .72, 0, 1), translate .18s cubic-bezier(.32, .72, 0, 1);
}

/* MÁS GRANDE CON EL CAMPO ABIERTO (09/10, pedido): de 0,95 a 1,2. */
.demo__elem-busca > svg {
  flex: none;
  width: calc(1.2 * var(--p));
  height: calc(1.2 * var(--p));
}

.demo__elem-campo {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: #1a1a1a;
  font: inherit;
  font-size: calc(0.98 * var(--p));
}

.demo__elem-campo::placeholder {
  color: #9a9a9a;
}

.demo .demo__elem-busca-x {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(1.35 * var(--p));
  height: calc(1.35 * var(--p));
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #555 !important;
  cursor: pointer;
  transition: background-color .15s ease;
}

.demo .demo__elem-busca-x:hover {
  background: rgb(0 0 0 / 0.06) !important;
}

.demo__elem-busca-x svg {
  width: calc(0.8 * var(--p));
  height: calc(0.8 * var(--p));
}

/* Lo que no casa con lo escrito se esconde. */
.demo .demo__elem-cat[hidden],
.demo .demo__elem-ej[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .demo__elem-titulo, .demo__elem-pastilla, .demo__elem-busca { transition: none !important; }
}

/* ── MÁS TEXTO EN «TODOS» (09/10, pedido) ─────────────────────────────
   Cuatro grupos —Títulos de marca, Títulos, Párrafos y Efectos de
   texto— y de cada uno, en «Todos», SOLO LA PRIMERA FILA, con un «Ver
   más» a la derecha de su nombre que lleva a la pestaña de ese tipo,
   donde salen todos (seis por grupo). Al buscar se miran todos, también
   los que «Todos» esconde. */
.demo__elem-grupo-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(1.45 * var(--p));
}

.demo .demo__elem-grupo-cabeza .demo__elem-sub {
  margin: 0;
}

.demo .demo__elem-mas {
  padding: calc(0.2 * var(--p)) calc(0.5 * var(--p)) !important;
  border-radius: calc(0.35 * var(--p)) !important;
  background: transparent !important;
  color: #2f5dff !important;
  font-size: calc(0.92 * var(--p)) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background-color .15s ease;
}

.demo .demo__elem-mas:hover {
  background: rgb(47 93 255 / 0.08) !important;
}

.demo__elem-lista[data-pestana="todos"]:not(.is-filtrando) .demo__elem-ej--mas,
.demo__elem-lista:not([data-pestana="todos"]) .demo__elem-mas,
.demo__elem-lista.is-filtrando .demo__elem-mas,
.demo__elem-grupo[hidden] {
  /* !important: las muestras de Párrafos llevan su propio display: flex,
     con más peso, y sin esto «Todos» enseñaba las seis. */
  display: none !important;
}

.demo__elem-lista[data-pestana="titulos"] .demo__elem-grupo:not([data-grupo="titulos"]),
.demo__elem-lista[data-pestana="parrafos"] .demo__elem-grupo:not([data-grupo="parrafos"]),
.demo__elem-lista[data-pestana="efectos"] .demo__elem-grupo:not([data-grupo="efectos"]) {
  display: none;
}

/* Un poco de aire al final, para que la última fila no quede pegada al
   canto de abajo al deslizar. */
.demo__elem-lista,
.demo__elem-cats {
  /* Deslizar dentro del panel no arrastra la portada al llegar al final. */
  overscroll-behavior: contain;
}

.demo__elem-lista {
  padding-bottom: calc(1.4 * var(--p)) !important;
}

/* Títulos: palo seco, de mayor a menor, y dos variaciones. */
.demo .demo__elem-tit-grande   { font-size: calc(1.45 * var(--p)) !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.demo .demo__elem-tit-mediano  { font-size: calc(1.22 * var(--p)) !important; font-weight: 650 !important; letter-spacing: -0.01em; }
.demo .demo__elem-tit-pequeno  { font-size: calc(1.02 * var(--p)) !important; font-weight: 600 !important; }
.demo .demo__elem-tit-sub      { font-size: calc(0.8 * var(--p)) !important; font-weight: 600 !important; letter-spacing: 0.16em; color: #555 !important; }
.demo .demo__elem-tit-fino     { font-size: calc(1.35 * var(--p)) !important; font-weight: 250 !important; letter-spacing: -0.01em; }
.demo .demo__elem-tit-cursiva  { font-family: Georgia, 'Times New Roman', serif !important; font-style: italic; font-size: calc(1.3 * var(--p)) !important; font-weight: 400 !important; }

/* Párrafos: más altos, el texto a la izquierda y arriba, como se vería
   en la página. */
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-ej {
  height: calc(5.4 * var(--p));
  padding: calc(0.75 * var(--p)) calc(0.85 * var(--p)) !important;
  display: flex;
  align-items: flex-start;
  text-align: left;
  color: #333 !important;
  line-height: 1.35;
  overflow: hidden;
}

.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-grande    { font-size: calc(1.0 * var(--p)) !important; font-weight: 500 !important; color: #111 !important; }
.demo .demo__elem-par-normal    { font-size: calc(0.8 * var(--p)) !important; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-pequeno   { font-size: calc(0.68 * var(--p)) !important; color: #666 !important; }
.demo .demo__elem-par-cita {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic;
  font-size: calc(0.92 * var(--p)) !important;
  /* Sin la raya azul de la izquierda (09/10, pedido). */
}
.demo .demo__elem-par-lista     { font-size: calc(0.78 * var(--p)) !important; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-destacado { font-size: calc(0.88 * var(--p)) !important; font-weight: 600 !important; color: #111 !important; }

/* Efectos de texto: cada muestra enseña su efecto. */
.demo .demo__elem-grupo[data-grupo="efectos"] .demo__elem-ej {
  font-size: calc(1.3 * var(--p)) !important;
  font-weight: 800 !important;
}

/* El degradado y el resaltado van en un <span> dentro de la muestra: así
   la caja conserva su gris y el efecto es solo de la palabra. */
.demo .demo__elem-efe-degradado span {
  background: linear-gradient(100deg, #2f5dff, #9b4dff 55%, #ff5c8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.demo .demo__elem-efe-contorno {
  color: transparent !important;
  -webkit-text-stroke: 1px #111;
}

/* Sin fondo propio (09/10, pedido): la caja gris de todas, y el brillo
   en azul para que se vea sobre claro. */
.demo .demo__elem-efe-neon {
  color: #fff !important;
  text-shadow:
    0 0 1px #2f7dff,
    0 0 calc(0.25 * var(--p)) #4d9bff,
    0 0 calc(0.6 * var(--p)) #2f7dff,
    0 0 calc(1.1 * var(--p)) #2f7dff;
}

.demo .demo__elem-efe-sombra {
  text-shadow: calc(0.15 * var(--p)) calc(0.15 * var(--p)) 0 #c9d6ff;
}

.demo .demo__elem-efe-resaltado span {
  padding: 0 calc(0.15 * var(--p));
  background: linear-gradient(transparent 52%, #ffe36e 52%, #ffe36e 88%, transparent 88%);
}

.demo .demo__elem-efe-ondas {
  text-decoration: underline wavy #2f5dff;
  text-decoration-thickness: calc(0.1 * var(--p));
  text-underline-offset: calc(0.25 * var(--p));
}

/* ── SEIS MÁS DE CADA TIPO (09/10, pedido) ────────────────────────────
   Cada grupo pasa de 6 a 12 muestras. En «Todos» sigue saliendo solo la
   primera fila; el resto, en su pestaña con «Ver más». */

/* Títulos de marca 7-12: otras seis familias de las que trae el sistema. */
.demo .demo__elem-ej--7  { font-family: 'Arial Black', 'Helvetica Neue', sans-serif !important; font-weight: 900 !important; font-size: calc(1.15 * var(--p)) !important; }
.demo .demo__elem-ej--8  { font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', serif !important; font-size: calc(1.4 * var(--p)) !important; }
.demo .demo__elem-ej--9  { font-family: 'Trebuchet MS', sans-serif !important; font-weight: 700 !important; font-size: calc(1.25 * var(--p)) !important; }
.demo .demo__elem-ej--10 { font-family: 'Courier New', monospace !important; font-weight: 700 !important; font-size: calc(1.2 * var(--p)) !important; }
.demo .demo__elem-ej--11 { font-family: 'Brush Script MT', 'Segoe Script', cursive !important; font-size: calc(1.6 * var(--p)) !important; }
.demo .demo__elem-ej--12 { font-family: Didot, 'Bodoni MT', 'Times New Roman', serif !important; font-weight: 700 !important; font-size: calc(1.35 * var(--p)) !important; }

/* Títulos. */
.demo .demo__elem-tit-espaciado { font-size: calc(0.82 * var(--p)) !important; font-weight: 600 !important; letter-spacing: 0.2em; white-space: nowrap; }
.demo .demo__elem-tit-bloque    { font-family: 'Arial Black', sans-serif !important; font-size: calc(1.0 * var(--p)) !important; font-weight: 900 !important; }
.demo .demo__elem-tit-linea {
  font-size: calc(1.15 * var(--p)) !important;
  font-weight: 650 !important;
  text-decoration: underline;
  text-decoration-thickness: calc(0.12 * var(--p));
  text-underline-offset: calc(0.3 * var(--p));
}
.demo .demo__elem-tit-suave     { font-size: calc(1.3 * var(--p)) !important; font-weight: 500 !important; color: #8a8a8a !important; }
.demo .demo__elem-tit-estrecho  { font-family: 'Arial Narrow', 'Roboto Condensed', sans-serif !important; font-stretch: condensed; font-size: calc(1.3 * var(--p)) !important; font-weight: 700 !important; letter-spacing: -0.05em; }
.demo .demo__elem-tit-mono      { font-family: 'Courier New', monospace !important; font-size: calc(1.15 * var(--p)) !important; font-weight: 400 !important; }

/* Párrafos. */
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-centrado {
  justify-content: center;
  text-align: center;
  font-size: calc(0.82 * var(--p)) !important;
}
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-inicial {
  display: block;
  font-size: calc(0.8 * var(--p)) !important;
}
.demo .demo__elem-par-inicial::first-letter {
  float: left;
  margin: calc(0.08 * var(--p)) calc(0.25 * var(--p)) 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: calc(2.2 * var(--p));
  line-height: 0.8;
  color: #111;
}
.demo .demo__elem-par-numerada  { font-size: calc(0.78 * var(--p)) !important; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-nota { font-size: calc(0.72 * var(--p)) !important; font-style: italic; color: #777 !important; }
.demo .demo__elem-par-versalitas { font-variant: small-caps; letter-spacing: 0.04em; font-size: calc(0.88 * var(--p)) !important; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-par-separado {
  font-size: calc(0.78 * var(--p)) !important;
  background:
    linear-gradient(#111, #111) calc(0.85 * var(--p)) calc(0.45 * var(--p)) / calc(2 * var(--p)) 1.5px no-repeat,
    #f6f6f6 !important;
  padding-top: calc(1.05 * var(--p)) !important;
}

/* Efectos de texto. */
.demo .demo__elem-efe-retro {
  color: #ff5c8a !important;
  text-shadow: calc(0.12 * var(--p)) calc(0.12 * var(--p)) 0 #2bd1c4;
}
.demo .demo__elem-efe-metal span {
  background: linear-gradient(180deg, #f4f4f4 0%, #8d8d8d 48%, #4a4a4a 52%, #c9c9c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demo .demo__elem-efe-grabado {
  color: #c9c9c9 !important;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 rgb(0 0 0 / 0.35);
}
.demo .demo__elem-efe-larga {
  color: #2f5dff !important;
  text-shadow:
    1px 1px 0 #c9d6ff, 2px 2px 0 #c9d6ff, 3px 3px 0 #c9d6ff,
    4px 4px 0 #d8e1ff, 5px 5px 0 #e3e9ff, 6px 6px 0 #edf1ff;
}
.demo .demo__elem-efe-fuego span {
  background: linear-gradient(0deg, #ff3d00, #ff9100 50%, #ffd54f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.demo .demo__elem-efe-tachado {
  text-decoration: line-through;
  text-decoration-color: #ff3b5c;
  text-decoration-thickness: calc(0.14 * var(--p));
}

/* ── CUATRO GRUPOS MÁS EN TEXTO (09/10, pedido) ───────────────────────
   Subtítulos (en Títulos), Listas y Citas (en Párrafos) y Texto con
   fondo (en Efectos de texto), seis muestras cada uno, con su «Ver más».
   Listas y Citas son del grupo «parrafos», así que ya salen con la caja
   alta y el texto arriba a la izquierda de los párrafos. */

/* Subtítulos. */
.demo .demo__elem-sub-etiqueta span {
  padding: calc(0.2 * var(--p)) calc(0.6 * var(--p));
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: calc(0.72 * var(--p));
  font-weight: 700;
  letter-spacing: 0.08em;
}
.demo .demo__elem-sub-ante    { font-size: calc(0.78 * var(--p)) !important; font-weight: 700 !important; letter-spacing: 0.14em; color: #2f5dff !important; }
.demo .demo__elem-sub-gris    { font-size: calc(0.95 * var(--p)) !important; font-weight: 400 !important; color: #777 !important; }
.demo .demo__elem-sub-guion   { font-family: Georgia, 'Times New Roman', serif !important; font-style: italic; font-size: calc(1.0 * var(--p)) !important; color: #555 !important; }
.demo .demo__elem-sub-numero  { font-size: calc(1.9 * var(--p)) !important; font-weight: 800 !important; letter-spacing: -0.04em; }
.demo .demo__elem-sub-precio  { font-size: calc(1.4 * var(--p)) !important; font-weight: 700 !important; letter-spacing: -0.02em; }

/* Listas. */
.demo .demo__elem-grupo[data-grupo="parrafos"] [class*="demo__elem-lis-"] { font-size: calc(0.78 * var(--p)) !important; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-lis-linea {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(0.85 * var(--p)) !important;
  font-weight: 500 !important;
}
.demo .demo__elem-lis-pasos b { font-weight: 700; color: #111; }

/* Citas. */
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-cit-grande {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: calc(1.2 * var(--p)) !important;
  color: #111 !important;
}
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-cit-autor { font-size: calc(0.8 * var(--p)) !important; }
.demo .demo__elem-cit-autor small { color: #888; font-size: calc(0.7 * var(--p)); }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-cit-estrellas {
  font-size: calc(0.8 * var(--p)) !important;
  line-height: 1.6;
}
.demo .demo__elem-cit-estrellas::first-line { color: #f5b301; letter-spacing: 0.1em; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-cit-centrada {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic;
  font-size: calc(1.0 * var(--p)) !important;
}
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-cit-gris { font-size: calc(0.85 * var(--p)) !important; font-weight: 500 !important; color: #8a8a8a !important; }
.demo .demo__elem-grupo[data-grupo="parrafos"] .demo__elem-cit-firma { font-size: calc(0.8 * var(--p)) !important; }
.demo .demo__elem-cit-firma i { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: calc(1.15 * var(--p)); color: #111; }

/* Texto con fondo: la palabra lleva su propia pastilla o recuadro. */
.demo .demo__elem-grupo[data-grupo="efectos"] [class*="demo__elem-fon-"] {
  font-size: calc(0.85 * var(--p)) !important;
  font-weight: 700 !important;
}
.demo [class*="demo__elem-fon-"] span {
  padding: calc(0.3 * var(--p)) calc(0.75 * var(--p));
  border-radius: 999px;
}
.demo .demo__elem-fon-negra span   { background: #111; color: #fff; }
.demo .demo__elem-fon-azul span    { background: #d6e6fe; color: #2f5dff; }
.demo .demo__elem-fon-borde span   { border-radius: calc(0.3 * var(--p)); box-shadow: inset 0 0 0 1.5px #111; }
.demo .demo__elem-grupo[data-grupo="efectos"] .demo__elem-fon-invertido {
  background: #111 !important;
  color: #fff !important;
  font-size: calc(1.15 * var(--p)) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo .demo__elem-fon-sello span {
  display: inline-block;
  border-radius: calc(0.25 * var(--p));
  background: #ff3b5c;
  color: #fff;
  letter-spacing: 0.1em;
  transform: rotate(-6deg);
}
.demo .demo__elem-fon-degradado span {
  background: linear-gradient(100deg, #2f5dff, #9b4dff 55%, #ff5c8a);
  color: #fff;
}

/* Las muestras que mezclan negrita, firma o pie con el texto fluyen como
   un párrafo: la caja de los párrafos es flex y pondría cada trozo en
   columna aparte («Paso 1EligePaso 2Disfruta», la firma al lado). */
.demo .demo__elem-grupo[data-grupo="parrafos"] :is(.demo__elem-lis-pasos, .demo__elem-cit-autor, .demo__elem-cit-firma, .demo__elem-cit-estrellas) {
  display: block;
}