/* Portado de la maqueta ac-mezcla (paleta menta) una sola vez (78bbddd); desde entonces se edita aquí. */
/* Lo que hay en la mesa después de la portada, en orden: la trasera de la caja (instrucciones de montaje), la
   colección de mundos, la merienda, «Se recoge sola», el tique del precio, la caja grande de los parques y el pie.
   Dos familias de materiales y ninguna más: el embalaje (el blíster, la trasera de cartón kraft, los blísteres
   pequeños, las cajas hondas) y el papel de la mesa (el salvamanteles, la hoja, el tique, las servilletas).
   Lo que lleva texto corrido va recto: la mesa se nota en la luz (sombras abajo a la derecha) y en lo que se monta
   encima de lo otro. Solo se tuercen los objetos pequeños sin texto corrido: la pegatina, la caja de la edad, la
   etiqueta «Por defecto», los móviles, las servilletas y el tique. */

/* ---------- La trasera de la caja: cartón kraft con las instrucciones de montaje ---------- */
.listachan .trasera {
  position: relative; padding: 28px 22px 26px; border-radius: var(--radio-carton);
  background: url("../img/kraft.webp"), #D9B98A;
  color: var(--tinta); box-shadow: var(--sombra-mesa);
}
.listachan .trasera-nota { margin-top: 8px; font-size: 16px; line-height: 1.45; }
.listachan .pasos { display: grid; gap: 18px; margin-top: 22px; }
/* align-content: start: las filas no se estiran con el alto del paso más largo, así los tres textos empiezan a la par */
.listachan .paso {
  display: grid; grid-template-columns: 44px 60px minmax(0, 1fr); grid-template-areas: "num dib txt";
  align-items: start; align-content: start; column-gap: 12px;
  padding-top: 18px; border-top: 2px dashed rgb(59 42 16 / .38);
}
.listachan .paso:first-child { padding-top: 0; border-top: 0; }
.listachan .paso-num { grid-area: num; font: 400 50px/1 var(--letra-caja); }
.listachan .paso-dibujo { grid-area: dib; width: 60px; height: 60px; fill: none; stroke: var(--tinta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.listachan .paso-texto { grid-area: txt; font-size: 17px; line-height: 1.45; }

@media (min-width: 1100px) {
  .listachan .trasera { grid-column: 3 / -1; padding: 36px 40px 34px; }
  .listachan .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin-top: 28px; }
  /* el dibujo, junto a su número; el texto debajo, a todo el ancho del paso */
  .listachan .paso {
    grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "num dib ." "txt txt txt";
    column-gap: 14px; row-gap: 14px;
    padding: 0 0 0 22px; border-top: 0; border-left: 2px dashed rgb(59 42 16 / .38);
  }
  .listachan .paso:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Colección Mundos ---------- */
.listachan .rotulo {
  position: relative; padding: 24px 22px 22px; border-radius: var(--radio-carton);
  background: var(--hondo); color: #FFFFFF; box-shadow: var(--sombra-mesa);
}
.listachan .rotulo h2 { padding-right: 76px; }
.listachan .rotulo-texto { margin-top: 8px; max-width: 40ch; color: var(--hondo-texto); font-size: 17px; line-height: 1.45; }
/* la caja de la edad, como en las cajas de juguetes (el lector oye solo «Para niños de 4 a 12 años») */
.listachan .edad {
  position: absolute; top: -20px; right: 12px;
  display: grid; place-content: center; justify-items: center; width: 80px; height: 80px; border-radius: 50%;
  background: var(--papel); color: var(--tinta);
  box-shadow: inset 0 0 0 3px var(--tinta), var(--sombra-baja);
  rotate: 9deg;
}
.listachan .edad-num { font: 400 22px/1 var(--letra-caja); }
.listachan .edad-anos { font: 700 15px/1.1 var(--letra); }

/* Las pestañas: cuatro blísteres pequeños, cada uno con su figura y su nombre impreso en su mundo */
.listachan .mundo-pegatinas { --fondo-mundo: #FFF5F9; --accion-mundo: #D1006E; }
.listachan .mundo-espacio { --fondo-mundo: #0B1A2F; --accion-mundo: #FF6A2C; }
.listachan .mundo-selva { --fondo-mundo: #CDEAFA; --accion-mundo: #084F27; }
.listachan .mundo-neon { --fondo-mundo: #F4F2FA; --accion-mundo: #5424C9; }

.listachan .modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.listachan .modelo {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 12px 12px 14px;
  border: 0; border-radius: var(--radio-carton);
  background: var(--fondo-mundo); color: var(--accion-mundo);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--sombra-baja);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.listachan .modelo-ventana {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radio-plastico);
  background: radial-gradient(90% 80% at 30% 15%, rgb(255 255 255 / .7), rgb(255 255 255 / .1));
}
.listachan .mundo-espacio .modelo-ventana { background: radial-gradient(90% 80% at 30% 15%, rgb(255 255 255 / .22), rgb(255 255 255 / .03)); }
.listachan .modelo-ventana::after { /* el plástico del blíster pequeño */
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background: url("../img/plastico-mini.webp") center / 100% 100% no-repeat;
}
.listachan .modelo-ventana .figura { width: 84%; }
.listachan .modelo-nombre { font: 400 23px/1.1 var(--letra-caja); padding-left: 2px; }
.listachan .modelo-marca {
  position: absolute; top: -10px; right: -8px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--tinta); color: var(--papel);
  box-shadow: 0 0 0 3px var(--papel), var(--sombra-baja);
  opacity: 0; scale: .8;
  transition: opacity 180ms var(--ease-out), scale 220ms var(--ease-out);
}
.listachan .modelo-marca .ico { width: 20px; height: 20px; stroke-width: 2.6; }
.listachan .modelo[aria-selected="true"] { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--tinta), var(--sombra-mesa); }
.listachan .modelo[aria-selected="true"] .modelo-marca { opacity: 1; scale: 1; }
.listachan .modelo:active { transform: scale(.97); }
.listachan .modelo:focus-visible { outline: 3px solid var(--tinta); outline-offset: 5px; border-radius: calc(var(--radio-carton) + 4px); }
/* Encima: solo se levanta el blíster pequeño; la figura no se mueve (el anillo y la marca ya dicen cuál es) */
@media (hover: hover) and (pointer: fine) {
  .listachan .modelo:hover { transform: translateY(-3px); box-shadow: var(--sombra-mesa); }
  .listachan .modelo[aria-selected="true"]:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--tinta), var(--sombra-mesa); }
  .listachan .modelo:active { transform: scale(.97); }
}

.listachan .mundo-panel { margin-top: 18px; --alto-sitio: 380px; }
.listachan .mundo-panel:focus-visible { outline-offset: 8px; }

@media (min-width: 560px) and (max-width: 1099px) {
  .listachan .modelos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .listachan .mundo-panel { margin-top: 36px; }
}
@media (min-width: 1100px) {
  .listachan .rotulo { grid-column: 1 / span 6; padding: 30px 32px 28px; }
  .listachan .modelos { grid-column: 1 / span 6; gap: 18px; margin-top: 34px; }
  /* el móvil del mundo elegido llena el alto del rótulo y la rejilla de 2 × 2, y la captura se lee mejor */
  .listachan .mundo-panel { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: center; margin-top: 0; --alto-sitio: 580px; }
  .listachan .mundo-panel .sitio-mesa .servilleta { max-width: 400px; }
  .listachan .mundo-panel .sitio-mesa .movil { --ancho: 270px; left: 18%; top: 26px; }
}

/* ---------- La merienda: cuatro platos, uno por modo ---------- */
.listachan .merienda-cabeza { max-width: 560px; }
.listachan .merienda-cabeza p { margin-top: 10px; max-width: 42ch; font-size: 17px; line-height: 1.45; }
.listachan .platos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.listachan .plato {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 10px 10px 14px;
  border: 0; border-radius: var(--radio-papel);
  background: var(--papel); color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--sombra-baja);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.listachan .plato-foto { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radio-papel); margin-bottom: 6px; }
