/* explorar.css
   La capa que se pinta encima del cielo cuando alguien lo toca: la ficha, el
   aviso de la primera visita y la Luna.

   Vive aparte de micielo.php porque la comparten dos páginas: la real y la
   vista de prueba con la que se revisan los textos desde un teléfono. Sin esto,
   la vista sería una copia de doscientas líneas de estilos que se desincroniza
   a la primera corrección.

   Las variables (--midnight, --lavender, --gold-soft…) salen de identidad.css,
   que se carga antes. */

/* La marca del dedo, en el punto exacto del contacto y en el instante del
   contacto. Es lo único que convierte «pasó algo en la pantalla» en «lo hice
   yo»: el resaltado y la ficha aparecen lejos del dedo, y sin esto el gesto y
   su consecuencia no se leen como la misma cosa. Dura lo que dura el toque. */
.onda-toque {
  position: absolute;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 1.5px solid var(--lavender);
  pointer-events: none;
  animation: onda .62s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes onda {
  from { transform: scale(.55); opacity: .95; }
  to   { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .onda-toque { animation: none; opacity: .8; transform: scale(1.6); }
}

/* El anillo que se cierra mientras se mantiene el dedo. Sin él, el segundo gesto
   sería invisible: nadie mantiene pulsado en una pantalla si nada le dice que
   está pasando algo. Dura exactamente lo que el temporizador de explorar_cielo.js,
   así que cuando el anillo se cierra, responde. */
.cargando-mantener {
  position: absolute;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(var(--lavender) var(--vuelta-anillo, 0deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: cerrar-anillo .42s linear forwards;
  opacity: .9;
}
@property --vuelta-anillo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes cerrar-anillo {
  from { --vuelta-anillo: 0deg; }
  to   { --vuelta-anillo: 360deg; }
}
/* Sin @property el gradiente cónico no se puede animar, así que ahí el anillo
   simplemente crece: sigue avisando de que el gesto está en curso. */
@supports not (background: conic-gradient(red var(--x, 0deg), transparent 0)) {
  .cargando-mantener {
    background: none;
    border: 2px solid var(--lavender);
    animation: crecer-anillo .42s ease-out forwards;
  }
}
@keyframes crecer-anillo {
  from { transform: scale(.5); opacity: .35; }
  to   { transform: scale(1); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .cargando-mantener { animation: none; border: 2px solid var(--lavender); background: none; }
}

/* Mantener el dedo es un gesto nuestro, pero el navegador lo lee como «selecciona
   esto»: sale el resaltado azul y, peor, la selección se queda con el puntero y
   cancela el gesto justo antes de que venza el temporizador. Con el cielo no había
   qué seleccionar, pero la ficha aparece a los 420 ms con el dedo todavía puesto, y
   si cae debajo, lo que se selecciona es su texto.

   Se apaga en las dos capas. Perder el copiar de dos renglones de ficha vale menos
   que perder el gesto.

   Va con `html` delante a propósito: `#escena` y `#anotaciones` se vuelven a
   declarar en el <style> de cada página, que se carga después de este archivo, y
   sin el peso extra esas reglas ganarían. */
html #escena, html #anotaciones {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* La capa que no gira. Aquí va todo lo que se lee: si estuviera dentro de
   #campo, a los noventa grados de deriva el texto quedaría de lado. */
#anotaciones {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 15;
}
#anotaciones > * { pointer-events: auto; }
/* Menos las marcas del gesto, que se pintan exactamente bajo el dedo: si toman el
   puntero, el toque se cancela contra su propia señal de que está ocurriendo. Va
   con el mismo peso de id que la regla de arriba, o no gana. */
#anotaciones > .onda-toque,
#anotaciones > .cargando-mantener { pointer-events: none; }

/* La tarjeta de lo que se acaba de tocar.

   No es un panel: es una pieza de interfaz que se apoya en una esquina y deja el
   cielo a la vista. La primera versión iba a todo el ancho y ocupaba 153 px de alto
   —el 18% de la pantalla de un teléfono— apoyada justo encima de los botones de
   venta, y se leía como un cartel que interrumpe.

   La esquina la decide el JavaScript: la que quede más lejos de lo que se está
   explicando, porque explicar algo tapándolo es peor que no explicarlo. */
#ficha {
  position: absolute;
  /* El sitio no fija `border-box` de forma global, y sin esto el relleno se suma al
     ancho: 242 px declarados se convertían en 288, el 74% de la pantalla. */
  box-sizing: border-box;
  width: min(62%, 17.5rem);
  top: calc(0.85rem + env(safe-area-inset-top));
  left: 0.85rem;
  padding: .7rem 1.9rem .8rem .85rem;
  opacity: 0;
  transform: translateY(-.35rem);
  transition: opacity .3s var(--ease-out-quint), transform .3s var(--ease-out-quint);
  background: rgba(10, 22, 40, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn);
}
#ficha.visible { opacity: 1; transform: translateY(0); }

/* Las otras tres esquinas. `--alto-barra` la escribe la página al mostrar la barra,
   porque su altura depende de cuántos botones tenga ese estado y de la muesca. */
#ficha.derecha { left: auto; right: 0.85rem; }
/* Arriba y a la derecha, la tarjeta comparte franja con la Luna y su fase escrita.
   Con el 62% de siempre le comía el final del nombre —«Gibosa mengu…»— que es justo
   lo que la fase tiene que decir. `--ancho-luna` la mide la página, porque el largo
   del nombre cambia con cada carta. Sin Luna vale 0 y esto no recorta nada. */
#ficha.derecha:not(.abajo) {
  max-width: calc(100vw - var(--ancho-luna, 0px) - 0.85rem - 0.6rem);
}
#ficha.abajo {
  top: auto;
  bottom: calc(var(--alto-barra, 12rem) + 0.75rem);
  transform: translateY(.35rem);
}
#ficha.abajo.visible { transform: translateY(0); }

/* En la versión breve la tarjeta entera es el botón de desplegar. El hueco de abajo
   es el sitio de «Leer más», que va posicionado y por tanto no empuja nada: sin
   reservarlo se montaría sobre el apodo en cuanto éste ocupe las dos líneas. */
#ficha.breve { cursor: pointer; padding-bottom: 1.85rem; }

#ficha h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.1rem; line-height: 1.22; color: var(--white);
  text-wrap: balance;
}
/* El apodo es lo que hace que un nombre se quede: «Orión» se olvida, «el Cazador»
   no. En la tarjeta breve es la única línea que acompaña al nombre, así que cuando
   no hay apodo ocupa su sitio la constelación. */
