/* #a34606 is the text-safe orange (6.1:1 vs white, clears WCAG AA); see
   css/estilo.css for the full rationale. .titulo below keeps the vivid
   #ec6608 since it's large enough (default h1 size) for the AA large-text
   threshold (3:1) on its own. */
body {
  margin: 0;
  background: #ffffff;
  overflow: hidden;
  font-family: "Mirador", sans-serif;
  color: #a34606;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
}

/* blurred layer underneath: creates the gooey/metaball blob look,
   same trick as css/glosario.css (blur + contrast + saturate) */
#canvas-goo {
  filter: blur(18px) contrast(180%) saturate(140%);
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* crisp layer on top: labels only, plus it owns pointer events */
#canvas {
  z-index: 2;
}

.encabezado {
  position: absolute;
  top: 0;
  left: 0;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  pointer-events: none;
  z-index: 3;
}

.titulo {
  margin: 0;
  font-weight: 700;
  color: #ec6608;
  pointer-events: none;
}

.volver {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #a34606;
  background: #ffffff;
  border: 1.5px solid #a34606;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.volver:hover,
.volver:focus-visible {
  background: #a34606;
  color: #ffffff;
}