/* ============================================================================
   EL TELÉFONO · las maquetas de la aplicación, en un solo archivo.

   Lo usan la portada, las guías, el blog, la 404, las imágenes para compartir
   (`tools/og/`) y, desde el 10 de octubre de 2026, la guía de la propia
   aplicación, que lo importa al compilar (`apps/web/src/pantallas/Guia.tsx`):
   el dueño pidió que se viera como aquí. Por eso vive aparte de
   `portada.css`, que es de la web y nada más.

   Todo cuelga de `.presentacion`, que en la web es el `<main>` y en la
   aplicación es la caja de la guía. Los textos y las escenas que lo rellenan
   están en `maquetas.js`.
   ========================================================================== */
/* ══ EL MÓVIL · la aplicación de verdad, dentro de la página ════════════════
   Cada maqueta es la pantalla «Hoy» del teléfono, COPIADA de la aplicación:
   medidas, colores y estados salen de `apps/web/src/estilo.css` (tema claro)
   y de `FichaBloque.tsx`, comprobados el 10 de octubre de 2026 contra
   capturas de la aplicación a 390 px. Hasta entonces era una ventana de tinta
   con bloques lila y un «Preparar mañana» violeta que no existían en el
   producto: quien se apuntaba encontraba otra cosa.

   LOS COLORES VAN AQUÍ Y NO EN LA SUPERFICIE. La pantalla es la aplicación,
   esté sobre violeta, tinta, lila o blanco. Los nombres `--a-…` son los de la
   aplicación con una «a» delante, para que se vea de dónde salen y no se
   confundan con los de la web. Si cambian allí, cambian aquí.

   LO QUE NO ES DE LA APLICACIÓN VA FUERA DEL TELÉFONO: el rótulo de encima
   (`.maqueta-rotulo`) y la explicación de debajo (`.ventana-pie`,
   `.demo-pie`). Dentro solo hay lo que se vería en la pantalla, salvo una
   cosa a propósito: la marca «+15» bajo las horas que se han corrido, que la
   aplicación no pinta y sin la que la demostración no se entiende.
   ────────────────────────────────────────────────────────────────────────── */
