/* The primitives of the library's blocks (core's andante.library), on a walk's
   page and on a note's. They wear the landing's own classes (the stamp, the
   hand, the block heading, the band); what is here is only what a primitive
   adds: a box's paper and layout, a photograph's frame and ratio, the roles of
   a line that the landing never named. */

/* --- Box: paper and layout --- */
/* a box that is not a section stands in a walk's reading column all the same, and so does a
   block whose root is a bare line, picture or list (a `credits` between two sections) */
main > div.pieza, main > aside.pieza, .paseo-cuerpo > :not(section, aside) {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--sangria);
}
.pieza--row {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.2rem;
  flex-wrap: wrap;
}
.pieza--row > * { margin-block: 0; }
.pieza--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
}
/* tiles: small pictures, each with its line under it, two abreast on a phone too */
.pieza--tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem clamp(0.8rem, 3vw, 1.6rem);
}
.pieza--tiles > .pieza-foto { margin: 0; min-width: 0; }
.pieza--tiles > .pieza-foto figcaption {
  font-family: var(--f-prosa);
  font-size: clamp(0.95rem, 2.6vw, 1.08rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinta);
}
/* a rail scrolls inside itself, so a row of cards never widens the page */
.pieza--rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.6rem 0.2rem 1rem;
  margin-inline: -0.2rem;
}
.pieza--rail > * { flex: 0 0 min(16rem, 78%); scroll-snap-align: start; }
/* on a wide sheet a rail with room to spare shares it out: two cards fill the row, more scroll as on a phone */
@media (min-width: 52rem) { .pieza--rail > * { flex-grow: 1; } }
/* a card is a postcard laid on the sheet: lighter paper, the letter's shadow, a hand's tilt */
.pieza--card {
  background: var(--papel-claro);
  box-shadow: var(--sombra-carta);
  border-radius: 3px;
  padding: 1.1rem 1.2rem 1.2rem;
  transform: rotate(var(--giro, 0deg));
}
.pieza--warm { background: var(--papel-hondo); border-radius: 3px; padding: 1rem 1.2rem; }
.pieza--sheet, main > .pieza.pieza--sheet { max-width: var(--hoja); }
aside.pieza--card { margin: 2.2rem 0; }
.pieza--card > :last-child { margin-bottom: 0; }
.pieza--card > .pieza-foto { margin: 0 0 0.7rem; }
/* A picture and its words (`split`): the picture over them on a phone, beside them on a wider
   screen; on a card the picture runs to the card's edges, as a postcard's picture does, and the
   words keep the card's margins. The words' own lines: a heading a step up, a door as wide as
   they are with air over it, a line under the door. */
.pieza--split { display: grid; gap: 1rem 1.6rem; }
.pieza--split > *, .pieza--split > .pieza-foto { margin: 0; min-width: 0; }
.pieza--split > .pieza-foto img { border-radius: 0; }
.pieza--split > .pieza-foto .foto-abrir:focus-visible { outline-offset: -3px; }
.pieza--card.pieza--split { padding: 0; overflow: hidden; border-radius: var(--curva); gap: 0; }
.pieza--card.pieza--split > :not(.pieza-foto) { padding: 1.2rem 1.25rem 1.4rem; }
@media (min-width: 36rem) {
  .pieza--split:has(> .pieza-foto) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .pieza--card.pieza--split:has(> .pieza-foto) { align-items: stretch; }
  .pieza--card.pieza--split:has(> .pieza-foto) > :not(.pieza-foto) { align-self: center; padding: 1.6rem 1.7rem 1.7rem 1.5rem; }
  /* beside the words the picture takes the card's height, cropped round its middle */
  .pieza--card.pieza--split > .pieza-foto :is(.foto-abrir, picture, img) { height: 100%; }
  .pieza--card.pieza--split > .pieza-foto img { object-fit: cover; min-height: 15rem; }
}
.pieza--split > .pieza > .pieza-h3 { font-size: 1.5rem; margin: 0 0 0.45rem; }
.pieza--split > .pieza > .pieza-pie { font-size: 0.95rem; line-height: 1.45; margin: 0; }
.pieza--split > .pieza > .estampilla-marco { margin-top: 1.2rem; }
/* a door stamp that stands in a stack, not in a row beside a price, is as wide as the stack:
   one look for every door of a page, the card's, the hero's and a door on its own */