#ficha .apodo {
  margin: .2rem 0 0; font-size: 12px; line-height: 1.35;
  letter-spacing: .01em; color: var(--gold-soft);
}
#ficha .cuerpo {
  margin: .55rem 0 0; font-size: 13px; line-height: 1.55; color: var(--text-mid);
  text-wrap: pretty;
}
/* El dato que sale de SU carta, no del catálogo: dónde está y cuánto brilla. */
#ficha .pie-ficha {
  margin: .5rem 0 0; padding-top: .5rem;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px; line-height: 1.45; color: var(--text-soft);
}

#ficha .cerrar-ficha {
  position: absolute; top: .3rem; right: .3rem;
  width: 1.75rem; height: 1.75rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-soft); font-size: 17px; line-height: 1;
  font-family: var(--font-body);
}
#ficha .cerrar-ficha:hover { color: var(--white); }

/* «Leer más», abajo a la derecha dentro de la tarjeta. Antes era sólo el galón, un
   trazo girado sin palabra: señalaba que había algo debajo pero no que se pudiera
   tocar ni qué se ganaba tocándolo. La palabra hace el trabajo y el galón se queda
   detrás, ya en su papel de acompañante. Sigue en la tipografía de texto y en el
   gris suave para no competir con el nombre, que es lo que hay que leer primero. */
#ficha .mas-ficha {
  position: absolute; bottom: .2rem; right: .45rem;
  display: inline-flex; align-items: center; gap: .3rem;
  height: 1.6rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-soft);
  font-family: var(--font-body); font-size: 12px; line-height: 1;
  transition: color .2s var(--ease-out-quint);
}
#ficha .mas-ficha span {
  display: block; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
#ficha .mas-ficha:hover, #ficha .mas-ficha:focus-visible { color: var(--white); }

/* La Luna, arriba a la izquierda y siempre presente. Pequeña a propósito: es una
   puerta, no un elemento de la composición, y la carta manda. */
#luna {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top));
  left: 0.85rem;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  transition: opacity .3s var(--ease-out-quint);
}
#luna svg { width: 100%; height: 100%; display: block; }

/* Que la Luna se puede tocar.
   El 11-ago-2026 se retiró un aviso de primera visita porque competía con el
   recorrido: dos instrucciones a la vez en la misma pantalla no son ninguna. Esto no
   es una segunda instrucción, es una propiedad del propio objeto: un halo que sale
   del disco tres veces y se acaba. Movimiento como evento y no como ambiente.
   Se pone una sola vez en la vida de esa persona: al primer toque se guarda la marca
   y no vuelve. Y no aparece si el sistema pide menos movimiento. */