.presentacion .maqueta { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.presentacion .maqueta-rotulo {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; color: var(--txt-2);
}
/* EL TELÉFONO. El marco es un borde y no una caja dentro de otra: así el
   recorte de `overflow` sigue la esquina de dentro (54 − 10 = 44 px) y la
   pantalla sale redonda sin una capa más. La proporción es la de un teléfono
   de 390 × 844, y lo que no cabe se queda debajo de la barra, como allí: la
   tarjeta de ahora va siempre arriba y la lista se desplaza por debajo. */
.presentacion .ventana {
  --a-g0: #F0EEF7; --a-g1: #FFFFFF; --a-g2: #E5E2F0; --a-line: #DEDAEE; --a-line-2: #C6BFDE;
  --a-t0: #15161A; --a-t1: #53565F; --a-t2: #656974;
  --a-marca: #533AFD; --a-marca-bg: #F0EDFF; --a-now: #2C56D9; --a-now-bg: #EAEFFD; --a-done: #1B7350;
  --a-hueco: #554891; --a-hueco-bg: #DDD5F7; --a-hueco-linea: #AC9BE3;
  --marco: #0D0B14;
  position: relative; isolation: isolate; container-type: inline-size;
  display: flex; flex-direction: column; flex: 0 0 auto;
  width: min(100%, 360px); aspect-ratio: 1 / 2.16; overflow: hidden;
  border: 10px solid var(--marco); border-radius: 54px;
  background: var(--a-g0); color: var(--a-t0);
  box-shadow: 0 0 0 1.5px #3B3652, 0 48px 90px -48px rgba(16, 14, 26, .75);
  font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
}
/* Sobre la tinta, el marco negro se perdía en el fondo: un escalón más claro
   y el filo en lila apagado lo recortan. */
.presentacion .s-tinta .ventana { --marco: #26222F; box-shadow: 0 0 0 1.5px #5A5478, 0 48px 90px -48px rgba(0, 0, 0, .9); }
/* La isla de la cámara. */
.presentacion .ventana::before {
  content: ''; position: absolute; z-index: 6; top: 9px; left: 50%;
  width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: var(--marco);
}
.presentacion .ventana .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── La barra de estado del teléfono y la cabecera de «Hoy» ─────────────── */
.presentacion .ventana-cabecera {
  flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'estado estado estado' 'logo logo logo' 'dia fecha nav';
  align-items: center; column-gap: 5px; padding: 0 0 10px; border: 0;
}
.presentacion .movil-estado {
  grid-area: estado; position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 3px 26px 0 32px;
  background: var(--a-g0); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.presentacion .movil-estado::after { content: ''; width: 64px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12' fill='%2315161A'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cg fill='none' stroke='%2315161A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M26.6 4.4a9 9 0 0 1 11.8 0'/%3E%3Cpath d='M29.3 7.1a5.2 5.2 0 0 1 6.4 0'/%3E%3C/g%3E%3Ccircle cx='32.5' cy='10.2' r='1.4'/%3E%3Crect x='42.75' y='.75' width='18.5' height='10.5' rx='3' fill='none' stroke='%2315161A' stroke-opacity='.4' stroke-width='1.5'/%3E%3Crect x='44.75' y='2.75' width='12' height='6.5' rx='1.4'/%3E%3Crect x='62.4' y='4' width='1.6' height='4' rx='.8' fill-opacity='.4'/%3E%3C/svg%3E") no-repeat right center / contain; }
/* El logotipo de la aplicación, el maestro C01, a 108 px como en
   `.marca-app`: por debajo de 100 el manual manda usar el símbolo. La ruta
   es relativa a esta hoja y no a la raíz: así vale en la web, en las
   imágenes que se pintan desde `file://` y en la aplicación, que compila
   esta hoja y se lleva el archivo. */
.presentacion .ventana-cabecera::before {
  content: ''; grid-area: logo; width: 108px; aspect-ratio: 5613 / 804; margin: 10px 16px 14px;
  background: url('marca/con-icono/BLOKKED-v2-01-C01-con-icono.svg') no-repeat left center / contain;
}
.presentacion .ventana-cabecera strong {
  grid-area: dia; padding-left: 16px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--a-t0);
}
.presentacion .ventana-cabecera small {
  grid-area: fecha; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--a-t1);
}
.presentacion .ventana-cabecera small::before { content: '· '; color: var(--a-t2); }
.presentacion .app-nav { grid-area: nav; display: flex; align-items: center; gap: 12px; padding-right: 16px; }
.presentacion .app-nav i {
  width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--a-line-2); border-radius: 10px;
  background: var(--a-g1); color: var(--a-t1); font-size: 19px; font-style: normal; line-height: 1;
}
.presentacion .app-nav b {
  height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 10px;
  background: var(--a-marca); color: #FFFFFF; font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
/* En un teléfono estrecho de verdad —320 px de página— la aplicación corta la
   fecha; aquí, con el marco, la pantalla se queda en 268, y lo que sobra son
   las flechas. */
@container (max-width: 300px) { .presentacion .app-nav i:not(.vuelta) { display: none; } }
/* «Volver a hoy»: el calendario con el número de hoy, relleno del gris de los
   botones secundarios, como en la aplicación. */
.presentacion .app-nav i.vuelta { border-color: var(--a-g2); background: var(--a-g2); color: var(--a-t0); }

/* ── El cuerpo y la barra de abajo ─────────────────────────────────────────
   Lo que no cabe se queda debajo de la barra, como en el teléfono: se corta,
   no se encoge. */
.presentacion .ventana-dia, .presentacion .demo-escena { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 16px 16px; }
.presentacion .movil-tabs {
  flex: 0 0 auto; position: relative; display: flex; padding: 7px 8px 24px;
  border-top: 1px solid var(--a-line); background: var(--a-g1);
}
.presentacion .movil-tabs::after {
  content: ''; position: absolute; left: 50%; bottom: 7px; width: 112px; height: 5px; margin-left: -56px;
  border-radius: 3px; background: var(--a-t0);
}
.presentacion .movil-tabs span {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 6px;
  font-size: 11px; font-weight: 600; color: var(--a-t2);
}
.presentacion .movil-tabs span::before {
  content: ''; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
.presentacion .movil-tabs span:nth-child(1) { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 5h12M4 10h12M4 15h8'/%3E%3Ccircle cx='2' cy='5' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='2' cy='10' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='2' cy='15' r='1' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.presentacion .movil-tabs span:nth-child(2) { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='2.2' y='2.2' width='6.3' height='6.3' rx='1.6'/%3E%3Crect x='11.5' y='2.2' width='6.3' height='6.3' rx='1.6'/%3E%3Crect x='2.2' y='11.5' width='6.3' height='6.3' rx='1.6'/%3E%3Crect x='11.5' y='11.5' width='6.3' height='6.3' rx='1.6'/%3E%3C/svg%3E"); }
.presentacion .movil-tabs span:nth-child(3) { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 6h9M15 6h2M3 14h2M8 14h9'/%3E%3Ccircle cx='13.5' cy='6' r='2.1'/%3E%3Ccircle cx='6.5' cy='14' r='2.1'/%3E%3C/svg%3E"); }
.presentacion .movil-tabs .on { color: var(--a-marca); }

/* ── LOS BLOQUES · `FichaBloque.tsx` ───────────────────────────────────────
   2,2 px por minuto con techo de 190, y el texto manda por debajo de los 25
   minutos: los mismos números que la aplicación, así que una hora ocupa aquí
   lo mismo que allí. */
.presentacion .bloque { display: flex; width: 100%; }
.presentacion .bloque-hora {
  flex: 0 0 52px; position: relative; padding-top: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--a-t2);
}
.presentacion .bloque-hora::before {
  content: ''; position: absolute; box-sizing: border-box; left: 41.5px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--a-g0); border: 2px solid var(--a-line-2);
}
.presentacion .bloque-hora::after { content: ''; position: absolute; left: 45px; top: 19px; bottom: -2px; width: 1px; background: var(--a-line); }
/* El último de cada tramo no tiene línea que seguir. */
.presentacion .bloque:not(:has(+ .bloque)) .bloque-hora::after { display: none; }
.presentacion .bloque-cuerpo {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start;
  min-height: min(190px, calc(var(--minutos) * 2.2px)); padding: 9px 12px; margin-bottom: 6px;
  background: var(--a-g1); border: 1px solid var(--a-line); border-radius: 10px;
}
.presentacion .bloque-nombre {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--a-t0);
}
.presentacion .bloque-nombre .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presentacion .bloque-detalle { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--a-t2); }
.presentacion .cuenta {
  flex: 0 0 auto; min-width: 24px; aspect-ratio: 1; padding: 4px; margin-left: auto; border-radius: 50%;
  display: grid; place-items: center; background: var(--a-g2); color: var(--a-t1);
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
}
/* EN `--a-t1`, COMO EN LA APLICACIÓN. Las dos la tuvieron en `--t2`, que
   sobre este gris da 4,30:1, por debajo del 4,5. */
.presentacion .etiq {
  margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--a-g2); color: var(--a-t1);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.presentacion .etiq.ok { color: var(--a-done); }
/* Los estados, con los colores de la aplicación: azul lo que está pasando,
   verde lo hecho, lila discontinuo el Hueco. «Preparar mañana» no lleva
   nada: en la aplicación es una ficha como las demás. */
.presentacion .bloque.curso .bloque-cuerpo { border-color: var(--a-now); background: var(--a-now-bg); }
.presentacion .bloque.curso .bloque-hora { color: var(--a-now); font-weight: 700; }
.presentacion .bloque.curso .bloque-hora::before { background: var(--a-now); border-color: var(--a-now); }
.presentacion .bloque.hecho .bloque-hora { color: var(--a-t1); font-weight: 700; }
.presentacion .bloque.hecho .bloque-hora::before { background: var(--a-done); border-color: var(--a-done); }
.presentacion .bloque.hecho .n { color: var(--a-t2); text-decoration: line-through; text-decoration-thickness: 1px; }
.presentacion .bloque.hueco .bloque-cuerpo { background: var(--a-hueco-bg); border-style: dashed; border-color: var(--a-hueco-linea); }
.presentacion .bloque.hueco .bloque-nombre, .presentacion .bloque.hueco .bloque-detalle { color: var(--a-hueco); font-weight: 500; }
/* Lo que acaba de entrar en el día, como en las demostraciones de la guía de
   la aplicación (`.demo-destacado`). */
.presentacion .bloque.destacado .bloque-cuerpo { border-color: var(--a-marca); box-shadow: 0 0 0 1px var(--a-marca); }
.presentacion .bloque.hueco.destacado .bloque-cuerpo { border-color: var(--a-hueco); box-shadow: none; }
.presentacion .bloque.movida .bloque-hora { color: var(--a-marca); font-weight: 700; }
.presentacion .bloque-hora .mas { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--a-marca); }