.pieza:not(.pieza--row) > .estampilla-marco { display: block; }
.pieza:not(.pieza--row) > .estampilla-marco > .estampilla-btn { display: block; }
.pieza:not(.pieza--row) > .estampilla-marco + .pieza-pie { margin-top: 0.8rem; font-size: 0.85rem; }
/* a door on its own right after a block hangs from it, and keeps a block's air under itself */
.bloque + aside.pieza:not(.pieza--card) { margin-top: -1.8rem; padding-bottom: 2.8rem; }
.bloque + aside.pieza:not(.pieza--card) > :last-child { margin-bottom: 0; }
/* the air between library sections is theirs alone, the seam halfway: the last line of one
   adds none, and the next one starts at the seam */
section.pieza.bloque > :last-child, section.pieza.bloque > :last-child > :last-child { margin-bottom: 0; }
section.pieza.bloque:is(.bloque + *, aside.pieza + *) { padding-top: 0; }
section.pieza.bloque:is(.bloque + *, aside.pieza + *)::before { margin-bottom: 2.8rem; }
/* the way to the start under the map, a step off it */
.ruta-mapa + p { margin-top: 0.7rem; }

/* --- Lines in their roles --- */
.pieza-h3 {
  font-family: var(--f-prosa);
  font-style: italic;
  font-weight: 500;
  font-size: var(--escala-1);
  line-height: 1.2;
  margin: 0.2rem 0 0.3rem;
}
.pieza-lead { color: var(--tinta-suave); max-width: 32rem; margin-bottom: 1.4rem; }
.hero .pieza-lead { color: var(--tinta); font-size: var(--escala-1); line-height: 1.5; margin-bottom: 1.6rem; }
.pieza-pie { font-family: var(--f-ui); font-size: 0.88rem; color: var(--tinta-suave); }
.pieza-precio { margin: 0; }
.pieza-precio .ficha-precio { font-size: 1.5rem; }
.pieza .sello-texto { margin-bottom: 0.35rem; }
.pieza .mano { margin-bottom: 0.8rem; }
.pieza-enlace { color: var(--tinta); text-underline-offset: 0.2em; }
.pieza-enlace:hover { color: var(--estampilla); }

/* --- Lists --- */
.pieza-lista { margin: 1.1rem 0 1.6rem; padding-left: 1.2rem; }
.pieza-lista li { margin-bottom: 0.6rem; }
ul.pieza-lista { list-style: none; padding-left: 0; }
ul.pieza-lista li { position: relative; padding-left: 1.2rem; }
ul.pieza-lista li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--mansa);
}
.pieza-lista--route li::before { border-radius: 0; width: 0.55rem; height: 2px; top: 0.75em; }