.listachan .plato-foto img { width: 100%; height: 100%; object-fit: contain; }
.listachan .plato-nombre { font: 400 20px/1.1 var(--letra-caja); text-wrap: balance; }
.listachan .plato-defecto {
  position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: var(--radio-papel);
  background: var(--tinta); color: var(--papel); font: 700 15px/1.3 var(--letra);
  rotate: -4deg;
}
.listachan .plato[aria-selected="true"] { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--tinta), var(--sombra-mesa); }
.listachan .plato:active { transform: scale(.97); }
.listachan .plato:focus-visible { outline: 3px solid var(--tinta); outline-offset: 5px; border-radius: calc(var(--radio-papel) + 4px); }
@media (hover: hover) and (pointer: fine) {
  .listachan .plato:hover { transform: translateY(-3px); box-shadow: var(--sombra-mesa); }
  .listachan .plato[aria-selected="true"]:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--tinta), var(--sombra-mesa); }
  .listachan .plato:active { transform: scale(.97); }
}

/* En el móvil, figuras y platos van en una fila que se desliza de lado: el sitio o la hoja que cambia al tocar queda
   justo debajo, a la vista. La fila sale de los márgenes hasta el borde de la pantalla. */
@media (max-width: 559px) {
  .listachan .modelos, .listachan .platos {
    grid-template-columns: none; grid-auto-flow: column; gap: 12px;
    margin-inline: calc(var(--margen) * -1); padding: 14px var(--margen) 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
    scrollbar-width: thin;
  }
  .listachan .modelos { grid-auto-columns: 128px; margin-top: 16px; }
  .listachan .platos { grid-auto-columns: 140px; margin-top: 18px; }
  .listachan .modelo, .listachan .plato { scroll-snap-align: start; }
  .listachan .modelo-nombre { font-size: 21px; }
}