/* El rótulo de cada parte del día: «MAÑANA ——— 09:00–13:00». */
.presentacion .tramo-linea {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 2px 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-marca);
}
.presentacion .tramo-linea i { flex: 1; height: 1px; background: var(--a-line); }
.presentacion .tramo-linea .mono { color: var(--a-t2); }
.presentacion .bloque + .tramo-linea { margin-top: 20px; }
.presentacion .ventana-dia > .tramo-linea:first-child, .presentacion .demo-escena > .tramo-linea:first-child { padding-top: 4px; }

/* ── LA TARJETA DE AHORA y la banda del aviso · `.ahora`, `.banda` ─────── */
.presentacion .app-ahora {
  position: relative; overflow: hidden; margin: 0 0 14px; padding: 15px 16px 14px;
  background: var(--a-g1); border: 1px solid var(--a-marca); border-radius: 12px;
  box-shadow: 0 10px 30px -22px var(--a-marca);
}
.presentacion .app-ahora.viva { border-color: var(--a-now); box-shadow: 0 0 0 1px var(--a-now), 0 0 0 5px rgba(44, 86, 217, .16); }
.presentacion .app-kicker {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-t2);
}
.presentacion .app-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.presentacion .app-ahora.viva .app-kicker { color: var(--a-now); }
/* Pasado de hora: el rojo de `--late`, el mismo aro y el reloj en positivo. */
.presentacion .app-ahora.tarde { border-color: #B02A1C; box-shadow: 0 0 0 1px #B02A1C, 0 0 0 5px rgba(176, 42, 28, .14); }
.presentacion .app-ahora.tarde .app-kicker, .presentacion .app-ahora.tarde .app-reloj b { color: #B02A1C; }
.presentacion .app-ahora.tarde .app-barra i { background: #B02A1C; }
.presentacion .app-ahora-nombre { display: block; margin: 0 0 9px; font-size: 20.5px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; }
.presentacion .app-reloj { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.presentacion .app-reloj b { font-size: 39.5px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--a-now); }
.presentacion .app-sub { font-size: 13.5px; font-weight: 500; color: var(--a-t2); }
.presentacion .app-botones { display: flex; gap: 8px; }
.presentacion .app-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 11px 0 0; padding-top: 11px; border-top: 1px solid var(--a-line); font-size: 15.5px; color: var(--a-t1);
}
.presentacion .app-meta b { font-size: 16.5px; font-weight: 700; color: var(--a-t0); }
.presentacion .app-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--a-g2); }
.presentacion .app-barra i { display: block; height: 100%; background: var(--a-now); }

/* ── Los botones de la aplicación · `.btn` ─────────────────────────────── */
.presentacion .app-btn {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-align: center;
  background: var(--a-marca); color: #FFFFFF;
}
.presentacion .app-btn.dos { background: var(--a-g2); color: var(--a-t0); }
.presentacion .app-btn.hueco { background: var(--a-hueco-bg); color: var(--a-hueco); border: 1px dashed var(--a-hueco-linea); }
.presentacion .app-btn.fantasma { background: none; color: var(--a-t1); border: 1px solid var(--a-line-2); }
/* EL DEDO. Lo que se pulsa en cada paso lleva un aro de la marca, quieto, y
   un latido que se apaga una vez: con el movimiento reducido queda el aro. */
.presentacion .pulsa { box-shadow: 0 0 0 3px rgba(83, 58, 253, .32); }
@keyframes maqueta-pulsa { 0% { box-shadow: 0 0 0 0 rgba(83, 58, 253, .55); } 100% { box-shadow: 0 0 0 3px rgba(83, 58, 253, .32); } }
@media (prefers-reduced-motion: no-preference) { .presentacion .pulsa { animation: maqueta-pulsa .7s ease-out both; } }

/* ── LA HOJA DE ABAJO · `.hoja` ────────────────────────────────────────────
   Lo que en la aplicación se abre al tocar un bloque o «+ Bloque». Cuelga
   del teléfono —no del cuerpo— para salir de abajo del todo, tapando la
   barra.

   EL VELO ES UNA CAPA DEL TAMAÑO DE LA PANTALLA, NO UNA SOMBRA. Era la
   sombra de la hoja, de 100vmax por cada lado, recortada por la pantalla. Al
   animarse la hoja, el navegador la pintaba en una capa propia con la sombra
   entera: en un móvil de tres píxeles por punto, decenas de millones de
   píxeles para un velo que se ve en 340 × 740. Desplazar mientras salía una
   hoja iba a tirones. */