/* --- Photographs: frame and ratio --- */
.pieza-foto { margin: 1.6rem 0 1.8rem; }
.pieza-foto picture { display: block; }
.pieza-foto img { display: block; width: 100%; height: auto; }
.pieza-foto--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.pieza-foto--2x1 img { aspect-ratio: 2 / 1; object-fit: cover; }
.pieza-foto--4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.pieza-foto--1x1 img { aspect-ratio: 1; object-fit: cover; }
.pieza-foto--plain img { border-radius: 3px; }
.pieza-foto--postcard {
  background: var(--papel-claro);
  padding: 0.55rem 0.55rem 0.8rem;
  box-shadow: var(--sombra-carta);
  transform: rotate(var(--giro, 0deg));
}
.pieza-foto--stamp { transform: rotate(var(--giro, 0deg)); }
/* a screen of the app in a phone's thin body, upright and narrow; on a wide screen its words beside it */
.pieza-foto--phone { display: grid; justify-items: center; gap: 0.8rem; }
.pieza-foto--phone .foto-abrir {
  width: min(15rem, 72%);
  padding: 0.45rem;
  background: var(--tinta);
  border-radius: 1.9rem;
  box-shadow: var(--sombra-carta);
}
.pieza-foto--phone img { border-radius: 1.5rem; }
/* the mark that opens it stands outside the body, off the screen's words */
.pieza-foto--phone .foto-abrir-marca { right: -2.6rem; bottom: 0; }
.pieza-foto--phone figcaption { margin: 0; text-align: center; max-width: 22rem; }
@media (min-width: 40rem) {
  .pieza-foto--phone { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: 0 3.2rem; }
  .pieza-foto--phone .foto-abrir { width: 100%; }
  .pieza-foto--phone figcaption { text-align: left; font-size: 1rem; }
}
.pieza-foto figcaption {
  font-family: var(--f-ui);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin-top: 0.6rem;
}
/* the posted stamp of a hero keeps the tilt its block gives it */
.pieza-foto.hero-tapa.estampilla-marco,
.pieza-foto.hero-tapa.estampilla-marco:hover { transform: rotate(var(--giro, -1.8deg)); }
/* a small stamp beside the words of a card, the walk's cover on its ticket */
.pieza--row > .pieza-foto--stamp:not(.hero-tapa) { flex: 0 0 6.5rem; margin: 0; }
.pieza--row > .pieza-foto--stamp + .pieza { flex: 1 1 10rem; }

/* --- A table: things side by side, the last column the page's own --- */
.pieza-tabla { margin: 1.2rem 0 1.4rem; font-family: var(--f-ui); }
.pieza-tabla table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.35; }
.pieza-tabla th, .pieza-tabla td { padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.pieza-tabla thead th { font-weight: 600; color: var(--tinta-suave); font-size: 0.85rem; }
.pieza-tabla tbody th { font-weight: 600; color: var(--tinta); }
.pieza-tabla td { color: var(--tinta-suave); }
.pieza-tabla tr > :last-child { background: var(--papel-claro); color: var(--tinta); font-weight: 600; }
.pieza-tabla thead tr > :last-child { color: var(--estampilla); }
/* on a phone each row is a card: the question on top, a line per column with its name */
@media (max-width: 40rem) {
  .pieza-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pieza-tabla table, .pieza-tabla tbody, .pieza-tabla tr, .pieza-tabla th, .pieza-tabla td { display: block; }
  .pieza-tabla tr { margin-bottom: 0.9rem; border-radius: 3px; background: var(--papel-hondo); overflow: hidden; }
  .pieza-tabla tbody th { padding: 0.55rem 0.8rem 0.3rem; border: 0; }
  .pieza-tabla td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; padding: 0.4rem 0.8rem; border: 0; border-top: 1px solid var(--linea); }
  .pieza-tabla td::before { content: attr(data-col); color: var(--tinta-suave); font-weight: 400; font-size: 0.82rem; }
  .pieza-tabla tbody tr > :last-child { background: var(--papel-claro); }
}

/* --- A door that only counts: once pressed, its words in its place --- */
.pieza-cuenta-hecho:not([hidden]) { display: inline-block; font-family: var(--f-ui); font-size: 0.92rem; color: var(--hecho); padding: 0.4rem 0; }

/* --- A first decision (js/demo.js): a scene of its own on the page, a case
   file laid on the paper (--card) or the night of the case (--night). The round
   player, its ring and clock running with the voice; then the crossing drawn,
   a way for each card; then the line and the desk, the scene's one red button.
   Both looks are the same parts over their own inks. --- */