/* La hoja del modo elegido. Las cuatro hojas van en la misma celda: la hoja mide lo que la más alta y no cambia de
   alto al tocar otro plato. Las otras tres quedan ocultas (visibility: el lector tampoco las lee). La última fila de
   cada hoja es el hueco de la nota de alergias y se estira hasta el pie: con nota, la nota; sin ella, el hueco vacío
   a trazos, como los de «No contiene», con una línea que lo dice. Así lo que sobra de alto no queda en blanco. */
.listachan .modo {
  margin-top: 28px; padding: 22px 20px; border-radius: var(--radio-papel);
  background: var(--papel); box-shadow: var(--sombra-mesa);
}
.listachan .modo:focus-visible { outline-offset: 4px; }
.listachan .modo-hojas { display: grid; }
.listachan .modo-hoja { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.listachan .modo-hoja:not([data-elegida]) { visibility: hidden; }
.listachan .modo-filas { display: grid; gap: 14px; }
.listachan .modo-fila { display: grid; gap: 2px; }
.listachan .modo-fila dt { color: var(--tinta); font: 600 15px/1.3 var(--letra); }
.listachan .modo-fila dd { margin: 0; font-size: 17px; line-height: 1.45; }
.listachan .recuento-caja { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 16px; }
.listachan .recuento-rotulo { color: var(--tinta); font: 600 15px/1.4 var(--letra); }
.listachan .recuento { display: flex; flex-wrap: wrap; gap: 6px; }
.listachan .recuento li {
  padding: 5px 10px; border-radius: var(--radio-papel); background: var(--papel-2);
  font: 700 15px/1.4 var(--letra); font-variant-numeric: tabular-nums;
}
.listachan .nota-alergias, .listachan .modo-sin-nota {
  display: grid; align-content: center; margin-top: 16px; padding: 12px 14px;
  border: 2px dashed var(--tinta); border-radius: var(--radio-papel);
}
.listachan .modo-sin-nota { border-color: rgb(var(--sombra) / .3); color: var(--tinta-suave); font-size: 15px; line-height: 1.4; text-align: center; }
.listachan .nota-alergias-cuando { color: var(--tinta-suave); font-size: 15px; line-height: 1.4; }
.listachan .nota-alergias-texto { display: flex; gap: 10px; margin-top: 6px; font-weight: 700; line-height: 1.4; }
.listachan .nota-alergias-texto .ico { margin-top: 1px; }

@media (min-width: 560px) {
  .listachan .modo-fila { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 900px) {
  .listachan .platos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .listachan .merienda-cabeza { grid-column: 1 / span 6; }
  .listachan .platos { grid-column: 1 / -1; gap: 24px; margin-top: 44px; }
  .listachan .modo { grid-column: 3 / span 8; margin-top: 34px; padding: 28px 32px; }
}

/* ---------- Se recoge sola: el mantel se recoge hasta la bola y queda la mesa desnuda ---------- */
/* La mesa desnuda es plastilina clara (img/tablero: la textura de la nata de la tarta de la misma foto, en gris,
   teñida con --mesa-desnuda). El mantel que sigue arriba y abajo es tela cortada: el de arriba echa una sombra
   blanda sobre la mesa y el de abajo deja una sombra de contacto. Mientras se recoge, el círculo de mantel que queda
   lleva su propia sombra, como papel que se levanta. Todo va en la misma capa enmascarada: donde aún hay mantel, no
   se ve nada de esto. */
.listachan .recoge { position: relative; isolation: isolate; margin-top: var(--hueco); padding: 64px 0 68px; view-timeline-name: --recoge; }
.listachan .recoge-mesa {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(var(--sombra) / .3), rgb(var(--sombra) / .12) 7px, rgb(var(--sombra) / 0) 26px),
    linear-gradient(to top, rgb(var(--sombra) / .24), rgb(var(--sombra) / 0) 8px),
    radial-gradient(circle at var(--bola-x, 50%) var(--bola-y, 170px), rgb(var(--sombra) / .2) var(--radio), rgb(var(--sombra) / 0) calc(var(--radio) + 24px)),
    var(--img-tablero) 0 0 / 420px auto,
    var(--mesa-desnuda);
  background-blend-mode: normal, normal, normal, multiply, normal;
  -webkit-mask-image: radial-gradient(circle at var(--bola-x, 50%) var(--bola-y, 170px), transparent var(--radio), #000 calc(var(--radio) + 2px));
  mask-image: radial-gradient(circle at var(--bola-x, 50%) var(--bola-y, 170px), transparent var(--radio), #000 calc(var(--radio) + 2px));
}
/* La mesa y la bola son fondos de CSS, que el navegador pide al cargar aunque estén a 3800 px: con JS, recoger.js pone
   .recoge--cerca cuando la sección se acerca (a la distancia de loading="lazy") y solo entonces se piden. Sin JS, como
   siempre. */
@media (scripting: enabled) {
  .listachan .recoge:not(.recoge--cerca) { --img-tablero: none; --img-recogido: none; }
}
.listachan .recoge-dentro { margin-top: 0; }
.listachan .bola {
  width: min(100%, 400px); aspect-ratio: 848 / 689; margin-inline: auto;
  background: var(--img-recogido) center / contain no-repeat;
  mix-blend-mode: multiply;
}
/* el texto va en una hoja de papel: mientras el mantel se recoge, nunca queda letra sobre el vichy */
.listachan .recoge-texto {
  margin-top: 18px; padding: 24px 20px 20px; border-radius: var(--radio-papel);
  background: var(--papel); box-shadow: var(--sombra-mesa);
}
.listachan .recoge-lema { margin-top: 12px; max-width: 46ch; font-size: 18px; line-height: 1.5; }
.listachan .lote-titulo { margin-top: 26px; font-size: 16px; }
.listachan .lote { margin-top: 8px; }
.listachan .lote-fila { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; }
.listachan .lote-fila + .lote-fila { border-top: 1px solid rgb(var(--sombra) / .18); }
.listachan .lote-fecha { justify-self: start; font: 700 15px/1.35 var(--letra-mono); white-space: nowrap; }
.listachan .lote-fila--fin .lote-fecha { padding: 1px 6px; border-radius: var(--radio-papel); background: var(--tinta); color: var(--papel); }
.listachan .lote-que { font-size: 16px; line-height: 1.4; }

/* La bandeja: lo que contiene, en su hueco de papel, y los huecos vacíos del cartón de lo que no hay */
.listachan .bandeja-caja {
  display: grid; gap: 26px; margin-top: 48px; padding: 24px 18px 22px; border-radius: var(--radio-carton);
  background: url("../img/kraft.webp"), #D9B98A; color: var(--tinta); box-shadow: var(--sombra-mesa);
}
.listachan .bandeja-titulo { font: 400 26px/1.1 var(--letra-caja); }
.listachan .bandeja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.listachan .hueco {
  display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 104px;
  padding: 12px 4px 10px; text-align: center;
}
.listachan .hueco--lleno { border-radius: var(--radio-papel); background: var(--papel); box-shadow: 0 0 0 1px rgb(59 42 16 / .2), 1px 3px 4px -1px rgb(59 42 16 / .35); }
.listachan .hueco--vacio { border-radius: var(--radio-carton); background: #C4A06B; box-shadow: inset 1px 4px 6px rgb(59 42 16 / .4), inset 0 -1px 0 rgb(255 255 255 / .3); }
.listachan .hueco-dibujo { width: 40px; height: 40px; fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.listachan .hueco--vacio .hueco-dibujo { stroke: rgb(26 24 22 / .5); stroke-dasharray: 3 3.5; }
.listachan .hueco-nombre { font: 700 15px/1.2 var(--letra); text-wrap: balance; overflow-wrap: anywhere; }
.listachan .bandeja-nota { margin-top: 12px; font-size: 15px; line-height: 1.45; }

@media (min-width: 1100px) {
  .listachan .recoge { padding: 96px 0 100px; }
  .listachan .bola { grid-column: 1 / span 5; grid-row: 1; align-self: center; width: 100%; max-width: 460px; }
  .listachan .recoge-texto { grid-column: 7 / span 6; grid-row: 1; margin-top: 0; padding: 32px 36px 28px; }
  .listachan .bandeja-caja { grid-column: 1 / -1; grid-template-columns: 1fr 2fr; gap: 40px; margin-top: 56px; padding: 32px 36px 30px; }
  .listachan .bandeja--vacia { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- El tique del precio ---------- */
/* El único papel con texto que va torcido, y poco. Los puntos y el valor se alinean con la última línea de su texto.
   En el móvil, «incluido» va una vez como cabecera y debajo la lista sin puntos. */
.listachan .precio { position: relative; }
.listachan .tique-sombra { position: relative; max-width: 400px; filter: var(--sombra-filtro); rotate: -1deg; }
.listachan .tique {
  --diente: 14px;
  padding: 26px 20px 34px; background: var(--papel); color: var(--tinta);
  font: 400 15px/1.45 var(--letra-mono);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--diente) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--diente) 100%;
}
.listachan .tique-cabeza { padding: 0 0 14px; border-bottom: 2px dashed var(--tinta); font-size: 30px; }
.listachan .tique-lineas { margin-top: 12px; }
.listachan .tique-lineas--incluido { margin-top: 0; }
.listachan .tique-linea { display: flex; align-items: last baseline; gap: 6px; padding: 5px 0; }
.listachan .tique-que { flex: 0 1 auto; }
.listachan .tique-puntos { flex: 1 1 14px; min-width: 14px; border-bottom: 2px dotted rgb(var(--sombra) / .4); translate: 0 -4px; }
.listachan .tique-valor { flex: none; white-space: nowrap; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.listachan .tique-linea--grande { font-size: 16px; font-weight: 700; }
.listachan .tique-linea--grande .tique-valor { color: var(--tinta); }
.listachan .tique-sub { padding: 0 0 8px; color: var(--tinta-suave); }
.listachan .tique-incluido { display: none; }
.listachan .tique-total {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 12px;
  border-top: 2px dashed var(--tinta); font: 700 22px/1.2 var(--letra-mono); font-variant-numeric: tabular-nums;
}
/* Desde 560 px, con puntos y «incluido» en cada línea: el tique se ensancha para que cada línea quepa en una */
@media (min-width: 560px) {
  .listachan .tique-sombra { max-width: 460px; }
}
@media (max-width: 559px) {
  .listachan .tique { padding-inline: 16px; }
  .listachan .tique-incluido { display: block; margin-top: 4px; font-weight: 700; }
  .listachan .tique-lineas--incluido .tique-linea { padding: 3px 0 3px 1ch; }
  .listachan .tique-lineas--incluido :is(.tique-puntos, .tique-valor) { display: none; }
}
.listachan .precio-accion { margin-top: 30px; }

.listachan .preguntas { margin-top: 80px; }

@media (min-width: 1100px) {
  .listachan .precio { grid-column: 1 / span 6; }
  .listachan .preguntas { grid-column: 7 / span 6; margin-top: 0; }
}

/* ---------- La caja grande, para los parques ---------- */
.listachan .expositor {
  position: relative; display: grid; gap: 22px; padding: 26px 20px 28px; border-radius: var(--radio-carton);
  background: var(--hondo); color: #FFFFFF; box-shadow: var(--sombra-mesa);
}
.listachan .expositor::before { /* la línea de troquel del cartón */
  content: ""; position: absolute; inset: 10px; border: 2px dashed rgb(255 255 255 / .2); border-radius: var(--radio-papel); pointer-events: none;
}
.listachan .parque-maqueta { position: relative; filter: drop-shadow(4px 14px 14px rgb(0 0 0 / .32)); } /* sobre el fondo hondo: el negro ya es su tono */
.listachan .parque-maqueta img { width: 100%; max-width: 520px; margin-inline: auto; }
.listachan .parque-texto { position: relative; }
.listachan .parque-texto p { margin-top: 12px; max-width: 42ch; color: var(--hondo-texto); font-size: 18px; line-height: 1.5; }
.listachan .parque-texto .accion { margin-top: 22px; }
.listachan .expositor .boton:focus-visible { outline-color: #FFFFFF; }

@media (min-width: 1100px) {
  .listachan .expositor { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 44px 56px; }
}

/* ---------- El pie: una tira de papel con los enlaces y el crédito ---------- */
.listachan .pie { margin-top: var(--hueco); padding: 0 var(--margen) 32px; }
.listachan .pie-papel {
  display: grid; gap: 6px; max-width: var(--ancho); margin-inline: auto; padding: 14px 20px;
  border-radius: var(--radio-papel); background: var(--papel); box-shadow: var(--sombra-mesa);
}
.listachan .pie-enlaces ul { display: flex; flex-wrap: wrap; column-gap: 26px; }
.listachan .pie-enlaces .enlace { font-size: 16px; }
.listachan .credito { padding-top: 10px; border-top: 1px solid rgb(var(--sombra) / .16); }
/* sin enlaces (venta cerrada y sin datos de Bytenauta), el crédito va solo: sin raya que lo separe de nada */
.listachan .credito:only-child { padding-top: 0; border-top: 0; }
.listachan .credito-enlace {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  color: var(--tinta-suave); font: 700 15px/1 var(--letra); text-decoration: none;
}
.listachan .credito-enlace .ico { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .listachan .credito-enlace:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 1100px) {
  .listachan .pie-papel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 28px; }
  .listachan .credito { padding-top: 0; border-top: 0; }
}