.presentacion .app-hoja {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-height: 84%; overflow: hidden;
  padding: 8px 16px 26px; background: var(--a-g1); border-top: 1px solid var(--a-line); border-radius: 18px 18px 0 0;
}
.presentacion .ventana:has(.app-hoja)::after, .presentacion .ventana:has(.app-modal)::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(8, 9, 12, .42);
}
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .presentacion .ventana:has(.app-hoja)::after, .presentacion .ventana:has(.app-modal)::after { animation: velo-entra .25s ease-out both; } }
.presentacion .app-hoja::before {
  content: ''; display: block; width: 34px; height: 4px; margin: 6px auto 14px; border-radius: 2px; background: var(--a-line-2);
}
.presentacion .app-hoja-titulo { display: block; margin: 0 0 3px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.presentacion .app-hoja-pie { display: block; margin: 0 0 16px; font-size: 13.5px; color: var(--a-t2); }
.presentacion .app-hoja p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--a-t1); }
.presentacion .app-seccion {
  display: block; margin: 18px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--a-marca);
}
.presentacion .app-hoja-pie + .app-seccion { margin-top: 0; }
/* Las dos pestañas del panel, la elegida en violeta: `.pestanas` en la app. */
.presentacion .app-pestanas { display: flex; gap: 4px; padding: 4px; margin: 0 0 6px; border-radius: 10px; background: var(--a-g2); }
.presentacion .app-pestanas span {
  flex: 1; display: grid; place-items: center; min-height: 36px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--a-t1);
}
.presentacion .app-pestanas span.on { background: var(--a-marca); color: #FFFFFF; }
.presentacion .app-pestanas + .app-seccion { margin-top: 12px; }
.presentacion .app-hoja-pie.nota { margin: 10px 0 0; }
.presentacion .app-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.presentacion .app-acciones .app-btn { flex: 1 1 130px; }
.presentacion .app-hoja > .app-btn { width: 100%; margin-top: 12px; }
/* SALTAR Y BORRAR · `.acciones-mini`: un símbolo, la palabra y debajo, en
   pequeño, lo que pasa. */
.presentacion .app-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.presentacion .app-mini > span { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--a-line-2); border-radius: 10px; }
.presentacion .app-mini b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--a-t0); }
.presentacion .app-mini b::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
.presentacion .app-mini small { font-size: 12px; line-height: 1.3; color: var(--a-t1); }
.presentacion .app-mini .saltar b { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 14.5C4.5 8.5 12.5 6.5 16 12'/%3E%3Cpath d='M16.6 8.2 16 12l-3.8-.7'/%3E%3Cpath d='M3 17.5h6'/%3E%3C/svg%3E"); }
.presentacion .app-mini .borrar b { color: #B02A1C; --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5h13'/%3E%3Cpath d='M8 5.5V3.5h4v2'/%3E%3Cpath d='M5.5 5.5l.8 11h7.4l.8-11'/%3E%3Cpath d='M8.5 9v4.5M11.5 9v4.5'/%3E%3C/svg%3E"); }
/* LA CITA CON HORA FIJA · `.cita-fija`, en «+ Bloque»: la explicación y el
   interruptor de Ajustes. */
.presentacion .app-cita { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.presentacion .app-cita > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.presentacion .app-cita b { font-size: 14.5px; font-weight: 600; }
.presentacion .app-cita small { font-size: 12.5px; line-height: 1.35; color: var(--a-t1); }
.presentacion .app-cita i {
  flex: 0 0 auto; position: relative; width: 42px; height: 25px; border-radius: 13px; border: 1px solid var(--a-t2); background: var(--a-g2);
}
.presentacion .app-cita i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.presentacion .app-cita i.on { background: var(--a-marca); border-color: var(--a-marca); }
.presentacion .app-cita i.on::after { left: 20px; }
.presentacion .app-etiqueta { display: block; margin: 12px 0 8px; font-size: 12px; font-weight: 600; color: var(--a-t1); }
.presentacion .app-campo {
  display: flex; align-items: center; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--a-line-2);
  border-radius: 9px; background: var(--a-g0); font-size: 15px; color: var(--a-t0); white-space: nowrap; overflow: hidden;
}
.presentacion .app-campo.pista { color: var(--a-t2); }
.presentacion .app-fila { display: flex; gap: 8px; margin-top: 8px; }
.presentacion .app-fila .app-campo { flex: 1; }
.presentacion .app-fila .app-campo + .app-campo { flex: 0 0 92px; justify-content: flex-end; }

/* Las tareas: casilla, importancia, título y quitar, cada uno en su área de
   44 px. Los márgenes de la casilla y del cuadradito son los que les faltan
   para llegar a ella. */
.presentacion .demo-tarea { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--a-line); }
.presentacion .demo-tarea:last-child { border-bottom: 0; }
.presentacion .demo-casilla {
  flex: 0 0 auto; width: 19px; height: 19px; margin: 0 12.5px; border-radius: 6px; border: 1.5px solid var(--a-line-2);
}
.presentacion .demo-casilla.on { background: var(--a-done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 8 14.5 16 6'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--a-done); }
.presentacion .demo-imp {
  display: inline-block; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 4px; border: 2px solid currentColor;
}
.presentacion .demo-tarea .demo-imp { margin: 0 15.5px; }
.presentacion .demo-imp.alta { color: #B02A1C; background: currentColor; }
.presentacion .demo-imp.media { color: #A85E00; background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.presentacion .demo-imp.baja { color: #7D6100; }
.presentacion .demo-tarea .txt { flex: 1; min-width: 0; padding: 7px 0; font-size: 14.5px; color: var(--a-t0); }
.presentacion .demo-tarea.hecha .txt { color: var(--a-t2); text-decoration: line-through; }
.presentacion .demo-tarea .quitar { flex: 0 0 44px; text-align: center; font-size: 16px; font-style: normal; color: var(--a-t2); }
.presentacion .tres-imp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* La importancia y «Añadir tarea» en una fila, como `.fila-imp` en la
   aplicación: las tres juntas, a 6 px, y el botón aparte, a 10. */
.presentacion .fila-imp { display: flex; gap: 10px; align-items: stretch; }
.presentacion .fila-imp .tres-imp { flex: 1 1 auto; min-width: 0; }
.presentacion .fila-imp > .app-btn { flex: 0 0 auto; padding: 0 12px; }
.presentacion .opcion-imp {
  min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 2px;
  border: 1px solid var(--a-t2); border-radius: 8px; background: var(--a-g1); color: var(--a-t1); font-size: 12px; font-weight: 600;
}
.presentacion .opcion-imp.on { border-color: var(--a-marca); box-shadow: inset 0 0 0 1px var(--a-marca); background: var(--a-marca-bg); }

/* ── HORARIO TIPO · `Plantilla.tsx` en el teléfono ─────────────────────────
   El día entero en una pantalla: en «Hoy» la altura es la duración y una
   jornada partida no cabe sin desplazar. Aquí cada bloque es una fila con sus
   minutos, que es justo la pantalla donde se monta un martes tipo. */
.presentacion .ventana-cabecera.sub { grid-template-areas: 'estado estado estado' 'atras dia dia'; padding: 0 0 12px; }
.presentacion .ventana-cabecera.sub::before { display: none; }
.presentacion .ventana-cabecera.sub strong { padding-left: 4px; font-size: 18px; letter-spacing: -.025em; }
.presentacion .app-atras { grid-area: atras; width: 32px; margin: 4px 0 0 16px; font-size: 21.5px; color: var(--a-t2); }
.presentacion .app-dias { display: flex; gap: 3px; padding: 2px; margin: 2px 0 16px; border-radius: 9px; background: var(--a-g2); }
/* La tira, igual que en la aplicación (`.dias` en `apps/web/src/estilo.css`,
   con las medidas): los días sin elegir en `--a-t1`, porque `--t2` daba
   4,30:1 sobre su gris, y el descanso con una raya discontinua y no con
   opacidad, que dejaba la letra en 1,77:1. */
.presentacion .app-dias span { flex: 1; padding: 7px 0; border: 1px solid transparent; border-radius: 7px; text-align: center; font-size: 13px; font-weight: 700; color: var(--a-t1); }
.presentacion .app-dias .on { background: var(--a-marca); color: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.presentacion .app-dias .descanso { border-style: dashed; border-color: var(--a-t2); }
.presentacion .tramo-linea .pl-suma { text-transform: none; letter-spacing: 0; color: var(--a-t1); font-weight: 600; font-size: 13.5px; }
.presentacion .app-pl-fila {
  display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 5px 0 5px 12px; margin-bottom: 6px;
  background: var(--a-g1); border: 1px solid var(--a-line); border-radius: 10px;
}
.presentacion .app-pl-fila .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.presentacion .app-pl-min { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--a-t2); }
.presentacion .app-pl-min b {
  width: 46px; padding: 4px 6px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-g0);
  text-align: right; font-size: 13px; font-weight: 400; color: var(--a-t1);
}
.presentacion .app-pl-fila .quitar { flex: 0 0 26px; text-align: center; font-size: 16px; font-style: normal; color: var(--a-t2); }
/* El asa de los seis puntos, a la derecha del aspa: `.pl-asa`. */
.presentacion .app-pl-fila .asa {
  flex: 0 0 22px; height: 18px; margin-right: 6px; background: var(--a-t2);
  -webkit-mask: var(--puntos) center / 18px no-repeat; mask: var(--puntos) center / 18px no-repeat;
  --puntos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='black'%3E%3Ccircle cx='7' cy='5' r='1.6'/%3E%3Ccircle cx='13' cy='5' r='1.6'/%3E%3Ccircle cx='7' cy='10' r='1.6'/%3E%3Ccircle cx='13' cy='10' r='1.6'/%3E%3Ccircle cx='7' cy='15' r='1.6'/%3E%3Ccircle cx='13' cy='15' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.presentacion .app-pl-fila.hueco { background: var(--a-hueco-bg); border-style: dashed; border-color: var(--a-hueco-linea); }
.presentacion .app-pl-fila.hueco .n { font-weight: 500; color: var(--a-hueco); }
.presentacion .app-pl-fila.hueco .app-pl-min, .presentacion .app-pl-fila.hueco .quitar { color: var(--a-hueco); }
.presentacion .app-pl-fila.hueco .asa { background: var(--a-hueco); }
.presentacion .app-pl-adds { display: flex; gap: 8px; margin: 2px 0 8px; }
.presentacion .app-pl-adds span {
  flex: 1 1 0; min-width: 0; padding: 12px 6px; border: 1px dashed var(--a-line-2); border-radius: 10px;
  text-align: center; font-size: 14px; font-weight: 600; color: var(--a-t2); white-space: nowrap;
}
.presentacion .app-pl-adds .hueco { color: var(--a-hueco); border-color: var(--a-hueco-linea); }
.presentacion .app-pl-fila.prep { background: var(--a-marca-bg); border-color: #C7B9FA; padding-right: 10px; }
.presentacion .app-pl-fila.prep .n { display: grid; gap: 1px; white-space: normal; }
.presentacion .app-pl-fila.prep small { font-size: 12.5px; font-weight: 500; color: var(--a-t1); }
.presentacion .app-pl-fila.prep .mono { flex: 0 0 auto; font-size: 13px; color: var(--a-t1); }
/* «Repetir el martes en toda la semana», debajo de los tramos, como en el
   Horario tipo del teléfono. Guardar solo sale con cambios, así que aquí no. */
.presentacion .app-pl-copiar {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 11px 12px;
  border: 1px dashed var(--a-line-2); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--a-t0);
}
.presentacion .app-pl-copiar i { font-style: normal; color: var(--a-marca); }
/* Deshabilitado es gris lleno, no violeta a medias: como en la aplicación. */
.presentacion .app-btn.apagado { background: #D6D1E8; color: #53565F; }

/* ── PROGRESO · `Progreso.tsx` en el teléfono ─────────────────────────────
   Las tres partes de la pestaña, con las medidas del teléfono: el
   porcentaje en grande y con el borde de la marca, la racha y los días
   cerrados al lado; y el calendario de diez por fila, sin números, con su
   leyenda encima. */
.presentacion .ventana-cabecera.pg strong { font-size: 18px; letter-spacing: -.025em; }
.presentacion .app-pg-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.presentacion .app-pg-dato { padding: 13px 10px 12px; text-align: center; background: var(--a-g1); border: 1px solid var(--a-line); border-radius: 12px; }
.presentacion .app-pg-dato.mayor { grid-column: 1 / -1; padding: 20px 14px 18px; border-color: var(--a-marca); box-shadow: 0 10px 30px -22px var(--a-marca); }
.presentacion .app-pg-k { margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-t2); }
.presentacion .app-pg-num { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--a-marca); }
.presentacion .app-pg-dato.mayor .app-pg-num { font-size: 62px; }
.presentacion .app-pg-num small { font-size: 32px; }
.presentacion .app-pg-lbl { margin: 7px 0 0; font-size: 13px; font-weight: 500; color: var(--a-t1); }
.presentacion .app-pg-bloque { margin-bottom: 12px; padding: 16px 16px 18px; background: var(--a-g1); border: 1px solid var(--a-line); border-radius: 12px; }
.presentacion .app-pg-t { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-marca); }
/* El rótulo del calendario y su leyenda, en la misma línea, como en la app. */
.presentacion .app-pg-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.presentacion .app-pg-cab .app-pg-t { margin: 0; }
/* EL CALENDARIO POR MESES, como `.cal` en la aplicación: siete columnas de
   lunes a domingo, el día dentro y una raya entre un mes y otro. */
.presentacion .app-cal-mes + .app-cal-mes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--a-line); }
.presentacion .app-cal-t { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--a-t0); }
.presentacion .app-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.presentacion .app-cal b { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-align: center; color: var(--a-t2); }
.presentacion .app-cal i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: #D6D1E8; font-style: normal; }
.presentacion .app-cal i span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; color: var(--a-t1); }
.presentacion .app-cal i.cumplido span { color: var(--a-g1); }
.presentacion .app-cal i.parcial span { color: var(--a-t0); }
.presentacion .app-cal i.descanso span { color: var(--a-t2); }
.presentacion .app-cal i.vacio { background: none; }
.presentacion .app-cal i.hoy { box-shadow: 0 0 0 2px var(--a-marca); }
.presentacion .app-cal i.cumplido { background: var(--a-done); }
/* Parcial, mezclado con el papel y no transparente, como en la aplicación. */
.presentacion .app-cal i.parcial { background: color-mix(in srgb, var(--a-done) 42%, var(--a-g1)); }
.presentacion .app-cal i.descanso { background: none; border: 1px dashed var(--a-line-2); }
.presentacion .app-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--a-t2); }
.presentacion .app-leyenda b { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.presentacion .app-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #D6D1E8; }
.presentacion .app-leyenda i.cumplido { background: var(--a-done); }
.presentacion .app-leyenda i.parcial { background: color-mix(in srgb, var(--a-done) 42%, var(--a-g1)); }
.presentacion .app-leyenda i.descanso { background: none; border: 1px dashed var(--a-line-2); }
/* Lo que señala la nota, recortado con el borde de la marca. */
.presentacion .app-pg-dato.destacado, .presentacion .app-pg-bloque.destacado { border-color: var(--a-marca); box-shadow: 0 0 0 1px var(--a-marca); }

/* ── EL PAPEL · la plantilla para imprimir ──────────────────────────────────
   La única maqueta que no es un teléfono, porque no enseña la aplicación:
   enseña cómo se rellena la hoja impresa. Lleva las tintas de la hoja de
   verdad (`.hoja` en `seo/estilo.css`): franjas de media hora, la hora a la
   izquierda y cada bloque dibujado encima de las suyas. */
.presentacion .papel {
  width: min(100%, 380px); padding: 20px 20px 16px; border-radius: 6px; background: #FFFFFF; color: var(--tinta);
  box-shadow: 0 34px 70px -34px rgba(16, 14, 26, .7); transform: rotate(-1.2deg);
}
@media (prefers-reduced-motion: reduce) { .presentacion .papel { transform: none; } }
.presentacion .papel-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); font-size: 12.5px; color: #55536A; }
.presentacion .papel-cab b { font-size: 17px; letter-spacing: -.02em; color: var(--tinta); }
.presentacion .papel-horas { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1.5px solid var(--tinta); }
.presentacion .papel-horas li { position: relative; display: grid; grid-template-columns: 48px 1fr; min-height: 36px; border-bottom: 1px solid #CFCBDD; }
.presentacion .papel-horas li:nth-child(even) { border-bottom-style: dotted; }
.presentacion .papel-horas time { padding: 6px 8px 0 0; border-right: 1.5px solid var(--tinta); text-align: right; font-size: 11.5px; }
.presentacion .papel-horas li:nth-child(even) time { color: #55536A; }
/* El nombre y las franjas en la misma línea: en un bloque de una sola franja
   (28 px) no caben dos. */
.presentacion .papel-bloque {
  position: absolute; z-index: 1; left: 56px; right: 6px; top: 4px; height: calc(var(--franjas) * 36px - 8px);
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
  border: 1.5px solid var(--tinta); border-radius: 8px; background: #F0EDFF;
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
}
.presentacion .papel-bloque small { margin-left: auto; white-space: nowrap; font-size: 11.5px; font-weight: 500; color: #55536A; }

/* La lista desplazada: la de las 17:00, que ya va por la tarde, o Progreso
   bajando hasta la constancia. La tarjeta de ahora se queda quieta arriba,
   como en el teléfono, y es la lista la que se desplaza por debajo
   (`data-al-final`, que bajan `demostraciones.js` y la guía). */
.presentacion .demo-escena:has(> .app-lista), .presentacion .ventana-dia:has(> .app-lista) { display: flex; flex-direction: column; }
.presentacion .demo-escena:has(> .app-lista) > *, .presentacion .ventana-dia:has(> .app-lista) > * { flex: none; }
.presentacion .demo-escena > .app-lista, .presentacion .ventana-dia > .app-lista { flex: 1 1 0; min-height: 0; overflow: hidden; }

/* ══ EL ALTA Y EL INICIO · las pantallas de antes de Hoy ═════════════════════
   Solo las pinta el recorrido del héroe (`recorrido.js`): crear la cuenta,
   decir la jornada y escribir los bloques. Copiadas de `Entrar.tsx` y
   `Onboarding.tsx` con las medidas del teléfono (`.entrada` y `.ob` en
   `apps/web/src/estilo.css`, `.ob-config` en `bienvenida.css`). El recorrido
   pone `data-modo` en el teléfono: allí no hay barra de abajo ni la cabecera
   de Hoy, y aquí tampoco. */
.presentacion .ventana[data-modo='alta'] .movil-tabs, .presentacion .ventana[data-modo='inicio'] .movil-tabs { display: none; }
.presentacion .ventana[data-modo='alta'] .ventana-cabecera, .presentacion .ventana[data-modo='inicio'] .ventana-cabecera { padding: 0; }
.presentacion .ventana[data-modo='alta'] .ventana-cabecera::before, .presentacion .ventana[data-modo='inicio'] .ventana-cabecera::before { display: none; }
/* La pantalla entera, de borde a borde, y la que se desplaza cuando lo
   siguiente queda abajo: «Monta tu día» no cabe de una vez, como en el
   teléfono de verdad. */
.presentacion .ventana-dia:has(> .app-pantalla) { display: flex; flex-direction: column; }
.presentacion .app-pantalla {
  flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  margin: 0 -16px -16px; padding: 0 20px 20px;
}
.presentacion .app-pantalla .app-btn { flex: 0 0 auto; }
.presentacion .app-alta { background: var(--a-g1); }
/* La franja violeta con el logotipo en blanco, el maestro C03: es la marca
   de la entrada en el teléfono (`.marca-top`). */
.presentacion .ap-banda {
  flex: 0 0 auto; display: block; height: 56px; margin: 0 -20px 30px;
  background: var(--a-marca) url('marca/con-icono/BLOKKED-v2-01-C03-con-icono.svg') no-repeat 20px center / 122px auto;
}
.presentacion .ap-titulo { margin: 0 0 10px; font-size: 29px; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.presentacion .ap-intro { margin: 0 0 24px; font-size: 15.5px; line-height: 1.5; color: var(--a-t1); }
.presentacion .ap-etq {
  display: block; margin: 0 0 7px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--a-t1);
}
/* EL BORDE ES `--t2`, como en la entrada: un campo tiene que llegar a 3:1. */
.presentacion .app-alta .app-campo { flex: 0 0 auto; height: 50px; margin-bottom: 16px; padding: 0 15px; border-color: var(--a-t2); border-radius: 12px; background: var(--a-g1); font-size: 16px; }
.presentacion .app-alta .app-btn { height: 54px; margin-top: 8px; border-radius: 14px; font-size: 16.5px; font-weight: 700; }
.presentacion .ap-pie { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--a-t2); text-align: center; }
.presentacion .ap-pie u { color: var(--a-marca); font-weight: 600; text-underline-offset: 2px; }
.presentacion .ap-legal { margin-top: 8px; font-size: 12px; }
.presentacion .ap-legal u { color: inherit; font-weight: 400; }

.presentacion .ob-logo { flex: 0 0 auto; display: block; width: 108px; aspect-ratio: 5613 / 804; margin: 14px 0 20px; background: url('marca/con-icono/BLOKKED-v2-01-C01-con-icono.svg') no-repeat left center / contain; }
/* «Conoce · Tu jornada · Tus bloques · Tu día», con el paso de ahora en
   violeta: `.ob-progreso`. */
.presentacion .ob-pasos { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.presentacion .ob-pasos li { flex: 1; min-width: 0; padding-top: 7px; border-top: 2px solid var(--a-line-2); font-size: 11px; line-height: 1.25; color: var(--a-t2); }
.presentacion .ob-pasos li.on { border-color: var(--a-marca); color: var(--a-marca); font-weight: 700; }
.presentacion .ob-h { margin: 0 0 8px; font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.presentacion .ob-intro { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--a-t1); }
.presentacion .ob-intro b { color: var(--a-t0); }
.presentacion .ob-jornadas { display: grid; gap: 10px; margin-bottom: 4px; }
.presentacion .ob-jor { display: grid; gap: 3px; padding: 14px 15px; border: 1px solid var(--a-t2); border-radius: 12px; background: var(--a-g1); }
.presentacion .ob-jor.on { border-color: var(--a-marca); box-shadow: 0 0 0 1px var(--a-marca); }
.presentacion .ob-jor b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.presentacion .ob-jor small { font-size: 13px; line-height: 1.35; color: var(--a-t2); }
/* La forma del día: dos barras con un parón en medio, o una larga. */
.presentacion .ob-forma { display: flex; align-items: center; gap: 4px; height: 8px; margin-bottom: 7px; }
.presentacion .ob-forma i { display: block; width: 42px; height: 8px; border-radius: 3px; background: var(--a-marca); opacity: .9; }
.presentacion .ob-forma i.larga { width: 88px; }
.presentacion .ob-forma i.sep { width: 12px; height: 0; background: none; border-top: 2px dotted var(--a-line-2); }
.presentacion .ob-preg { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--a-line); font-size: 15px; font-weight: 500; }
.presentacion .ob-preg span { flex: 1; }
.presentacion .ob-preg b {
  flex: 0 0 auto; display: grid; place-items: center; width: 92px; height: 40px; border: 1px solid var(--a-t2); border-radius: 8px;
  background: var(--a-g0); font-size: 15px; font-weight: 600;
}
.presentacion .ob-abajo { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; }
.presentacion .ob-tramo { margin-bottom: 14px; }
.presentacion .ob-seccion {
  display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-marca);
}
.presentacion .ob-seccion .mono { font-size: 12px; letter-spacing: 0; color: var(--a-t2); }
.presentacion .ob-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.presentacion .ob-fila .app-campo { flex: 1; min-width: 0; height: 42px; border-color: var(--a-t2); }
.presentacion .ob-fila .app-campo.min { flex: 0 0 56px; justify-content: flex-end; }
.presentacion .ob-fila .quitar { flex: 0 0 30px; text-align: center; font-size: 15px; font-style: normal; color: var(--a-t2); }
/* «+ Otro bloque» y «+ Hueco», uno al lado del otro, y la fila del Hueco con
   su lila discontinuo, como en el horario tipo (`.pl-fila.libre`). */
.presentacion .ob-adds { display: flex; gap: 8px; }
.presentacion .ob-add { flex: 1 1 0; min-width: 0; display: grid; place-items: center; height: 40px; border: 1px dashed var(--a-line-2); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--a-t2); white-space: nowrap; }
.presentacion .ob-add.hueco { color: var(--a-hueco); border-color: var(--a-hueco-linea); }
.presentacion .ob-fila.hueco .app-campo { background: var(--a-hueco-bg); border-style: dashed; border-color: var(--a-hueco); color: var(--a-hueco); font-weight: 500; }
.presentacion .ob-fila.hueco .quitar { color: var(--a-hueco); }
.presentacion .ob-legal { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--a-t2); }
.presentacion .ob-legal b { color: var(--a-t1); }
/* En un teléfono de 320 la fila no daba para «Preparar propuestas»: los
   minutos y el aspa ceden lo que pueden. Lo que siga sin caber se corta,
   como en la aplicación a ese ancho. */