.demo {
  --demo-fondo: var(--papel-claro);
  --demo-tinta: var(--tinta);
  --demo-suave: var(--tinta-suave);
  --demo-trazo: var(--tinta);
  --demo-borde: var(--linea);
  --demo-carta: var(--papel);
  --demo-calzada: var(--papel-hondo);
  --demo-manzana: #DED2B8;
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: 1.3rem 1.1rem 1.5rem;
  background: var(--demo-fondo);
  color: var(--demo-tinta);
  border-radius: 4px;
}
.demo--card { border: 1px solid var(--linea); box-shadow: var(--sombra-carta); margin-top: 1.4rem; }
.demo--night {
  --demo-fondo: #18203D;
  --demo-tinta: var(--papel);
  --demo-suave: #A9B0C6;
  --demo-trazo: #E6C27A;
  --demo-borde: rgba(243, 237, 226, 0.2);
  --demo-carta: rgba(243, 237, 226, 0.05);
  --demo-calzada: #232D52;
  --demo-manzana: #10162B;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(24, 32, 61, 0.35);
}

.demo-escena { display: grid; gap: 1.3rem; }
.demo-lamina { position: relative; display: block; }
.demo-lamina img { display: block; width: 100%; height: auto; }
/* the case file: the print pasted in with a strip of tape, a hand's tilt */
.demo--card .demo-lamina { background: #FFFDF8; padding: 0.4rem; box-shadow: 0 2px 10px rgba(38, 53, 95, 0.16); transform: rotate(-1.2deg); }
.demo--card .demo-lamina img { filter: sepia(0.2); }
.demo--card .demo-lamina::before {
  content: ''; position: absolute; z-index: 1; top: -0.65rem; left: 50%; width: 5.5rem; height: 1.3rem;
  background: rgba(228, 218, 190, 0.8); transform: translateX(-50%) rotate(2.5deg);
}
/* the night: the print darkened under the scene, fading into it */
.demo--night .demo-lamina { margin: -1.3rem -1.1rem 0; }
.demo--night .demo-lamina img { filter: grayscale(1) sepia(0.3) brightness(0.62) contrast(1.15); }
.demo--night .demo-lamina::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, var(--demo-fondo)); }

/* the file's tab carries the case's word in the site's small capitals, not a hand
   nobody reads (owner, 27.10.2026); at night it is lamplight */
/* the scene keeps its own spacing on a note too, over `.nota p` and the note's block headings */
.demo .demo-marca {
  margin: 0 0 0.3rem; font-family: var(--f-ui); font-size: 0.72rem; font-weight: 700; line-height: 1.9;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--demo-suave);
}
.demo--card .demo-marca {
  position: absolute; bottom: 100%; left: 1rem; margin: 0; padding: 0.15rem 1rem 0;
  background: var(--papel-claro); border: 1px solid var(--linea); border-bottom: 0; border-radius: 6px 6px 0 0;
}
.demo--night .demo-marca { color: var(--demo-trazo); }
.demo .bloque-titulo, .nota .pieza .demo .bloque-titulo { margin: 0 0 1.1rem; font-size: clamp(1.7rem, 6.6vw, 2.1rem); color: var(--demo-tinta); }

/* the player: a disc ringed by the voice's run, its words and clock beside it; the disc and
   its ring are one drawing, so they share a centre, and the icon lies in the same cell */