#luna.se-toca::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--lavender);
  pointer-events: none;
  animation: halo-luna 2.6s ease-out 3;
}
@keyframes halo-luna {
  0%   { transform: scale(1);    opacity: 0; }
  15%  { opacity: .5; }
  60%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #luna.se-toca::after { animation: none; }
}
/* Con la ficha de una estrella abierta, la Luna estorba: las dos viven arriba. */
#luna.oculta { opacity: 0; pointer-events: none; }

/* La fase escrita, pegada al disco. El dibujo dice la forma; el nombre dice qué es
   esa forma, y sin él la Luna de la esquina no enseña nada a quien no sabe leerla.
   Se alinea con el centro del icono y desaparece con él. */
#fase-luna {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top));
  left: 3.7rem;
  height: 2.75rem;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0; background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: opacity .3s var(--ease-out-quint);
}
/* Sin caja: es un rótulo sobre el cielo, no una etiqueta pegada encima. La sombra
   es lo que lo hace legible cuando cae sobre una zona densa de estrellas, que con
   40° de campo es casi siempre. */
#fase-luna .nombre-fase {
  display: block; font-size: 12.5px; line-height: 1.25; color: var(--text-main);
  text-shadow: 0 1px 4px rgba(6, 14, 28, 0.95);
}
#fase-luna .illum-fase {
  display: block; font-size: 11px; line-height: 1.25; color: var(--text-soft);
  text-shadow: 0 1px 4px rgba(6, 14, 28, 0.95);
}
#fase-luna.oculta { opacity: 0; pointer-events: none; }

#panel-luna {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top));
  left: 50%;
  width: min(30rem, calc(100vw - 2rem));
  transform: translate(-50%, -0.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out-quint), transform .35s var(--ease-out-quint), visibility .35s;
  padding: 1.25rem 1.25rem 1.35rem;
  background: rgba(10, 22, 40, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn);
}
#panel-luna.abierto { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#panel-luna h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.3rem; line-height: 1.2; color: var(--white);
}
/* Las dos lunas, lado a lado. Es la comparación entera: no hace falta explicar
   que el cielo cambia si se ven los dos discos distintos uno junto al otro. */
.dos-lunas { display: flex; gap: 1.4rem; margin: 1rem 0 1.1rem; }
.dos-lunas figure { margin: 0; display: flex; align-items: center; gap: .6rem; }
.dos-lunas svg { width: 2.6rem; height: 2.6rem; flex: none; }
.dos-lunas figcaption { font-size: 12.5px; line-height: 1.35; color: var(--text-main); }
.dos-lunas figcaption span { color: var(--text-soft); }

#panel-luna .dato {
  margin: .55rem 0 0; font-size: 14px; line-height: 1.55; color: var(--text-mid);
  text-wrap: pretty;
}
#panel-luna .dato b { font-weight: 500; color: var(--text-main); }
/* El único que da una razón para volver, así que se le deja subir un punto. */
#panel-luna .dato.destacado {
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-main);
}
#panel-luna .dato.destacado b { color: var(--gold-soft); }
#panel-luna .cerrar-ficha {
  position: absolute; top: .5rem; right: .5rem;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-soft); font-size: 20px; line-height: 1;
  font-family: var(--font-body);
}
#panel-luna .cerrar-ficha:hover { color: var(--white); }

/* ── El recorrido guiado ─────────────────────────────────────────────────────
   Una tarjeta anclada abajo, encima de la barra de venta pero sin taparla: el
   recorrido explica, no vende, y quien quiera irse a comprar a mitad de camino
   tiene que poder. Ocupa el ancho porque aquí sí es texto para leer seguido, no
   un rótulo sobre algo del cielo. */
#recorrido {
  position: absolute;
  left: 50%;
  bottom: calc(var(--alto-barra, 12rem) + 0.75rem);
  width: min(30rem, calc(100vw - 1.7rem));
  box-sizing: border-box;
  transform: translate(-50%, 0.5rem);
  opacity: 0;
  transition: opacity .4s var(--ease-out-quint), transform .4s var(--ease-out-quint);
  padding: 1.1rem 1.15rem 1rem;
  background: rgba(10, 22, 40, 0.93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn);
}
#recorrido.visible { opacity: 1; transform: translate(-50%, 0); }

