/* La aventura. Se apoya entera en los tokens de sitio.css y hereda las DOS VOCES que inventó
   historia.html: `.doc` es el Programa citándose a sí mismo (documento interno, con pinta de
   fotocopia) y `.mano` es la letra de alguien que anotó el manual antes que vos. Tienen que
   distinguirse de un vistazo, sin fuentes de CDN. */

.av{max-width:720px;margin:0 auto;padding:26px 20px 90px;color:var(--tinta)}

/* El número de legajo del nodo. Es el homenaje al formato: donde el libro decía "pasá a la página
   tal", acá va un número de legajo — y el nodo que no lleva a ninguna parte también tiene, porque
   el sistema numera a todos. */
.av .legajo{font-size:10px;font-weight:900;letter-spacing:.34em;color:var(--tinta-2);
  text-transform:uppercase;margin:22px 0 0;text-align:center}
.av h1{font-size:clamp(25px,4.6vw,36px);font-weight:900;letter-spacing:.01em;
  margin:10px 0 26px;line-height:1.08;text-align:center}

/* Prosa justificada con guionado: sin `hyphens:auto` el justificado en castellano abre ríos
   blancos horribles. Las dos cosas van juntas o ninguna. */
.av p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;
  line-height:1.78;margin:0 0 16px;font-size:15.5px;max-width:none}
.av strong{color:#fff}
.av .tu{color:#fff;font-weight:800}
.av .num{font-weight:900;letter-spacing:.14em;color:var(--sangre-claro)}

/* VOZ 1 — el Programa. */
.av .doc{background:var(--negro-2);border:1px solid var(--borde);border-left:3px solid var(--sangre);
  border-radius:var(--radio);padding:16px 18px;margin:20px 0}
.av .doc .ref{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--tinta-2);
  text-transform:uppercase;margin:0 0 9px;text-align:left;hyphens:none}
.av .doc p{font-size:14px;line-height:1.7;color:#cfd4dc;margin:0 0 10px;
  text-align:left;hyphens:none}
.av .doc p:last-child{margin-bottom:0}

/* VOZ 2 — la letra del margen. No es una cita ni un bloque: es alguien escribiendo encima del
   manual, por eso no lleva recuadro, va corrida a la derecha y en columna angosta. */
.av .mano{margin:20px 0 20px 34px;max-width:46ch;color:var(--tinta-2);font-style:italic;
  font-size:14.5px;line-height:1.62;text-align:left;hyphens:none}
.av .mano::before{content:"";display:block;width:26px;height:1px;background:var(--borde);
  margin:0 0 9px -18px}
/* Las notas condicionales arrancan ocultas y las enciende aventura.js si tu corrida anterior las
   cumple. El cuerpo del relato NO depende de esto: está entero en el HTML. */
.av .mano.oculta{display:none}
.av .mano.oculta.vista{display:block}

/* Las opciones. Botones anchos, uno abajo del otro: la decisión se lee, no se escanea. */
.av .opciones{display:flex;flex-direction:column;gap:10px;margin:34px 0 0;
  padding-top:26px;border-top:1px solid var(--borde)}
.av .opciones a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--panel);border:1px solid var(--borde);border-left:3px solid var(--sangre);
  border-radius:var(--radio);padding:14px 16px;color:var(--tinta);text-decoration:none;
  transition:border-color .12s,background .12s}
.av .opciones a:hover{background:var(--negro-2);border-color:var(--sangre-claro)}
.av .opciones .op-t{font-size:15px;line-height:1.5}
.av .opciones .op-n{flex:0 0 auto;font-size:10px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-2);white-space:nowrap}

/* El final. No hay botón de atrás: lo único que sigue es la unidad que te repuso. */
.av .reposicion{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--borde)}
.av .reposicion .ref{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--tinta-2);
  text-transform:uppercase;margin:0 0 10px;text-align:left;hyphens:none}
.av .reposicion p{color:var(--tinta-2);font-size:14.5px;text-align:left;hyphens:none}
.av .seguir{display:inline-block;margin-top:8px;background:var(--sangre);color:#fff;
  text-decoration:none;font-weight:900;letter-spacing:.06em;font-size:14px;
  padding:12px 18px;border-radius:var(--radio)}
.av .seguir:hover{background:var(--sangre-claro)}

/* El aviso va abajo de todo y colapsado si no hay nada que mostrar: sin huecos ni carteles. */
.av .aviso{margin:40px 0 0;min-height:0}

/* La banda de producto: se tiene que ver que está AFUERA del relato. */
.av .cierre{margin-top:48px;padding-top:26px;border-top:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.av .cierre span{color:var(--tinta-2);font-size:13.5px}

@media (max-width:640px){
  .av .mano{margin-left:18px}
  /* En una columna de 340 px el justificado abre huecos entre palabras aunque haya guionado: hay
     pocas palabras por renglón para repartir el sobrante. En el teléfono va en bandera. */
  .av p{text-align:left}
  .av .opciones a{flex-direction:column;align-items:flex-start;gap:8px}
}