/* =====================================================================
   Mazmorra de diez niveles — hoja única.

   Los tokens son los mismos de aspulido.com y de los dados, sin
   reinterpretarlos. Aquí el color hace un trabajo distinto al de los
   dados: separa los tres tipos, que es lo único que hay que distinguir
   de un vistazo. Regla verde (el sitio), desventaja roja (lo que te
   cuesta), beneficio dorado (lo que te dan).
   ===================================================================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('../../assets/fonts/playfair-display-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../../assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../../assets/fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --negro-hondo: #0b0a09;
  --negro: #12100f;
  --carbon: #1a1817;
  --carbon-alto: #221f1d;
  --crema: #ede6da;
  --gris-2: #a8a199;
  --gris-3: #8b847b;
  --linea-tenue: #24211f;
  --linea: #2e2b29;
  --linea-fuerte: #453f3a;

  --c-regla: #8fb0a2;
  --c-desventaja: #d2705c;
  --c-beneficio: #d3ac57;

  --f-display: 'Playfair Display', ui-serif, Georgia, serif;
  --f-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  --margen: clamp(20px, 5vw, 48px);
  --dur: 190ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

/* El `display` de una hoja de autor gana al `[hidden] { display: none }` del
   navegador. Pasó en los dados con el recuadro de respaldo del copiado. */
[hidden] { display: none !important; }

/* El <svg> con el cromo de la interfaz: fuera del flujo y sin verse. No puede
   ir con style= en el HTML porque la política de contenidos no lo permite. */
.cromo { position: absolute; }

body {
  margin: 0;
  padding: 0 var(--margen) clamp(40px, 8vh, 72px);
  background: var(--negro-hondo);
  color: var(--crema);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* --- Cabecera --------------------------------------------------------- */

.cabecera {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(36px, 8vh, 72px) 0 clamp(24px, 4vh, 40px);
}

.marca {
  margin: 0 0 clamp(20px, 4vh, 32px);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* El texto mide 15 px de alto, por debajo del mínimo de 24×24 que pide la
   WCAG para una zona de toque. El relleno la agranda y el margen negativo lo
   compensa, así que la marca no se mueve de donde estaba. */
.marca a {
  display: inline-block;
  padding: 6px 4px;
  margin: -6px -4px;
  color: var(--gris-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.marca a:hover { color: var(--crema); }
.marca a:focus-visible { outline: 2px solid var(--crema); outline-offset: 4px; }

h1 {
  margin: 0 0 0.4em;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.entradilla {
  margin: 0;
  max-width: 46ch;
  color: var(--gris-2);
  text-wrap: pretty;
}

main {
  max-width: 900px;
  margin: 0 auto;
}

/* --- La presentación, arriba ------------------------------------------ */

.presentacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 0 0 clamp(18px, 3vh, 26px);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: 6px;
}

.presentacion p {
  flex: 1 1 34ch;
  margin: 0;
  color: var(--gris-2);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.presentacion strong { color: var(--crema); font-weight: 500; }

/* --- Mandos ----------------------------------------------------------- */

.mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mandos.secundarios {
  margin-top: clamp(24px, 4vh, 34px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--linea-tenue);
}

.mandos-etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-3);
  margin-right: 4px;
}

.boton {
  font: inherit;
  font-weight: 500;
  padding: 12px 26px;
  min-height: 46px; /* dedo, no ratón */
  cursor: pointer;
  color: var(--crema);
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.boton:hover { background: var(--carbon); border-color: var(--crema); }
.boton:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }

.boton.principal {
  background: var(--crema);
  color: var(--negro-hondo);
  border-color: var(--crema);
  letter-spacing: 0.02em;
}
.boton.principal:hover { background: #fff; }

/* El enlace pintado como botón necesita que le devuelvan lo que el navegador
   le quita a un <a>, y la altura de dedo de los demás. */
.presentacion .boton,
.mandos .boton {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

/* --- La semilla ------------------------------------------------------- */

.semilla {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: clamp(18px, 3vh, 26px) 0 clamp(20px, 3vh, 28px);
  font-size: 0.875rem;
  color: var(--gris-3);
}

.semilla-etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.semilla-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  color: var(--crema);
  padding: 2px 8px;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.semilla-nota { flex: 1 1 32ch; }

/* --- El descenso ------------------------------------------------------ */

/* La lista es la caída. La raya de la izquierda la sostiene entera, y cada
   nivel cuelga de ella: así se ve que esto baja y no que es un listado. */
.descenso {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(22px, 4vw, 34px);
}

.descenso::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--linea-fuerte),
    var(--linea-fuerte) 60%,
    var(--linea-tenue)
  );
}

.nivel {
  position: relative;
  margin-bottom: clamp(12px, 2vh, 18px);
}

/* La marca sobre la raya, a la altura del título del nivel. */
.nivel::before {
  content: '';
  position: absolute;
  top: 26px;
  left: calc(-1 * clamp(22px, 4vw, 34px) + 1px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--negro-hondo);
  border: 1px solid var(--linea-fuerte);
}

/*
 * La hondura. Cada nivel es un poco más oscuro y su borde un poco más
 * marcado que el anterior: la escala de pesos ya sube por dentro, y esto la
 * hace visible sin escribir «más difícil» en ningún sitio.
 */
.descenso > li:nth-child(1)  { --hondura: 0.00; }
.descenso > li:nth-child(2)  { --hondura: 0.11; }
.descenso > li:nth-child(3)  { --hondura: 0.22; }
.descenso > li:nth-child(4)  { --hondura: 0.33; }
.descenso > li:nth-child(5)  { --hondura: 0.44; }
.descenso > li:nth-child(6)  { --hondura: 0.55; }
.descenso > li:nth-child(7)  { --hondura: 0.66; }
.descenso > li:nth-child(8)  { --hondura: 0.77; }
.descenso > li:nth-child(9)  { --hondura: 0.88; }
.descenso > li:nth-child(10) { --hondura: 1.00; }

.caja {
  background: var(--carbon); /* si no hay color-mix, se queda en este */
  background: color-mix(in srgb, var(--negro) calc(var(--hondura, 0) * 100%), var(--carbon-alto));
  border: 1px solid var(--linea);
  border-left: 2px solid var(--linea-fuerte);
  border-radius: 6px;
}

.caja[open] { border-color: var(--linea-fuerte); }

/* --- La cabecera de cada nivel ---------------------------------------- */

/* El summary se queda en block: display:flex sobre un <summary> funciona en
   Chrome pero es frágil en Safari, y ahí se llevaría por delante el plegado.
   La fila flex es un hijo suyo. */
.cabeza {
  display: block;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2.4vw, 22px);
  cursor: pointer;
  list-style: none; /* fuera el triangulito */
}

.cabeza-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.cabeza::-webkit-details-marker { display: none; }

.cabeza:hover .nivel-numero { color: #fff; }
.caja:focus-within { border-color: var(--linea-fuerte); }
.cabeza:focus-visible { outline: 2px solid var(--crema); outline-offset: -2px; border-radius: 5px; }

.nivel-numero {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--crema);
  transition: color var(--dur) var(--ease);
}

.nivel-banda {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-3);
}