/* La portada se centraba en vertical con el argumento de que es la única pantalla
   que no señala nada del cielo y por tanto no tiene de qué apartarse. El argumento
   era cierto y la consecuencia mala: su botón quedaba 250 px más arriba que el
   «Siguiente» de las otras ocho, así que la primera acción del recorrido pedía
   buscar el botón en un sitio y las siguientes en otro. Un recorrido de nueve
   pantallas necesita que lo que se pulsa no se mueva. Pablo lo vio en el teléfono
   el 11-ago-2026 y se retiró la excepción: todas ancladas abajo. */

#recorrido h2 {
  margin: 0 1.6rem 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.25rem; line-height: 1.22; color: var(--white);
  text-wrap: balance;
}
#recorrido p {
  margin: .65rem 0 0;
  font-size: 14px; line-height: 1.6; color: var(--text-mid);
  text-wrap: pretty;
}
/* El cierre habla en dos tiempos. El segundo párrafo es el que pide, y va con el
   color del texto principal: sin eso los dos pesan igual y el que enlaza con los
   botones se pierde en medio. El tamaño no cambia, sólo el contraste: subir también
   el cuerpo convertiría el remate en un titular. */
#recorrido p.pide { color: var(--text-main); }
/* Jerarquía del cierre (5-oct-2026, Pablo: «jerarquía de tipografía para hacer todo
   legible»). Tres niveles y no dos: el título, el párrafo que pide —un punto más grande y
   en el color principal, porque es el que enlaza con los botones— y el que cuenta, más
   chico y tenue, que es información y no petición. */
#recorrido p.cuenta { font-size: 13px; line-height: 1.55; color: var(--text-mid); }
#recorrido p.pide { font-size: 15.5px; line-height: 1.55; margin-top: .9rem; margin-bottom: .35rem; }
/* El canal, como fila con miniatura (5-oct-2026): la portada a la izquierda con ▶ encima
   y el texto a la izquierda. Es un botón, no un enlace del texto: sin subrayado ni la ↗
   de `#recorrido a`. */
/* Dos tarjetas del cierre (5-oct-2026): foto cuadrada arriba, rótulo abajo. La del físico
   lleva el relleno claro de la acción; la del canal, contorno lavanda. */
.tarjetas-cierre { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
#recorrido .tarjeta-cierre {
  display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--lav-dim); border-radius: var(--radius-btn);
  background: transparent; color: var(--text-main);
  font: 400 14px/1.3 'Outfit', sans-serif; text-align: left; text-decoration: none;
  cursor: pointer; white-space: normal; -webkit-tap-highlight-color: transparent;
}
#recorrido a.tarjeta-cierre::after { content: none; }
#recorrido .tarjeta-cierre:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
#recorrido .tarjeta-foto { position: relative; display: block; aspect-ratio: 5 / 4; background: #000; }
#recorrido .tarjeta-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
#recorrido .tarjeta-rotulo { flex: 1; display: flex; align-items: center; padding: .6rem .7rem .65rem; }
#recorrido .tarjeta-fisico { border-color: var(--accion); }
#recorrido .tarjeta-fisico .tarjeta-rotulo { background: var(--accion); color: var(--accion-texto); font-weight: 500; }
#recorrido .tarjeta-canal .tarjeta-foto::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(10, 22, 40, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat;
  border: 1px solid rgba(255, 255, 255, .55);
}
#recorrido .tarjeta-cierre:active { opacity: .85; }
/* La oferta del cierre con su propia lámina (8-oct-2026; variante A del 9-oct, Pablo): la
   pieza arriba y a todo el ancho, la compra como botón principal y, en una fila, el canal y
   compartir. La lámina tiene techo de alto: el cierre ya lleva título y párrafo, y en un
   teléfono chico o dentro de Instagram la caja no puede salirse por arriba. */
#recorrido .oferta-pieza {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%;
  margin: 0; padding: .8rem; border: 1px solid var(--hairline); border-radius: var(--radius-btn);
  background: #000; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#recorrido .oferta-pieza img {
  display: block; width: auto; max-width: 100%; height: min(28vh, 15rem);
  object-fit: contain; box-shadow: 0 8px 22px rgba(0, 0, 0, .7);
}
#recorrido .oferta-comprar { width: 100%; }
/* `minmax(0, 1fr)` y no `1fr`: con `1fr` la columna no baja de su contenido, y un rótulo
   largo se llevó todo el ancho y empujó a compartir fuera de la caja (9-oct-2026). */
