/* Versión blanca. La oscura sigue al sistema; la tecla D alterna entre ambas. */
:root {
  --papel: #ffffff;
  --tinta: #3a3732;
  --tinta-alterada: #000000;   /* las palabras cambiadas, apenas más intensas */
  --tenue: #9a958c;
  --anillo: rgba(29, 27, 24, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #161513;
    --tinta: #dcd6cb;
    --tinta-alterada: #ffffff;
    --tenue: #7c766c;
    --anillo: rgba(233, 228, 218, 0.16);
  }
}

:root[data-theme="dark"] {
  --papel: #161513;
  --tinta: #dcd6cb;
  --tinta-alterada: #ffffff;
  --tenue: #7c766c;
  --anillo: rgba(233, 228, 218, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Libre Baskerville", "Baskerville", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  user-select: none;             /* el doble clic escribe un párrafo nuevo, no selecciona */
  -webkit-user-select: none;
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 16px 8vh;
}

#texto {
  margin: 0;
  max-width: 33em;
  font-size: clamp(17px, 1.1vw + 11px, 25px);
  line-height: 1.75;
  hyphens: manual;
  touch-action: none;           /* en móvil el dedo pinta en vez de desplazar */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}

#texto .w {
  transition: color 1.2s ease;
}

#texto .w.alterada {
  color: var(--tinta-alterada);
  transition-duration: 0.3s;
}

#texto.sin-transicion .w,
#texto.sin-transicion .w.alterada {
  transition: none;
}

main {
  transition: filter 1.2s ease, opacity 1.2s ease;
  touch-action: none;           /* el dedo pinta en todo el bloque, también bajo la última línea */
}

body.en-intro main {
  filter: blur(7px);
  opacity: 0.55;
}

#intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
  transition: opacity 1.2s ease;
  outline: none;
}

#intro.oculta {
  opacity: 0;
  pointer-events: none;
}

.intro-caja {
  max-width: 34em;
  text-wrap: balance;
  text-align: center;
}

.intro-titulo {
  margin: 0 0 18px;
  font-size: clamp(19px, 1.2vw + 13px, 26px);
  line-height: 1.4;
}

.intro-texto {
  margin: 0 0 28px;
  font-size: clamp(15px, 0.6vw + 12px, 18px);
  line-height: 1.7;
  font-style: italic;
}

.intro-entrar {
  margin: 0;
  font-size: 13px;
  color: var(--tenue);
}

.intro-teclas {
  margin: -14px 0 22px;
  font-size: 12px;
  color: var(--tenue);
}

.intro-teclas kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--anillo);
  border-radius: 3px;
}

#intro:focus-visible .intro-entrar {
  color: var(--tinta);
}

footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tenue);
}

footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--anillo);
  transition: color 0.3s ease;
}

footer a:hover,
footer a:focus-visible {
  color: var(--tinta);
  outline: none;
}

/* Q muestra un código QR con la dirección, para quien ve la obra en una pantalla */
#qr {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--papel);
  cursor: pointer;
  transition: opacity 0.6s ease;
}

#qr.oculta {
  opacity: 0;
  pointer-events: none;
}

.qr-caja {
  text-align: center;
}

/* siempre oscuro sobre blanco, que es lo que todos los lectores reconocen */
#qr-codigo {
  display: inline-block;
  padding: 14px;
  background: #ffffff;
  border-radius: 6px;
  line-height: 0;
}

#qr-codigo svg {
  width: min(56vmin, 420px);
  height: auto;
  display: block;
}

.qr-url {
  margin: 22px 0 0;
  font-size: clamp(15px, 0.8vw + 11px, 22px);
  color: var(--tinta);
  word-break: break-all;
}

/* en móvil, marca dónde está el dedo; la palabra que cambia queda justo encima */
#dedo {
  position: fixed;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid var(--tenue);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}

#dedo.visible { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  #texto .w, main, #intro, #qr { transition: none; }
}