@container (max-width: 300px) {
  .presentacion .ob-fila { gap: 6px; }
  .presentacion .ob-fila .app-campo { padding: 0 9px; font-size: 14px; }
  .presentacion .ob-fila .app-campo.min { flex-basis: 44px; }
  .presentacion .ob-fila .quitar { flex-basis: 18px; }
}

/* ── LO QUE SE ESCRIBE, LO QUE SE ARRASTRA Y EL CIERRE ───────────────────── */
/* El campo en el que se escribe: el borde y el halo de `.campo:focus`, y un
   cursor que parpadea detrás de la última letra. */
.presentacion .app-campo.escribiendo { border-color: var(--a-marca); box-shadow: 0 0 0 3px rgba(83, 58, 253, .2); color: var(--a-t0); }
.presentacion .app-campo.escribiendo::after {
  content: ''; flex: 0 0 auto; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--a-marca);
  animation: cursor-parpadea 1s steps(1) infinite;
}
@keyframes cursor-parpadea { 50% { opacity: 0; } }
/* El bloque que se lleva el dedo, por encima de los demás. */
.presentacion .bloque.levantado { position: relative; z-index: 2; }
.presentacion .bloque.levantado .bloque-cuerpo { border-color: var(--a-marca); box-shadow: 0 0 0 1px var(--a-marca), 0 18px 30px -16px rgba(16, 14, 26, .55); }
/* LA VENTANA DEL CIERRE, en el centro y encima del velo: `.cierre-modal`.
   Se centra con `translate` y no con `transform`, que es lo que anima al
   aparecer. */