/* Plegado, esto es el índice del descenso: los cinco dominios del nivel. */
.nivel-dominios {
  flex: 1 1 100%;
  font-size: 0.8125rem;
  color: var(--gris-3);
}

/* --- El contenido del nivel ------------------------------------------- */

.nivel-cuerpo {
  padding: 0 clamp(14px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px);
  border-top: 1px solid var(--linea-tenue);
  padding-top: clamp(14px, 2vw, 18px);
}

.grupo + .grupo { margin-top: clamp(16px, 2.5vh, 22px); }

.grupo-titulo {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-3);
}

.elementos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.elemento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--negro-hondo);
  border: 1px solid var(--linea-tenue);
  border-left: 2px solid var(--tono, var(--linea-fuerte));
  border-radius: 4px;
}

.reglas       .elemento { --tono: var(--c-regla); }
.desventajas  .elemento { --tono: var(--c-desventaja); }
.beneficios   .elemento { --tono: var(--c-beneficio); }

.icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: var(--tono, var(--gris-2));
  opacity: 0.85;
}

.elemento-cuerpo { flex: 1 1 auto; min-width: 0; }

.elemento-texto {
  margin: 0;
  text-wrap: pretty;
}

.elemento-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 5px 0 0;
  font-size: 0.75rem;
  color: var(--gris-3);
}

.elemento-meta .dominio {
  color: var(--tono, var(--gris-2));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.elemento-meta .grado {
  color: var(--c-beneficio);
  font-weight: 500;
}

.rehacer {
  margin-top: clamp(14px, 2vh, 18px);
  padding: 10px 18px;
  min-height: 44px; /* dedo: el botón vive dentro del nivel y se pulsa en móvil */
  font-size: 0.875rem;
  color: var(--gris-2);
  border-color: var(--linea);
}
.rehacer:hover { color: var(--crema); }

/* --- Textos de servicio ----------------------------------------------- */

/* Oculto a la vista, presente para quien usa lector de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.anuncio {
  margin: 18px 0 0;
  min-height: 1.5em;
  font-size: 0.8125rem;
  color: var(--gris-3);
}

.aviso {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  color: var(--gris-2);
}

.respaldo {
  display: block;
  margin: 18px 0 0;
  font-size: 0.8125rem;
  color: var(--gris-3);
}

.respaldo textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: 0.8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--crema);
  background: var(--carbon);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  resize: vertical;
}

/* --- La salida, abajo -------------------------------------------------- */

.salida {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: clamp(28px, 5vh, 44px) 0 0;
  font-size: 0.9375rem;
}

.salida a {
  color: var(--gris-2);
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}

.salida a:hover { color: var(--crema); }
.salida a:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }
.salida-sep { color: var(--linea-fuerte); }

/* --- Pie --------------------------------------------------------------- */

.pie {
  max-width: 900px;
  margin: clamp(48px, 9vh, 88px) auto 0;
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--linea-tenue);
  font-size: 0.8125rem;
  color: var(--gris-3);
}

.pie-titulo {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--gris-2);
}

.pie p { margin: 0 0 8px; }
.pie > p { max-width: 78ch; }

.pie-lista {
  margin: 0 0 12px;
  padding-left: 18px;
  max-width: 78ch;
}

.pie-lista li { margin-bottom: 8px; }

/* Qué se miró de cada fuente abierta. Es una nota, no parte de la atribución,
   pero se lee: --linea-fuerte da 1,91:1 sobre el fondo y eso no es un tono
   discreto, es texto ilegible. --gris-3 da 5,35:1 y pasa el mínimo de 4,5:1
   que pide la WCAG para texto normal. Medido, no calculado a ojo. */
.pie-detalle {
  display: block;
  color: var(--gris-3);
  font-style: italic;
}
.pie a { color: var(--gris-2); text-underline-offset: 3px; }
.pie a:hover { color: var(--crema); }
/* Lo mismo: era --linea-fuerte, 1,91:1. Es letra pequeña legal, pero letra
   pequeña legal que no se puede leer no sirve de nada. */
.pie-menor { color: var(--gris-3); }
.pie-menor a { color: var(--gris-2); }

/* --- Movimiento -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}