.demo-tocar {
  display: flex; align-items: center; gap: 0.65rem; padding: 0 0.4rem 0 0; margin-left: -0.45rem;
  background: none; border: 0; color: inherit; font-family: var(--f-ui); text-align: left; cursor: pointer;
}
.demo-disco {
  flex: none; display: grid; place-items: center; width: 5.3rem; height: 5.3rem;
  border-radius: 50%; color: var(--demo-fondo); transition: transform 0.15s;
}
.demo-disco > * { grid-area: 1 / 1; }
.demo-tocar:hover .demo-disco { transform: scale(1.04); }
.demo-tocar:focus-visible { outline: none; }
.demo-tocar:focus-visible .demo-disco { outline: 3px solid var(--demo-trazo); outline-offset: 0.3rem; }
.demo-disco [data-icono] svg { display: block; width: 1.7rem; height: 1.7rem; }
/* a triangle looks left of centre when its box is centred: its box sits 8% of the disc to the right */
.demo-disco [data-icono="oir"] { translate: calc(4.4rem * 0.08 - 1.7rem / 16) 0; }
.demo-anillo { width: 100%; height: 100%; fill: none; stroke-width: 3; }
.demo-anillo-disco { fill: var(--demo-trazo); stroke: none; }
.demo-anillo-pista { stroke: var(--demo-borde); }
.demo-anillo-lleno { stroke: var(--demo-trazo); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.25s linear; }
.demo-tocar-texto { display: grid; gap: 0.2rem; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.demo-reloj { display: flex; align-items: center; gap: 0.5rem; min-height: 1.2rem; font-size: 0.9rem; font-weight: 400; color: var(--demo-suave); font-variant-numeric: tabular-nums; }
.demo-ondas { display: none; align-items: flex-end; gap: 2px; height: 0.8rem; color: var(--demo-trazo); }
.demo--sonando .demo-ondas { display: inline-flex; }
.demo-ondas i { width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: demo-onda 0.9s ease-in-out infinite alternate; }
.demo-ondas i:nth-child(2) { animation-delay: -0.3s; }
.demo-ondas i:nth-child(3) { animation-delay: -0.6s; }
@keyframes demo-onda { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.demo .demo-pista { margin: 0.8rem 0 0; font-family: var(--f-ui); font-size: 0.92rem; color: var(--demo-suave); }
.demo .oir-estado { color: var(--demo-suave); }
.demo .oir-estado:empty { display: none; }

/* the crossing the voice leaves the player at, and the ways off it */
.demo-decision:not([hidden]) { display: grid; gap: 1.2rem; padding-top: 1.4rem; border-top: 1px dashed var(--demo-borde); animation: demo-llega 0.45s ease-out; }
@keyframes demo-llega { from { opacity: 0; transform: translateY(0.5rem); } }
.demo-cruce { justify-self: center; width: 100%; max-width: 11rem; background: var(--demo-calzada); border-radius: 6px; }
.demo-manzana { fill: var(--demo-manzana); }
.demo-calle { font-family: var(--f-ui); font-style: italic; font-size: 9.5px; fill: var(--demo-suave); }
.demo-camino { cursor: pointer; }
/* a way's touch area, wider than its stroke; staying's is only the corner itself, so a tap
   on the start of an arrow takes the arrow */
.demo-camino-toque { fill: transparent; stroke: transparent; stroke-width: 30; }
circle.demo-camino-toque { stroke: none; }
.demo-camino-flecha { fill: none; stroke: var(--demo-trazo); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: demo-traza 0.9s 0.25s ease-out both; transition: stroke-width 0.15s; }
@keyframes demo-traza { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.demo-camino-quieto { fill: none; stroke: var(--demo-trazo); stroke-width: 3; stroke-dasharray: 4 5; transition: stroke-width 0.15s; }
.demo-decision:not(.demo-decision--hecha) .demo-camino:hover :is(.demo-camino-flecha, .demo-camino-quieto),
.demo-camino--mira :is(.demo-camino-flecha, .demo-camino-quieto),
.demo-camino--elegido :is(.demo-camino-flecha, .demo-camino-quieto) { stroke-width: 6.5; }
/* a way taken: the others still answer a tap, with the line under the cards (js/demo.js) */
.demo-decision--hecha .demo-camino { cursor: default; transition: opacity 0.3s; }
.demo-decision--hecha .demo-camino:not(.demo-camino--elegido) { opacity: 0.18; }
/* the dot sits on staying's touch area and must not swallow its tap */
.demo-yo { fill: var(--demo-trazo); stroke: var(--demo-calzada); stroke-width: 3; pointer-events: none; }
.demo-puerta { fill: var(--demo-trazo); }

.demo .demo-pregunta { margin: 0; font-family: var(--f-prosa); font-size: 1.1rem; line-height: 1.45; color: var(--demo-tinta); }
.demo-opciones { display: grid; gap: 0.55rem; }
.demo-opcion {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 3.4rem; padding: 0.65rem 1rem 0.65rem 0.7rem;
  background: var(--demo-carta); border: 1px solid var(--demo-borde); border-radius: 8px;
  font-family: var(--f-ui); font-size: 1.05rem; font-weight: 600; color: var(--demo-tinta); text-align: left; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, opacity 0.3s;
}
.demo-decision:not(.demo-decision--hecha) .demo-opcion:hover { border-color: var(--demo-trazo); transform: translateY(-1px); }
.demo-opcion:focus-visible { outline: 2px solid var(--demo-trazo); outline-offset: 2px; }
.demo-rumbo { flex: none; width: 2.1rem; height: 2.1rem; padding: 0.35rem; border-radius: 50%; background: var(--demo-trazo); color: var(--demo-fondo); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: background 0.3s; }
.demo-rumbo circle { fill: currentColor; stroke: none; }
.demo-opcion-texto { display: grid; gap: 0.1rem; }
/* the way taken reads without the sound: filled in the scene's light and named in words;
   the others close, their glyph out of the light */
.demo-opcion-sello { display: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--demo-trazo); }
.demo-opcion.demo-opcion--elegida {
  cursor: default; border-color: var(--demo-trazo); box-shadow: inset 0 0 0 1px var(--demo-trazo);
  background: color-mix(in srgb, var(--demo-trazo) 14%, var(--demo-fondo));
}
.demo-opcion--elegida .demo-opcion-sello { display: block; }
.demo-opcion[aria-disabled="true"] { cursor: default; opacity: 0.38; border-style: dashed; }
.demo-opcion[aria-disabled="true"] .demo-rumbo { background: var(--demo-suave); }
.demo .demo-hecho { margin: 0.3rem 0 0; font-family: var(--f-ui); font-size: 0.95rem; line-height: 1.45; color: var(--demo-suave); }
.demo .demo-hecho:empty { display: none; }

.demo-fin:not([hidden]) { display: grid; gap: 1rem; justify-items: start; animation: demo-llega 0.45s ease-out; }
.demo .demo-fin-texto { margin: 0; font-family: var(--f-prosa); font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--demo-tinta); }

@media (prefers-reduced-motion: reduce) {
  .demo-ondas i, .demo-camino-flecha, .demo-decision:not([hidden]), .demo-fin:not([hidden]) { animation: none; }
  .demo-anillo-lleno { transition: none; }
}
/* a desktop lays the print beside the player and the crossing beside its cards */
@media (min-width: 48rem) {
  .demo { padding: 2rem 2.2rem 2.2rem; gap: 1.8rem; }
  .demo-escena:has(.demo-lamina) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2.2rem; }
  .demo--night .demo-lamina { align-self: stretch; margin: -2rem 0 -1.8rem -2.2rem; }
  .demo--night .demo-lamina img { height: 100%; object-fit: cover; }
  .demo--night .demo-lamina::after { background: linear-gradient(to right, transparent 50%, var(--demo-fondo)); }
  .demo-decision:not([hidden]) {
    grid-template-columns: 14rem minmax(0, 1fr); grid-template-areas: "cruce pregunta" "cruce opciones";
    align-content: center; gap: 0.9rem 2.2rem;
  }
  .demo-pregunta { grid-area: pregunta; align-self: end; }
  .demo-opciones { grid-area: opciones; align-self: start; }  .demo-cruce { grid-area: cruce; align-self: center; max-width: none; }
}