#recorrido .oferta-secundarias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
#recorrido .oferta-sec {
  box-sizing: border-box; display: flex; align-items: center; gap: .45rem; min-height: 3rem;
  margin: 0; padding: .55rem .6rem; border: 1px solid var(--lav-dim); border-radius: var(--radius-btn);
  background: transparent; color: var(--text-main); font: 400 13px/1.25 'Outfit', sans-serif;
  text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  white-space: normal; overflow-wrap: anywhere; min-width: 0;
}
#recorrido a.oferta-sec::after { content: none; }
#recorrido .oferta-sec svg { flex: 0 0 auto; color: var(--lavender); }
#recorrido .oferta-sec:active, #recorrido .oferta-pieza:active { opacity: .85; }
#recorrido .oferta-sec:focus-visible, #recorrido .oferta-pieza:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
/* En pantallas bajas —un teléfono chico, o el navegador de Instagram con sus barras— la
   lámina cede alto antes que el texto. Y si aun así no cabe, la caja se desplaza por
   dentro: en un teléfono de 640 px de alto se salía 100 px por arriba (prueba del
   8-oct-2026), con el título fuera de la pantalla. */
@media (max-height: 720px) {
  #recorrido .oferta-pieza { padding: .5rem; }
  #recorrido .oferta-pieza img { height: 22vh; }
}
#recorrido:has(.oferta-pieza) {
  max-height: calc(100dvh - var(--alto-barra, 12rem) - 1.5rem);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Lo que sale de la carta de esa persona: su nombre, sus grados, sus años luz. La
   jerarquía la hacen dos cosas a la vez, el peso y el color, y ninguna de las dos se
   pasa: el dato tiene que encontrarse de un vistazo sin que el párrafo se vuelva un
   mosaico de trozos gritando.
   El peso es 500 y no `bold` a propósito: la página carga Outfit en 200, 300, 400 y
   500, así que pedir 700 no trae una negrita, hace que el navegador falsifique una
   engordando los trazos, y eso en una tipografía de este contraste se ve sucio. */
#recorrido p b {
  font-weight: 500;
  color: var(--text-main);
}
/* El enlace no puede ser el azul del navegador ni un subrayado grueso: aquí abajo
   sólo hay lavanda, crema y el azul del cielo. Se marca con el color del acento y
   un subrayado fino separado de la letra, que es el mismo recurso que ya usaba el
   enlace de regalar. Y una flecha que dice que se sale del sitio, para que nadie
   toque creyendo que es otro paso del recorrido. */
#recorrido a {
  color: var(--lavender);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lav-dim);
  text-underline-offset: .25em;
  white-space: nowrap;
}
#recorrido a::after {
  content: '↗';
  font-size: .82em;
  margin-left: .18em;
  vertical-align: .08em;
  text-decoration: none;
  display: inline-block;
}
#recorrido a:hover, #recorrido a:focus-visible {
  color: var(--white);
  text-decoration-color: var(--lavender);
}
.pie-recorrido {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: 1rem;
}
/* Sin barra de progreso: un contador dice lo mismo y no compite con el cielo. */
.pie-recorrido .cuenta {
  font-size: 12px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  /* Con «Atrás» delante, el contador deja de ser el primero de la fila y se queda en
     medio: el sitio que le corresponde entre volver y seguir. */
  margin-right: auto;
}

/* Volver a la pantalla anterior. En la tipografía de texto y en el gris suave, sin
   borde: es una salida, no una acción que el recorrido proponga. Con el mismo peso
   que «Siguiente» habría dos botones pidiendo lo contrario en la misma esquina. */
.pie-recorrido .atras-recorrido {
  padding: .35rem .1rem .35rem 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-soft);
  font-family: var(--font-body); font-size: 13px; line-height: 1;
  transition: color .2s var(--ease-out-quint);
}
.pie-recorrido .atras-recorrido:hover,
.pie-recorrido .atras-recorrido:focus-visible { color: var(--text-main); }
.pie-recorrido .cdn-boton { flex: 0 0 auto; padding: .6rem 1.2rem; font-size: var(--t-small); }
#recorrido.portada .pie-recorrido { justify-content: flex-end; }

/* El cierre apila sus dos botones a ancho completo. En fila, «Conoce más de mi
   trabajo» se lleva el doble de ancho que «Compartir» por ser más largo, y el que
   manda acaba siendo el más pequeño de los dos: la jerarquía diría una cosa y el
   tamaño la contraria. */
.pie-recorrido.pie-cierre { flex-direction: column; align-items: stretch; gap: .55rem; }
.pie-recorrido.pie-cierre .cdn-boton { flex: 0 0 auto; width: 100%; }
#recorrido .cerrar-recorrido {
  position: absolute; top: .35rem; right: .35rem;
  width: 1.9rem; height: 1.9rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-soft); font-size: 18px; line-height: 1;
  font-family: var(--font-body);
}
#recorrido .cerrar-recorrido:hover { color: var(--white); }