.presentacion .app-modal {
  position: absolute; z-index: 5; left: 16px; right: 16px; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 18px;
  background: var(--a-g1); border: 1px solid var(--a-line); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(8, 9, 12, .5);
}
.presentacion .app-modal-t { margin: 0 0 2px; font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.presentacion .app-modal-dato { margin: 0; font-size: 16px; font-weight: 600; }
.presentacion .app-modal-botones { display: flex; gap: 10px; margin-top: 12px; }
.presentacion .app-modal-botones .app-btn.dos { flex: 0 0 auto; padding: 0 18px; white-space: nowrap; }
/* «Día cerrado. Ya no se puede editar.»: la banda gris de `.banda.info`. */
.presentacion .app-aviso { margin: 0 0 14px; padding: 10px 13px; border: 1px solid var(--a-line-2); border-radius: 10px; background: var(--a-g2); font-size: 13.5px; font-weight: 500; color: var(--a-t1); }

/* ── LAS SEÑALES · lo que se dice fuera del teléfono ──────────────────────
   Una nota que apunta, con una raya y un punto, a lo que acaba de cambiar en
   la pantalla. La pone `senalar`, en `maquetas.js`, una a la vez, y la
   coloca al lado del teléfono si cabe sin pisar el texto de alrededor, un
   botón ni otro teléfono; si no, dentro, encima o debajo de lo que señala,
   donde no tape la mano ni lo importante (`colocar`). Por eso el ancho del
   texto (`--ancho`) y el largo de la raya (`--largo`) los decide ella. Es
   decoración: la frase entera, para quien no la ve, está en el pie o en el
   texto de la sección.

   EL LILA CON LA TINTA ENCIMA, 11:1, sobre el violeta, la tinta y el
   teléfono; sobre el tramo lila, al revés. */
.presentacion .senal {
  --senal-fondo: var(--lila); --senal-txt: var(--tinta);
  position: absolute; z-index: 9; left: var(--x); top: var(--y); width: 0; height: 0; pointer-events: none;
}
.presentacion .s-lila .senal { --senal-fondo: var(--tinta); --senal-txt: #FFFFFF; }
.presentacion .senal::before { content: ''; position: absolute; background: var(--senal-fondo); }
.presentacion .senal-punto {
  position: absolute; z-index: 1; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--violeta); border: 3px solid #FFFFFF;
}
.presentacion .senal-texto {
  position: absolute; width: max-content; max-width: var(--ancho, 210px); padding: 9px 13px; border-radius: 10px;
  background: var(--senal-fondo); color: var(--senal-txt);
  font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-align: left;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
}
.presentacion .senal.izquierda::before { right: 0; top: -1px; width: var(--largo); height: 2px; }
.presentacion .senal.izquierda .senal-texto { right: var(--largo); top: 0; transform: translateY(-50%); }
.presentacion .senal.derecha::before { left: 0; top: -1px; width: var(--largo); height: 2px; }
.presentacion .senal.derecha .senal-texto { left: var(--largo); top: 0; transform: translateY(-50%); }
.presentacion .senal.encima::before { left: -1px; bottom: 0; width: 2px; height: var(--largo, 22px); }
.presentacion .senal.encima .senal-texto { bottom: var(--largo, 22px); left: var(--desvio, 0px); transform: translateX(-50%); }
.presentacion .senal.debajo::before { left: -1px; top: 0; width: 2px; height: var(--largo, 22px); }
.presentacion .senal.debajo .senal-texto { top: var(--largo, 22px); left: var(--desvio, 0px); transform: translateX(-50%); }
/* Entra una vez y el punto late tres veces; con el movimiento reducido, se
   queda quieta desde el principio. EL LATIDO ES UN ANILLO QUE CRECE Y SE
   APAGA (escala y opacidad), debajo del punto: era una sombra que crecía, y
   una sombra animada se vuelve a pintar en cada fotograma, que es lo que se
   nota al desplazar en un móvil. */
@keyframes senal-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes senal-late { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.7); } }
.presentacion .senal::after {
  content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--violeta); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .presentacion .senal { animation: senal-entra .3s ease-out both; }
  .presentacion .senal::after { animation: senal-late 1.4s ease-out .3s 3; }
}

/* EN CADA PASO SE MUEVE LO QUE CAMBIA, con un leve desliz: la hoja que
   sale, lo que se destaca y las horas que se desplazan. Antes se deslizaba
   la pantalla entera en cada paso —la tarjeta de ahora, cada ficha, cada
   rótulo—, y lo que no había cambiado también daba un saltito: en el móvil
   el teléfono entero parecía temblar cada cinco segundos. Con el movimiento
   reducido no hay pasos: se enseña el último, quieto. */
@keyframes portada-aparece { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.presentacion .demo-escena.animada .app-hoja,
.presentacion .demo-escena.animada .destacado,
.presentacion .demo-escena.animada .movida .bloque-hora { animation: portada-aparece .3s ease both; }