/* --- A game's first screen (the library's case-hero): no cover, the facts in
   three columns, the price card with its terms and gift under the button --- */
/* each fact as wide as its words, the row shared out: a long fact keeps one line */
.hero:not(:has(.hero-tapa)) .hero-datos { grid-template-columns: repeat(3, auto); max-width: 32rem; }
.hero .pieza--card { max-width: 32rem; margin-bottom: 1rem; padding: 0.9rem 1rem 0.75rem; border-radius: var(--curva); transform: none; font-family: var(--f-ui); }
.hero .pieza--card > .pieza--row:first-child { justify-content: space-between; flex-wrap: nowrap; }
.hero .pieza--card .btn-principal { flex: 1 1 auto; max-width: 15rem; text-align: center; font-size: 1.05rem; padding: 0.85rem 1rem; }
/* the drawing and the words under the name: on a wide screen the drawing takes the words' height */
@media (min-width: 40rem) {
  .hero .pieza--split:has(> .pieza-foto) { align-items: stretch; }
  .hero .pieza--split > .pieza-foto :is(.foto-abrir, picture, img) { height: 100%; }
  .hero .pieza--split > .pieza-foto img { object-fit: cover; object-position: 55% 100%; border-radius: 3px; }
}.pieza--card .pieza--row + .pieza--row { margin-top: 0.55rem; gap: 0 0.3rem; }
.pieza--row + .pieza--row .pieza-pie { font-size: 0.82rem; line-height: 1.4; }
/* a link among the terms under a price speaks their size */
.pieza--row + .pieza--row .pieza-enlace { font-family: var(--f-ui); font-size: 0.82rem; }
.pieza--row .pieza--row { gap: 0 0.3rem; }
.hero .sello-texto { margin-bottom: 0.2rem; }
.hero .nota-clave { margin: 0 0 0.6rem; }
.hero .nota-clave + p { margin: 0 0 0.7rem; }
.hero .pieza-lead ~ p:not([class]) { margin: 0 0 0.35rem; }
.hero .pieza-lead ~ .hero-datos { margin-top: 0.9rem; }
.hero > .pieza-enlace { font-family: var(--f-ui); font-size: 0.92rem; text-decoration: underline dotted var(--tinta-suave); }
@media (max-width: 40rem) {
  .hero:not(:has(.hero-tapa)) { padding-top: 0.8rem; }
  .hero:not(:has(.hero-tapa)) .hero-titulo { margin-bottom: 0.3rem; }
  .hero:not(:has(.hero-tapa)) .pieza-lead { font-size: 1.2rem; line-height: 1.4; margin-bottom: 0.7rem; }
  .hero .pieza--card { padding: 0.75rem 0.9rem 0.6rem; }
}

/* --- Listening in place --- */
.pieza-oir .oir-invita { margin-top: 0.4rem; }
.hero .pieza-oir { margin-bottom: 1.2rem; }

/* --- The door to the city's shelf, under a block's own door --- */
.pieza-puente { padding-block: 0.4rem 0; }
.pieza-puente .puente-o { margin-top: 0.4rem; }

/* --- On a note's page --- */
/* The hero of a note sits in the reading column: no landing grid, the stamp
   above the title, the title a size down from a walk's name. */
.nota .hero { padding: 0.4rem 0 1.4rem; max-width: none; display: block; }
.nota .hero .hero-titulo { font-size: clamp(2.1rem, 8vw, 3.2rem); line-height: 1.02; margin-top: 0.4rem; }
.nota .hero .hero-tapa { max-width: 30rem; }
.nota .bloque { padding-block: 1.6rem; }
.nota .bloque--hondo > :not(blockquote) { max-width: none; padding-inline: 0; }
.nota .bloque--hondo > blockquote { max-width: none; margin-inline: 0; }
.nota .pieza .bloque-titulo { font-size: clamp(1.6rem, 6vw, 2rem); margin: 0.4rem 0 0.8rem; }
/* the band is the paper: a facts sheet inside it has none of its own (notas.css, .nota-franja) */
.nota .pieza--deep .nota-ficha { background: none; margin: 0; padding-inline: 0; }
/* a note's stops say a sentence each, not a name: the words go under the photograph, in ink */
.nota .paradas p {
  position: static;
  padding: 0.55rem 0.2rem 0.1rem;
  background: none;
  color: var(--tinta);
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
}
.nota .paradas li:has(.parada-foto) { display: flex; flex-direction: column; }
.nota .paradas li:has(.parada-foto) p { order: 1; }
.nota .paradas li:has(.parada-foto) { background: var(--papel-claro); box-shadow: var(--sombra-carta); border-radius: 3px; padding-bottom: 0.5rem; }
.nota .paradas li:has(.parada-foto) .parada-foto { box-shadow: none; padding-bottom: 0; }
.nota .paradas li:has(.parada-foto) p { padding-inline: 0.65rem; }