/* Solo aplicar estas reglas cuando el body tiene id="generator" */
body#generator {
  background: #000;
  color: #fff;
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
}

/* Solo bloquear scroll en html cuando el body tiene id="generator" - usando selector más específico */
html body#generator {
  overflow: hidden !important;
}

#generator > main {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

#generator > #controls {
  position: fixed;
  top: 10px; left: 10px;
  background: rgba(0,0,0,0);
  padding: 10px;
  border-radius: 8px;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
  max-width: calc(100% - 20px);
  max-height: calc(100vh - 20px);
  overflow: hidden;
  z-index: 1000;
  pointer-events: auto;
}

#generator > #controls * {
  pointer-events: auto;
}

@media (max-width: 768px) {
  #generator > #controls {
    font-size: 11px;
    padding: 8px;
  }
  
  #generator > #controls label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  #generator > #controls input[type="range"] {
    width: 100%;
    max-width: 200px;
  }
}

#generator > #controls:hover {
  opacity: 1;
  background: rgba(0,0,0,0.6);
}

#generator > #controls button {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1001;
  opacity: 1 !important;
  visibility: visible !important;
}

#generator > #controls #audioLevel {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Asegurar que html y body permitan scroll en páginas normales */
html {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: #0e0e0e;
  color: #e0e0e0;
  font-family: var(--font-sans);
  line-height: 1.7;
  max-width: 800px;
  margin: auto;
  padding: 2rem;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative; /* Cambiar de fixed a relative para permitir scroll */
}

* {
  box-sizing: border-box;
}

:root {
  /* Families (regla del sitio: Cormorant serif editorial, Lato sans UI, JetBrains mono) */
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, "Courier New", monospace;
  --font-ui-mono: ui-monospace, "SF Mono", "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Type scale — 1 = display (más grande), 6 = meta (más chico).
     Los clamp() son los "anclas"; los demás valores en style.css deben referenciar estos tokens. */
  --fs-1: clamp(2.2rem, 5.5vw, 3rem);       /* display (melange-report__title) */
  --fs-2: clamp(1.85rem, 4.5vw, 2.4rem);    /* h1 page-title, home-header */
  --fs-3: clamp(1.4rem, 3.5vw, 1.7rem);     /* h2 */
  --fs-4: clamp(1.1rem, 2.8vw, 1.3rem);     /* h3 */
  --fs-5: clamp(0.95rem, 2.2vw, 1.1rem);    /* h4 */
  --fs-6: 0.85rem;                           /* h5, h6 */
  --fs-body: clamp(0.95rem, 1.6vw, 1.05rem); /* p base */
  --fs-lead: clamp(1.15rem, 2vw, 1.3rem);    /* lede / paragraphs destacados */
  --fs-small: 0.78rem;                       /* meta, eyebrow, lab-specimen */
  --fs-mono: 0.72rem;                        /* hashes, hex, micro mono */

  /* Line heights */
  --lh-tight: 1.1;     /* display titles */
  --lh-snug: 1.25;    /* h2/h3 */
  --lh-base: 1.55;    /* p base */
  --lh-loose: 1.75;   /* editorial body, fragmentos */
  --lh-meta: 1.4;     /* meta, ui */

  /* Weights (Cormorant solo carga 400/600/700 + italics; techo = 700) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* Headings — base compartida para h1-h6. H4+ rara vez se usan; quedan
   definidos para que un autor que los escriba tenga un estilo predecible. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  color: #e0e0e0;
  letter-spacing: 0;
  word-wrap: break-word;
}

/* Anchor dentro de headings (links inline, ej. el ∅ INIT de page-title) */
h1 > span > a {
  color: rgb(82, 82, 90);
  font-size: var(--fs-5);
}

a {
  color: rgb(82, 82, 90);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

blockquote {
  color: #666666;
  border-left: 3px solid #444;
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
}

/* h1 — page title, home header. Border-bottom tenue + serif bold. */
h1 {
  font-size: var(--fs-2);
  line-height: var(--lh-tight);
  color: #e0e0e0;
  border-bottom: 1px solid #333;
  padding-bottom: 0.3rem;
  margin-top: 2rem;
}

/* h2 — section header dentro de un documento. Misma familia + weight que h1,
   tamaño menor y border más tenue para marcar jerarquía. */
h2 {
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  color: #cccccc;
  border-bottom: 1px solid #222;
  padding-bottom: 0.2rem;
  margin-top: 1.5rem;
}

/* h3 — sub-sección. Sin border (rompe ritmo), italic para diferenciar. */
h3 {
  font-size: var(--fs-4);
  line-height: var(--lh-snug);
  color: #bbbbbb;
  font-weight: var(--fw-regular);
  font-style: italic;
  margin-top: 1.2rem;
}

/* h4+ — fallback. No usados en el contenido actual, pero definidos para
   que un autor que los escriba no termine con un bloque sin estilo. */
h4 {
  font-size: var(--fs-5);
  line-height: var(--lh-snug);
  color: #b8b8b8;
  margin-top: 1rem;
}

h5, h6 {
  font-size: var(--fs-6);
  line-height: var(--lh-snug);
  color: #a8a8a8;
  font-weight: var(--fw-semibold);
  margin-top: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* p — regla global. Antes no existía; cada layout heredaba valores por defecto. */
p {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  margin: 0 0 1em;
  color: inherit;
}

hr {
  border: none;
  border-top: 1px solid #333;
  margin: 2rem 0;
}

strong {
  color: #bb4444;
}

::selection {
  background: #7ab6f5;
  color: #0e0e0e;
}

nav {
  margin-bottom: 2rem;
  text-align: center;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  margin: 0 1rem;
}

.nav a {
  color: #7ab6f5;
  font-weight: bold;
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

/* Inicio: cabecera con título + glifo alineados; escritorio = nube sin disparador */
.home-header {
  margin-bottom: 0.25rem;
}

.home-header__top {
  position: relative;
  display: block;
}

.home-header__top h1 {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.home-nav {
  margin-bottom: 0;
}

.home-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.4rem 0.5rem;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: rgba(200, 195, 186, 0.7);
  cursor: pointer;
  transition:
    color 0.28s ease,
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease;
}

.home-nav__toggle:hover {
  color: rgba(230, 226, 216, 0.92);
}

.home-nav__toggle:focus {
  outline: none;
}

.home-nav__toggle:focus-visible {
  color: #9ec8ff;
  text-shadow: 0 0 14px rgba(122, 182, 245, 0.28);
}

.home-nav__glyph {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
}

.home-nav__glyph::before {
  content: "☰";
}

.home-header--nav-open .home-nav__glyph::before {
  content: "×";
  font-weight: 300;
}

.home-nav__panel {
  transition: max-height 0.38s ease, opacity 0.28s ease, margin 0.25s ease;
}

@media (min-width: 769px) {
  .home-header__top {
    padding-inline-end: 0;
  }

  .home-nav__toggle {
    display: none !important;
    position: static;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
  }

  .home-nav__panel {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

.nube-de-palabras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 0.8rem);
  padding: clamp(1rem, 4vw, 2rem);
  text-align: center;
  animation: flotar 48s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

.nube-de-palabras[data-no-nube-motion] {
  animation: none;
  will-change: auto;
}

.nube-de-palabras a {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: #aaa;
  text-decoration: none;
  font-family: var(--font-serif);
  transition: color 0.2s ease;
  display: inline-block;
  padding: 0.2rem 0.4rem;
  position: relative;
  white-space: nowrap;
}

.nube-de-palabras a:hover,
.nube-de-palabras a:focus-visible {
  color: #fff;
  outline: none;
}

@keyframes flotar {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0.25%, -0.15%) rotate(0.05deg);
  }
  50% {
    transform: translate(-0.2%, 0.2%) rotate(-0.04deg);
  }
  75% {
    transform: translate(0.15%, 0.1%) rotate(0.03deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nube-de-palabras {
    animation: none;
  }

  .nube-de-palabras a:hover,
  .nube-de-palabras a:focus-visible {
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
  }
}

.collage {
  column-count: 3;
  column-gap: 1rem;
  margin-top: 2rem;
}

/* Media Queries - Responsive Design */

/* Tablets y pantallas medianas */
@media (max-width: 900px) {
  body {
    padding: max(1.5rem, env(safe-area-inset-top, 0px))
      max(1.5rem, env(safe-area-inset-right, 0px))
      max(1.5rem, env(safe-area-inset-bottom, 0px))
      max(1.5rem, env(safe-area-inset-left, 0px));
  }
  
  .collage {
    column-count: 2;
    column-gap: 0.75rem;
  }
  
  .nube-de-palabras {
    gap: 0.8rem;
    padding: 1.5rem 1rem;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  body {
    padding: max(1rem, env(safe-area-inset-top, 0px))
      max(1rem, env(safe-area-inset-right, 0px))
      max(1rem, env(safe-area-inset-bottom, 0px))
      max(1rem, env(safe-area-inset-left, 0px));
  }
  
  h1 {
    margin-top: 1rem;
  }

  h2 {
    margin-top: 1rem;
  }
  
  blockquote {
    padding-left: 0.75rem;
    margin-left: 0.5rem;
  }
  
  .highlight pre {
    margin-left: 0;
    padding: 1rem;
    overflow-x: auto;
  }
  
  .nav li {
    margin: 0 0.5rem;
    display: block;
    margin-bottom: 0.5rem;
  }

  .nav a {
    display: inline-block;
    padding: 0.35rem 0.5rem;
    min-height: 44px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  /* Menú inicio: h1 a todo el ancho; botón centrado en altura respecto al título + aire a la derecha */
  .home-header__top h1 {
    margin-top: 1rem;
    margin-bottom: 0;
    /* Simetría visual: mismo aire a ambos lados; derecha reserva la zona del botón */
    padding-inline-start: max(0.5rem, env(safe-area-inset-left, 0px));
    /* padding-inline-end: max(3rem, calc(2.75rem + env(safe-area-inset-right, 0px))); */
    box-sizing: border-box;
  }

  .home-nav {
    width: 100%;
    margin: 0 0 0.35rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-nav__toggle {
    position: absolute;
    /* Centrado vertical con el bloque del h1 (misma caja que .home-header__top) */
    top: 40%;
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    z-index: 3;
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.55));
  }

  .home-header--scrolled .home-nav__toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(-50% - 6px));
  }

  .home-header--nav-open .home-nav__toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%);
  }

  .home-header:not(.home-header--nav-open) .home-nav__panel {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    pointer-events: none;
  }

  .home-header--nav-open .home-nav__panel {
    max-height: min(75vh, 26rem);
    opacity: 1;
    visibility: visible;
    margin-top: 0.5rem;
    pointer-events: auto;
  }

  .home-nav .nube-de-palabras {
    animation: none;
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    gap: 0.35rem;
    padding: 0.5rem 0.5rem 0.85rem;
    will-change: auto;
  }

  .home-nav .nube-de-palabras a {
    animation: none;
    text-align: center;
    padding: 0.28rem 0.4rem;
    border: none;
    border-radius: 0;
    background: none;
    font-family: var(--font-serif);
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(180, 175, 168, 0.88);
  }

  /* 404 u otras nubes sin panel home-nav */
  .nube-de-palabras:not(.home-nav__panel) {
    animation: none;
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem 1rem;
    will-change: auto;
  }

  .nube-de-palabras:not(.home-nav__panel) a {
    animation: none;
    text-align: center;
    padding: 0.28rem 0.4rem;
    border: none;
    border-radius: 0;
    background: none;
    font-family: var(--font-serif);
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(180, 175, 168, 0.88);
  }

  .nube-de-palabras a:hover,
  .nube-de-palabras a:focus-visible {
    color: rgba(245, 245, 240, 0.95);
    filter: none;
  }
}

/* Móviles pequeños */
@media (max-width: 500px) {
  body {
    padding: max(0.75rem, env(safe-area-inset-top, 0px))
      max(0.75rem, env(safe-area-inset-right, 0px))
      max(0.75rem, env(safe-area-inset-bottom, 0px))
      max(0.75rem, env(safe-area-inset-left, 0px));
  }
  
  .collage {
    column-count: 1;
    column-gap: 0.5rem;
  }
  
  .nube-de-palabras {
    gap: 0.5rem;
    padding: 1rem 0.5rem;
  }
  
  .nube-de-palabras a {
    font-size: 0.9rem;
  }
  
  .init a {
    font-size: 1.2rem;
  }
  
  hr {
    margin: 1.5rem 0;
  }
  
  .excerpt {
    -webkit-line-clamp: 4;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 360px) {
  body {
    padding: max(0.5rem, env(safe-area-inset-top, 0px))
      max(0.5rem, env(safe-area-inset-right, 0px))
      max(0.5rem, env(safe-area-inset-bottom, 0px))
      max(0.5rem, env(safe-area-inset-left, 0px));
  }
  
  .nube-de-palabras {
    gap: 0.4rem;
    padding: 0.75rem 0.25rem;
  }
  
  .nube-de-palabras a {
    font-size: 0.85rem;
  }
}

.collage figure {
  break-inside: avoid;
  margin: 0 0 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Soporte para grid layout en galería visual */
.collage[style*="grid"] figure {
  margin: 0;
}

/* Ventana de recorte: ratio variable + zoom sin deformar (object-fit: cover) */
.collage .collage-crop {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: var(--collage-ar, 1);
  text-decoration: inherit;
}

.collage .collage-crop__inner {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.collage .collage-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--collage-ox, 50%) var(--collage-oy, 50%);
  transform: scale(var(--collage-zoom, 1.1));
  transform-origin: center center;
  border-radius: 0;
  display: block;
  position: relative;
  z-index: 0;
  filter: contrast(1) brightness(1);
  mix-blend-mode: normal;
  transition: filter 0.4s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Efectos Glitch - Simplificado: las animaciones se generan dinámicamente en JS */

.collage figure {
  position: relative;
}

/* Capas RGB creadas dinámicamente por JavaScript */
.glitch-rgb-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Efectos hover: solo z-index, sin zoom (el zoom interfiere con la
   lectura del slider — el usuario no quiere que se mueva la imagen). */
.collage figure:hover {
  z-index: 10;
}


/* Efecto de aparición al cargar */
@keyframes fadeInGlitch {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: blur(10px);
  }
  50% {
    filter: blur(5px) contrast(1.2);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) contrast(1);
  }
}

.collage figure {
  animation: fadeInGlitch 0.8s ease-out backwards;
}

.collage figure:nth-child(1) { animation-delay: 0.1s; }
.collage figure:nth-child(2) { animation-delay: 0.2s; }
.collage figure:nth-child(3) { animation-delay: 0.3s; }
.collage figure:nth-child(4) { animation-delay: 0.4s; }
.collage figure:nth-child(5) { animation-delay: 0.5s; }
.collage figure:nth-child(6) { animation-delay: 0.6s; }
.collage figure:nth-child(7) { animation-delay: 0.7s; }
.collage figure:nth-child(8) { animation-delay: 0.8s; }
.collage figure:nth-child(9) { animation-delay: 0.9s; }


.collage figcaption,
.collage__caption {
  text-align: center;
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.collage__link {
  text-decoration: none;
  color: inherit;
}

.collage__link:hover ~ .collage__caption,
.collage__link:focus ~ .collage__caption {
  color: #c9c2b3;
}

/* Inicio: carrusel horizontal en todos los anchos (no solo ≤768px; así no “desaparece” al ampliar ventana) */
.collage--home-mini {
  --home-slide-w: min(17rem, calc(100vw - 3.75rem));
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(1rem, env(safe-area-inset-left, 0px));
  column-count: auto !important;
  column-gap: 0 !important;
  padding: 0.2rem max(1rem, env(safe-area-inset-right, 0px)) 0.6rem
    max(1rem, env(safe-area-inset-left, 0px));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.collage--home-mini figure {
  flex: 0 0 var(--home-slide-w);
  width: var(--home-slide-w);
  min-width: var(--home-slide-w);
  max-width: var(--home-slide-w);
  scroll-snap-align: center;
  margin: 0;
  animation: none;
}

.collage--home-mini figure:not(:last-child) {
  margin-inline-end: 2.75rem;
}

.collage--home-mini .collage-crop {
  aspect-ratio: 4 / 3;
  width: 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Misma lógica que .collage .collage-crop img: el JS fija --collage-ox/oy (p. ej. slider_focal) */
.collage--home-mini .collage-crop img {
  object-position: var(--collage-ox, 50%) var(--collage-oy, 50%);
}

.collage--home-mini::-webkit-scrollbar {
  height: 5px;
}

.collage--home-mini::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}

.collage--home-mini::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

@media (max-width: 768px) {
  .collage--home-mini {
    --home-slide-w: min(17rem, calc(100% - 2.25rem));
  }

  .collage--home-mini figcaption {
    font-size: 0.72rem;
    margin-top: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Cabecera de página: título centrado + ∅ INIT a la derecha (misma línea en móvil y escritorio) */
.page-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  column-gap: 0.35rem;
}

.page-title__text {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  min-width: 0;
}

.page-title .init {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  float: none;
  margin: 0;
  display: block;
  text-align: right;
}

.init {
  float: right;
}

.init a {
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  color: #bbb;
} 

#ui {
   position: absolute; 
   top: 10px; 
   left: 10px; 
   z-index: 10; 
   background: rgba(0,0,0,0.6); 
   padding: 10px; 
   border-radius: 8px;
   max-width: calc(100% - 20px);
   box-sizing: border-box;
}

@media (max-width: 768px) {
  #ui {
    padding: 8px;
    font-size: 0.9rem;
  }
}

select, input, button {
   margin: 5px; 
   padding: 4px;
   box-sizing: border-box;
}

@media (max-width: 768px) {
  select, input, button {
    width: 100%;
    max-width: 200px;
    margin: 4px 0;
  }
}

.poem-nav a {
  font-family: var(--font-sans);
  text-decoration: none;
  color: #444;
}

.poem-nav a:hover {
  text-decoration: underline;
}

.highlight pre {
  color: #f8f8f2;
  margin-left: 3rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

/* Botón de volver minimalista */
.back-button {
  margin: 3rem 0 2rem 0;
  padding-top: 2rem;
  border-top: 1px solid #222;
}

.back-button a {
  color: #666;
  font-size: 1.2rem;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 300;
  transition: color 0.2s ease;
  display: inline-block;
}

.back-button a:hover {
  color: #aaa;
  text-decoration: none;
}

@media (max-width: 768px) {
  .highlight pre {
    margin-left: 0;
    padding: 1rem;
    font-size: 0.9rem;
  }
}

.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.6;
  color: #ccc;
}

.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #999;
  text-decoration: none;
  transition: color 0.2s ease;
}
.read-more:hover {
  color: #e0e0e0;
  text-decoration: underline;
}

/* Link oculto a Vestigios */
.link-oculto {
  color: #0e0e0e;
  text-decoration: none;
  font-size: 0.5rem;
  margin-left: 0.3rem;
  opacity: 0.1;
  transition: opacity 0.3s ease, color 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

.link-oculto:hover {
  opacity: 0.6;
  color: #666;
  text-decoration: none;
}

blockquote:hover .link-oculto {
  opacity: 0.3;
}

/* Mejoras adicionales de responsividad */
main {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* Imágenes de cabecera (poemas, etc.): antes con estilos inline; móvil sin altura mínima excesiva */
.page-figure {
  margin: 0;
  padding: 0;
}

.page-figure__caption {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}

.page-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 300px;
  max-height: 500px;
  object-fit: cover;
  object-position: center 85%;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .page-figure img {
    min-height: 140px;
    max-height: min(48vh, 400px);
  }
}

/* Poemas: --font-serif; Kramdown "  " → <br> */
.poem-body {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.1vw, 1.1rem);
  font-weight: 400;
  color: #e6e0d8;
  letter-spacing: 0.03em;
}

.poem-body p {
  margin: 0 0 0.9em;
  line-height: var(--lh-loose);
}

.poem-body p:last-child {
  margin-bottom: 0;
}

.poem-body h2 {
  margin: 0 0 0.75em;
  font-family: inherit;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

/* Índice /poemas/ */
.poemas-index {
  margin-top: 0.25rem;
}

.poemas-index-lede {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-style: italic;
  color: #8a8278;
  margin: 0 0 1.85rem;
  letter-spacing: 0.03em;
  line-height: 1.45;
}

.poemas-index__month {
  margin-bottom: 1.85rem;
}

.poemas-index__month:not(:last-child) {
  padding-bottom: 1.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.poemas-index__month-label {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d7368;
  margin: 0 0 0.85rem;
  padding: 0 0 0.35rem;
  border: none;
  border-bottom: 1px solid #2c2c2c;
}

.poemas-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.poemas-index__row {
  display: flex;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.42rem 0.4rem;
  margin: 0 -0.4rem;
  border-radius: 6px;
  text-decoration: none;
  color: #d4ccc0;
  transition: background 0.18s ease, color 0.18s ease;
}

.poemas-index__row:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #f0ebe4;
}

.poemas-index__thumb-wrap {
  flex-shrink: 0;
  line-height: 0;
}

.poemas-index__thumb {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.poemas-index__day {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #5a5755;
  min-width: 1.75rem;
  flex-shrink: 0;
}

.poemas-index__title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.25rem;
}

.poemas-index__title {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.poemas-index__series {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: #6d6560;
}

/* Vestigios — refactor de estilos inline de vestigios/index.md */
.vestigio {
  margin: 3rem 0;
  padding: 1.5rem;
  border-left: 1px solid #333;
}

.vestigio__title-link {
  text-decoration: none;
}

.vestigio__title {
  margin-top: 0;
  color: #888;
  font-size: 1rem;
  font-weight: normal;
}

.vestigio__date {
  color: #444;
  font-size: 0.85rem;
}

.vestigio__sigil {
  color: #c9a86b;
  font-style: normal;
  font-weight: 500;
  margin-right: 0.35em;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.vestigio__title-link:hover .vestigio__sigil,
.vestigio__title-link:focus .vestigio__sigil {
  color: #e0c08a;
}

/* Código — listado en /codigo/ */
.codigo-list {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.codigo-list__item {
  margin: 0 0 1.5rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.codigo-list__binary {
  display: inline-block;
  color: #5fa8a0;
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  padding: 0.1em 0.55em 0.15em;
  margin-right: 0.7em;
  border: 1px solid rgba(95, 168, 160, 0.4);
  border-radius: 3px;
  background: rgba(95, 168, 160, 0.04);
  font-weight: 500;
  vertical-align: 0.05em;
}

.codigo-list__title {
  text-decoration: none;
}

.codigo-list__lang {
  font-size: 0.9em;
  color: #999;
  margin-left: 0.3em;
}

.codigo-list__concept {
  margin: 0.5em 0 0 2.4em;
  font-size: 0.85em;
  font-style: italic;
  color: #7d7368;
  line-height: 1.5;
}

/* Diario — listado en /diario/ */
.diario-index {
  margin: 2rem 0;
}

.diario-entry {
  margin: 0 0 2.5rem;
}

.diario-entry__title {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.diario-entry__title a {
  text-decoration: none;
  color: inherit;
}

.diario-entry__date {
  color: #666;
  font-size: 0.85em;
  font-weight: 400;
  margin-left: 0.4em;
}

.diario-entry__excerpt {
  color: #a8a39c;
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0.5rem 0 0.75rem;
  font-style: italic;
  padding-left: 1rem;
  border-left: 2px solid rgba(184, 116, 26, 0.35);
}

.diario-entry__more {
  color: #8a8a8a;
  font-size: 0.85rem;
  text-decoration: none;
}

.diario-entry__sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin: 2.5rem 0;
}

/* 404 — error page */
.error-page {
  text-align: center;
  margin: 3rem 0;
}

.error-page__message {
  color: #888;
  font-size: clamp(1rem, 3vw, 1.2rem);
  line-height: 1.8;
  margin: 0 0 4rem;
}

.error-page__home {
  display: inline-block;
  color: #7ab6f5;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.error-page__home:hover,
.error-page__home:focus {
  color: #fff;
  border-color: #7ab6f5;
}

.error-page__sep {
  border: none;
  border-top: 1px solid #333;
  margin: 4rem 0;
}

.error-page__explore {
  color: #666;
  font-size: 0.9rem;
  font-style: italic;
}

.error-page__explore p {
  margin: 0 0 1rem;
}

/* Personal music item — usado por /musica/ */
.personal-music-item {
  margin: 1.5rem 0;
  padding: 1rem;
  border-left: 2px solid #333;
}

.personal-music-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.personal-music-item__icon {
  color: #888;
}

.personal-music-item__title {
  color: #ccc;
  font-weight: 700;
}

.personal-music-item__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.personal-music-item__link {
  color: #7ab6f5;
  text-decoration: none;
  font-size: 0.9em;
}

/* Related poem — al pie de un poema cuando hay serie */
.related-poem {
  margin-top: 4rem;
}

.related-poem__title {
  font-family: var(--font-serif);
}

.related-poem__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.related-poem__item {
  margin: 0.25rem 0;
}

.related-poem__date {
  color: #999;
  margin-left: 0.4em;
}

/* Poem nav — prev/next dentro de una serie */
.poem-nav {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
}

/* Page title series — sub-texto en el H1 de un poema con serie */
.page-title__series {
  font-size: 0.9em;
  color: #999;
}

/* Content item — include genérico */
.content-item {
  margin: 2rem 0;
  padding: 1.5rem;
  border-left: 1px solid #333;
}

.content-item__title-link {
  text-decoration: none;
}

.content-item__title {
  margin-top: 0;
  color: #888;
  font-size: clamp(1rem, 3vw, 1.1rem);
  word-wrap: break-word;
}

.content-item__date {
  color: #444;
  font-size: 0.85rem;
}

.content-item__image {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 1rem 0;
  opacity: 0.7;
  border-radius: 4px;
  display: block;
}

.content-item__excerpt {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.6;
}

.content-item__more {
  color: #444;
  font-size: 0.85rem;
  text-decoration: none;
  margin-top: 0.5rem;
  display: inline-block;
}

/* Imagen page — layout para _images */
.imagen-page__figure {
  margin: 0;
}

.imagen-page__image {
  width: 100%;
  height: auto;
}

.imagen-page__caption {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}

.imagen-page__body {
  margin-top: 2rem;
}

.vestigio__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  opacity: 0.7;
  border-radius: 4px;
}

.vestigio__body {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.6;
}

.vestigio__more {
  color: #444;
  font-size: 0.85rem;
  text-decoration: none;
  margin-top: 0.5rem;
  display: inline-block;
}

.vestigio__sep {
  border: none;
  border-top: 1px solid #222;
  margin: 2rem 0;
}

@media (max-width: 520px) {
  .poemas-index__row {
    gap: 0.5rem 0.75rem;
  }

  .poemas-index__title {
    font-size: 1.12rem;
  }
}

/* Smartphone: títulos de sección (y cabecera de página) centrados */
@media (max-width: 768px) {
  main > h1:not(.page-title) {
    text-align: center;
  }

  main > h1.page-title {
    text-align: left;
  }

  main h2 {
    text-align: center;
  }

  .poemas-index-lede {
    text-align: center;
  }

  .musica-page__masthead,
  .musica-page__soon,
  .musica-page__mixer-line {
    text-align: center;
  }
}

/* Música — índice alineado con Melange / Poemas */
.musica-page {
  max-width: 40rem;
  margin: 0.20rem 0.25rem;
  padding: 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.65;
  color: #c9bdb0;
}

.musica-page__soon {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #9a8b78;
  margin: 0 0 0.75rem;
}

.musica-page__soon strong {
  color: #c8b8a4;
  font-weight: 600;
}

.musica-page__mixer-line {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.musica-page__mixer-line a {
  color: #8a7d72;
  text-decoration: none;
  border-bottom: 1px solid rgba(150, 130, 100, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.musica-page__mixer-line a:hover {
  color: #c4b5a2;
  border-bottom-color: rgba(180, 160, 130, 0.55);
}

.musica-page__masthead {
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(180, 160, 130, 0.22);
}

.musica-page__kicker {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #e4d9cc;
  margin: 0 0 0.45rem;
}

.musica-page__tagline {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  color: #8a7d72;
  margin: 0;
  line-height: 1.55;
}

.musica-page__section {
  margin: 0 0 2rem;
  padding: 0 0 1.65rem;
  border-bottom: 1px solid rgba(95, 88, 78, 0.32);
}

.musica-page__section--last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.musica-page__section-title {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2.4vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d7368;
  margin: 0 0 0.75rem;
  padding: 0 0 0.35rem;
  border: none;
  border-bottom: 1px solid #2c2c2c;
}

.musica-page__section-lead {
  font-size: 1.02rem;
  color: #b0a394;
  margin: 0 0 1rem;
  line-height: 1.6;
}

.musica-page__mixer-action {
  margin: 0;
}

.musica-page__mixer-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c4b5a2;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(150, 130, 100, 0.4);
  border-radius: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.musica-page__mixer-link:hover {
  color: #efe6dc;
  border-color: rgba(180, 160, 130, 0.55);
  background: rgba(255, 255, 255, 0.04);
}

.spotify-playlist {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.musica-page .spotify-playlist {
  margin: 0;
  padding: 0 0 2rem;
  border-bottom: 1px solid rgba(95, 88, 78, 0.28);
}

.musica-page .spotify-playlist:not(:first-child) {
  padding-top: 1.15rem;
}

.musica-page .spotify-playlist:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.spotify-playlist__title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: #efe6dc;
  margin: 0;
  line-height: 1.3;
}

.spotify-playlist__genre {
  display: inline;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #7a6c5e;
}

/* Evita el hueco de ~1–4px bajo el iframe (baseline + inline) */
.spotify-playlist__embed-wrap {
  line-height: 0;
  font-size: 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
}

.spotify-playlist__embed {
  display: block;
  width: 100%;
  height: 152px;
  border: none;
}

/* Nota bajo el reproductor: no compite con el embed */
.spotify-playlist__desc {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  font-style: normal;
  color: #5a534c;
  margin: 0;
  line-height: 1.4;
  max-width: 38rem;
}

.youtube-setlist {
  margin: 1.35rem 0 0;
}

.youtube-setlist:first-of-type {
  margin-top: 0.5rem;
}

.youtube-setlist__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.4rem;
}

.youtube-setlist__title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: #efe6dc;
  margin: 0;
  line-height: 1.3;
}

.youtube-setlist__artist {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: #8a7d72;
}

.youtube-setlist__event {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: #7a6c5e;
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.youtube-setlist__frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.youtube-setlist__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 500px) {
  .musica-page {
    font-size: 1.02rem;
  }

  .musica-page__kicker {
    font-size: 1.4rem;
  }
}

/* Ajustes para listas en móviles */
ul, ol {
  padding-left: 1.5rem;
}

@media (max-width: 768px) {
  ul, ol {
    padding-left: 1.25rem;
  }
}

/* Mejoras para código y pre */
code {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Páginas de código: cuerpo como en el IDE (misma familia y color que el bloque pre) */
main.codigo-page {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: #5fa8a0;
}

main.codigo-page h1,
main.codigo-page h2,
main.codigo-page h3 {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.02em;
}

main.codigo-page h1 {
  color: #e0e0e0;
}

main.codigo-page h2 {
  color: #cccccc;
}

main.codigo-page h3 {
  color: #bbbbbb;
}

main.codigo-page h1 .init a {
  color: rgb(82, 82, 90);
  font-weight: 300;
}

main.codigo-page h1 .init a:hover {
  color: #aaa;
}

main.codigo-page em {
  font-family: inherit;
  font-weight: 300;
}

/* Reflexión final: prefijo _ (párrafo que solo contiene cursiva) */
main.codigo-page p:has(> em:only-child)::before {
  content: "_";
  font-weight: 300;
  margin-right: 0.15em;
  opacity: 0.9;
}

/* Estilos artísticos para sección de código - Estética Giger */
.codigo-page pre {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(74, 155, 142, 0.3);
  border-left: 4px solid rgba(74, 155, 142, 0.6);
  padding: 2rem;
  margin: 2.5rem 0;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.8;
  color: #5fa8a0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(74, 155, 142, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  overflow-x: auto;
  text-shadow: 0 0 2px rgba(95, 168, 160, 0.3);
}

.codigo-page pre:hover {
  border-left-color: rgba(74, 155, 142, 0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(74, 155, 142, 0.1);
  text-shadow: 0 0 3px rgba(95, 168, 160, 0.5);
}

.codigo-page pre code {
  background: transparent;
  padding: 0;
  color: #5fa8a0;
  font-size: inherit;
  font-family: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Colores específicos para elementos del código - Paleta Giger */
.codigo-page pre code .keyword {
  color: #6bb3a8;
  font-weight: 400;
}

.codigo-page pre code .string {
  color: #4a9b8e;
}

.codigo-page pre code .comment {
  color: #4a7c8e;
  font-style: italic;
  opacity: 0.8;
}

.codigo-page pre code .function {
  color: #5fa8a0;
}

.codigo-page pre code .number {
  color: #6bb3a8;
}

/* Concepto filosófico como cita */
.codigo-page .concept {
  font-style: italic;
  font-weight: 300;
  color: #5fa8a0;
  opacity: 0.88;
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(95, 168, 160, 0.25);
}

/* Separador estético */
.codigo-page hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 3rem 0;
}

/* Metadatos del código */
.codigo-page .codigo-meta {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(95, 168, 160, 0.55);
  margin-bottom: 1.5rem;
}

.codigo-page .codigo-meta span {
  margin-right: 1rem;
}

/* Dispositivos: VST, apps, herramientas propias */
main.dispositivo-page {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: #d0d0d0;
}

.dispositivo-page__lead {
  font-style: italic;
  color: rgba(200, 200, 200, 0.88);
  margin: 0.5rem 0 1.25rem;
  max-width: 42rem;
}

.dispositivo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  font-size: 0.88rem;
  color: rgba(160, 160, 170, 0.95);
  margin-bottom: 2rem;
  padding: 0.75rem 0 0.75rem 0.75rem;
  border-left: 2px solid rgba(120, 140, 200, 0.35);
}

.dispositivo-meta a {
  color: #8eb4e8;
  text-decoration: none;
}

.dispositivo-meta a:hover {
  text-decoration: underline;
}

.dispositivo-meta__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(100, 120, 180, 0.2);
  border: 1px solid rgba(120, 140, 200, 0.35);
  color: #b8c8f0;
}

.dispositivo-meta__badge--vst {
  background: rgba(140, 100, 160, 0.2);
  border-color: rgba(160, 120, 180, 0.4);
  color: #d8b8e8;
}

.dispositivo-meta__badge--app {
  background: rgba(80, 140, 130, 0.2);
  border-color: rgba(90, 150, 140, 0.35);
  color: #9fd4cc;
}

.dispositivo-meta__badge--visual {
  background: rgba(180, 100, 60, 0.2);
  border-color: rgba(200, 120, 80, 0.4);
  color: #e8b890;
}

.dispositivo-meta__badge--hardware {
  background: rgba(100, 160, 100, 0.2);
  border-color: rgba(120, 180, 120, 0.4);
  color: #a8d8a8;
}

.dispositivo-meta__tech {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(140, 180, 170, 0.9);
}

.dispositivo-page__body {
  max-width: 46rem;
}

.dispositivo-page__body h2,
.dispositivo-page__body h3 {
  font-family: var(--font-serif);
  color: #e8e8e8;
  margin-top: 1.75rem;
}

.dispositivo-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.dispositivo-list li {
  margin: 0.85rem 0;
  padding-left: 0.25rem;
}

.dispositivo-list a {
  color: #8eb4e8;
  text-decoration: none;
}

.dispositivo-list a:hover {
  text-decoration: underline;
}

.dispositivo-list__kind {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(150, 160, 190, 0.85);
  margin-left: 0.35rem;
}

.dispositivo-index-lead {
  font-style: italic;
  color: rgba(180, 180, 190, 0.9);
  margin: 0 0 1.5rem;
  max-width: 40rem;
}

/* Botón Run para código ejecutable */
.code-run-button {
  background: rgba(74, 155, 142, 0.2);
  border: 1px solid rgba(74, 155, 142, 0.5);
  color: #5fa8a0;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-run-button:hover {
  background: rgba(74, 155, 142, 0.3);
  border-color: rgba(74, 155, 142, 0.8);
  color: #6bb3a8;
  box-shadow: 0 0 10px rgba(74, 155, 142, 0.3);
}

.code-run-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal de output */
.code-output-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(4px);
  padding: 2rem;
  box-sizing: border-box;
}

.code-output-modal.active {
  opacity: 1;
  visibility: visible;
}

.code-output-container {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(74, 155, 142, 0.5);
  border-radius: 8px;
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(74, 155, 142, 0.2);
  margin: 0 auto;
}

.code-output-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(74, 155, 142, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-output-title {
  color: #5fa8a0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.code-output-close {
  background: transparent;
  border: none;
  color: #5fa8a0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.code-output-close:hover {
  color: #6bb3a8;
}

.code-output-content {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.code-output-text {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.1;
  color: #5fa8a0;
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre;
  font-variant-ligatures: none;
  letter-spacing: 0.5px;
  font-weight: normal;
}

.code-output-line {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
}

.code-output-line.code-output-log {
  color: #5fa8a0;
  border-left-color: rgba(95, 168, 160, 0.3);
}

.code-output-line.code-output-result {
  color: #6bb3a8;
  border-left-color: rgba(107, 179, 168, 0.5);
  font-weight: 500;
}

.code-output-line.code-output-error {
  color: #8b4a4a;
  border-left-color: rgba(139, 74, 74, 0.5);
}

.code-output-line.code-output-warn {
  color: #8b7a4a;
  border-left-color: rgba(139, 122, 74, 0.5);
}

/* Versión expandible (alternativa) */
.code-output-expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(74, 155, 142, 0.2);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.code-output-expandable.expanded {
  max-height: 500px;
  padding: 1rem;
  margin-bottom: 2rem;
}

.code-output-expandable pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.8rem;
}

/* Modal de input */
.code-input-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(4px);
}

.code-input-modal.active {
  opacity: 1;
  visibility: visible;
}

.code-input-container {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(74, 155, 142, 0.5);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(74, 155, 142, 0.2);
}

.code-input-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(74, 155, 142, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-input-title {
  color: #5fa8a0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.code-input-close {
  background: transparent;
  border: none;
  color: #5fa8a0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.code-input-close:hover {
  color: #6bb3a8;
}

.code-input-content {
  padding: 1.5rem;
}

.code-input-field {
  width: 100%;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(74, 155, 142, 0.3);
  border-radius: 4px;
  color: #5fa8a0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  box-sizing: border-box;
}

.code-input-field:focus {
  outline: none;
  border-color: rgba(74, 155, 142, 0.6);
  box-shadow: 0 0 10px rgba(74, 155, 142, 0.2);
}

.code-input-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(74, 155, 142, 0.3);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.code-input-submit,
.code-input-cancel {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(74, 155, 142, 0.5);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.code-input-submit {
  background: rgba(74, 155, 142, 0.2);
  color: #5fa8a0;
}

.code-input-submit:hover {
  background: rgba(74, 155, 142, 0.3);
  border-color: rgba(74, 155, 142, 0.8);
}

.code-input-cancel {
  background: transparent;
  color: #666;
  border-color: rgba(255, 255, 255, 0.2);
}

.code-input-cancel:hover {
  color: #999;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Scroll del documento bloqueado mientras un modal de código está abierto (JS: body.code-modal-open) */
html:has(body.code-modal-open) {
  overflow: hidden !important;
}

body.code-modal-open {
  overflow: hidden !important;
}

/* Modales Run / Input / Advertencia: pantalla completa en móvil — un solo scroll en el contenido */
@media (max-width: 768px) {
  .code-output-modal {
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
  }

  .code-output-container {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    margin: 0;
  }

  .code-output-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .code-input-modal {
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
  }

  .code-input-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    margin: 0;
  }

  .code-input-header {
    flex-shrink: 0;
  }

  .code-input-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .code-input-footer {
    flex-shrink: 0;
  }

  .code-output-header {
    flex-shrink: 0;
  }
}

/* Ficha técnica — lista de definición (más limpia que tabla) */
.report-spec {
  margin: 0.75rem 0 1.75rem;
  padding: 0.75rem 1rem 0.8rem;
  border-radius: 6px;
  background: rgba(35, 32, 28, 0.55);
  border: 1px solid rgba(110, 98, 82, 0.35);
  font-size: 0.875rem;
  line-height: 1.28;
  color: #c4b8aa;
  display: grid;
  grid-template-columns: minmax(6.5rem, 28%) 1fr;
  gap: 0.12rem 1rem;
}

.report-spec dt {
  margin: 0;
  padding: 0.06rem 0;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7d6e;
  align-self: start;
  line-height: 1.2;
}

.report-spec dd {
  margin: 0;
  padding: 0.06rem 0;
  color: #dcd2c6;
  line-height: 1.3;
}

@media (max-width: 520px) {
  .report-spec {
    grid-template-columns: 1fr;
    gap: 0.08rem 0;
    row-gap: 0.1rem;
  }

  .report-spec dt {
    margin-top: 0.45rem;
    color: #a89884;
  }

  .report-spec dt:first-child {
    margin-top: 0;
  }

  .report-spec dd {
    padding-bottom: 0.28rem;
    border-bottom: 1px solid rgba(90, 82, 72, 0.35);
  }

  .report-spec dd:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Página de reporte Melange (layout dedicado) */
.melange-report-page .melange-report-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  padding: 0 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.melange-report-page .melange-report-top .init {
  float: none;
  margin: 0;
}

.melange-report-pref {
  color: #9a8a78;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.melange-report-pref:hover {
  color: #d4c4b0;
  border-bottom-color: rgba(180, 155, 120, 0.45);
}

.melange-report {
  max-width: 42rem;
  margin: 0 auto 3rem;
  padding: 0 0.35rem;
}

.melange-report__head {
  margin-bottom: 1.5rem;
  text-align: center;
}

.melange-report__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7d7368;
  margin: 0 0 0.65rem;
}

.melange-report__title {
  font-family: var(--font-serif);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: #f0e8de;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.melange-report__subtitle {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  color: #a89884;
  margin: 0;
  line-height: 1.35;
}

.melange-report__cover {
  margin: 0 0 2rem;
  padding: 0;
}

.melange-report__cover-frame {
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.melange-report__cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 420px);
  object-fit: cover;
  object-position: center 42%;
}

.melange-report__cover--fallback img {
  object-position: center center;
}

.melange-report__credit {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: #6d655c;
  text-align: center;
  font-style: normal;
}

.melange-report__body {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.72;
  color: #cfc3b4;
}

.melange-report__body > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.65;
  color: #e2d8cc;
}

.melange-report__body h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: #e8dfd4;
  margin: 1.85rem 0 0.85rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(120, 108, 92, 0.35);
}

.melange-report__body h2:first-child {
  margin-top: 0;
}

.melange-report__body hr {
  margin: 2rem 0;
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(140, 125, 105, 0.45) 20%,
    rgba(140, 125, 105, 0.45) 80%,
    transparent
  );
}

.melange-report__body strong {
  color: #ebe3d9;
  font-weight: 600;
}

.melange-report__body blockquote {
  margin: 1.25rem 0;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 3px solid rgba(139, 115, 85, 0.55);
  color: #b8aa9a;
  font-style: italic;
}

.melange-report__wip {
  margin: 0 0 2rem;
  padding: 1.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(110, 98, 82, 0.45);
  background: rgba(40, 36, 30, 0.65);
  text-align: center;
}

.melange-report__wip-lead {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: #ddd4c8;
  margin: 0 0 0.5rem;
}

.melange-report__wip-text {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: #8a7d72;
  margin: 0;
  line-height: 1.55;
}

.melange-report__skeleton {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  opacity: 0.5;
}

.melange-report__skeleton h2 {
  margin-top: 1.5rem;
}

.melange-report__skeleton h2:first-of-type {
  margin-top: 0;
}

.melange-report__skeleton-hint {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 300;
  color: #6d655c;
  margin: 0 0 1.15rem;
  line-height: 1.45;
}

/* Ajustes para tablas */
table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

@media (min-width: 600px) {
  table {
    display: table;
    white-space: normal;
  }
}

/* Elementos responsive adicionales */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  max-width: 100%;
  height: auto;
}

canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

#three-canvas {
  width: 100% !important;
  height: 100vh !important;
  display: block;
}

@media (max-width: 768px) {
  #three-canvas {
    height: 70vh !important;
  }
}

/* Mejoras para contenido embebido */
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Tablas responsive */
table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

@media (min-width: 600px) {
  table {
    display: table;
  }
}

/* Mejoras de accesibilidad táctil en móviles */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .read-more {
    padding: 0.5rem;
    display: block;
    text-align: center;
  }
}

/* Ajustes para contenido largo */
@media (max-width: 768px) {
  .content-item {
    padding: 1rem !important;
    margin: 1.5rem 0 !important;
  }
  
  .content-item h3 {
    font-size: 1rem !important;
  }
}

/* Línea tipo consola (inicio) */
.home-terminal {
  font-family: var(--font-ui-mono);
  font-size: clamp(0.62rem, 1.15vw, 0.72rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin: 1.25rem 0 1.5rem;
  padding: 0.5rem 0.7rem 0.55rem;
  background: #0c0c0c;
  color: #b8e0b8;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

.home-terminal-prompt {
  color: #5fa8a0;
  user-select: none;
  margin-right: 0.45em;
  font-weight: 300;
  opacity: 0.9;
}

.home-terminal-text {
  color: #9fdf9f;
  font-weight: 300;
}

/* === Rastros (ex-Fragmentos) — archivo continuo, sin clicks ============ */
/* Scope: solo aplica a main.fragmentos-archive. El layout default provee
   max-width, padding y body — nosotros añadimos el feel editorial:
   serif, line-height generoso, charcoal, separador por año, hover. */

main.fragmentos-archive {
  background: #0c0c0e;
  color: rgba(200, 200, 210, 0.82);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  letter-spacing: 0.005em;
}

main.fragmentos-archive .rastros-lead {
  font-style: italic;
  color: rgba(180, 180, 200, 0.6);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  margin: 0 0 3.5rem;
  max-width: 32rem;
}

main.fragmentos-archive .rastros-year {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  color: rgba(160, 160, 180, 0.4);
  margin: 3.5rem 0 1.5rem;
  text-transform: uppercase;
}

main.fragmentos-archive .rastros-year-sep {
  display: none;
}

main.fragmentos-archive .rastro-bloque {
  /* Cuaderno: el bloque no reacciona. El texto está, no se mueve,
     no cambia de color al pasar el mouse. Como página escrita. */
  margin: 0 0 2.6rem;
  padding: 0;
  cursor: text;
}

main.fragmentos-archive .rastro-linea {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(210, 210, 220, 0.85);
}

main.fragmentos-archive .rastro-linea + .rastro-linea {
  margin-top: 0.5rem;
  color: rgba(200, 200, 210, 0.8);
}

main.fragmentos-archive .rastro-marca {
  display: block;
  color: rgba(200, 170, 130, 0.45);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.3em;
  padding-left: 0.2rem;
}

main.fragmentos-archive .rastro-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1.4rem;
}

main.fragmentos-archive .rastro-lista li {
  position: relative;
  padding: 0.2rem 0 0.2rem 0.9rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(210, 210, 220, 0.85);
}

main.fragmentos-archive .rastro-lista li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0.4rem;
  color: rgba(200, 170, 130, 0.55);
  font-family: var(--font-mono);
  font-size: 1.1em;
  line-height: 1;
}

main.fragmentos-archive .rastro-lista li + li {
  color: rgba(200, 200, 210, 0.8);
}

@media (max-width: 600px) {
  main.fragmentos-archive {
    line-height: var(--lh-base);
  }
  main.fragmentos-archive .rastros-year {
    margin-top: 2.5rem;
  }
  main.fragmentos-archive .rastro-bloque {
    margin-bottom: 1.8rem;
  }
  main.fragmentos-archive .rastro-linea {
    font-size: 1.05rem;
  }
}

/* Laboratorio (inicio) */
.lab {
  margin: 2rem 0 2.5rem;
  padding: 0;
}

.lab-intro {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: #777;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.lab-toolbar {
  margin-bottom: 1rem;
}

.lab-shuffle {
  font-family: var(--font-ui-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border: 1px solid #444;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  border-radius: 2px;
  min-height: auto;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lab-shuffle:hover {
  color: #eee;
  border-color: #666;
}

.lab-feed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lab-specimen {
  border: 1px solid #2a2a2a;
  border-left: 3px solid #5fa8a0;
  padding: 0.85rem 1rem 1rem;
  background: rgba(0, 0, 0, 0.15);
}

.lab-specimen-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-ui-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #a8a35c;
}

.lab-kind {
  font-weight: 600;
  text-transform: uppercase;
}

.lab-num {
  color: #555;
  font-size: 0.62rem;
  max-width: 58%;
  min-width: 0;
  text-align: right;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: var(--font-ui-mono);
}

.lab-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.45;
  color: #ccc;
}

.lab-text a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #333;
  min-height: unset;
  min-width: unset;
  display: inline;
}

.lab-text a:hover {
  border-bottom-color: #5fa8a0;
  color: #eee;
}

/* Melange — índice como diario / reportes de viaje */
.melange-journal {
  max-width: 40rem;
  margin: 0.5rem;
  padding: 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.65;
  color: #c9bdb0;
}

.melange-journal__masthead {
  margin-bottom: 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(180, 160, 130, 0.25);
}

.melange-journal__kicker {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #e4d9cc;
  margin: 0 0 0.5rem;
}

.melange-journal__tagline {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  color: #8a7d72;
  margin: 0;
  line-height: 1.5;
}

.melange-entry {
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid rgba(95, 88, 78, 0.35);
}

.melange-entry:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.melange-entry__row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.melange-entry__media {
  flex: 0 0 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 9rem;
}

.melange-entry__date--media {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

.melange-entry__thumb {
  flex: 0 0 auto;
  width: 9rem;
  height: 9rem;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.4);
  line-height: 0;
}

.melange-entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.melange-entry__thumb--fallback img {
  opacity: 0.92;
}

.melange-entry__main {
  flex: 1;
  min-width: 0;
}

.melange-entry__meta {
  margin-bottom: 0.35rem;
}

.melange-entry__date {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6c5e;
}

.melange-entry__title {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.melange-entry__title a {
  color: #efe6dc;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.melange-entry__title a:hover {
  color: #fff;
  border-bottom-color: rgba(180, 150, 110, 0.55);
}

.melange-entry__body {
  font-size: 1.02rem;
  color: #b8aa9c;
  line-height: 1.7;
}

.melange-entry__body + .melange-entry__footer {
  margin-top: 0.85rem;
}

.melange-entry__footer {
  margin: 0;
}

.melange-entry__more {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a8b78;
  text-decoration: none;
  border-bottom: 1px solid rgba(150, 130, 100, 0.35);
}

.melange-entry__more:hover {
  color: #c4b5a2;
  border-bottom-color: rgba(180, 160, 130, 0.55);
}

.melange-entry__body--stub {
  font-style: italic;
  color: #6d655c !important;
  font-size: 0.95rem !important;
}

@media (max-width: 500px) {
  .melange-journal {
    font-size: 1.05rem;
  }

  .melange-entry__title {
    font-size: 1.4rem;
  }

  .melange-entry__row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .melange-entry__media {
    flex-basis: auto;
    width: 100%;
    max-width: 16rem;
    align-self: flex-start;
  }

  .melange-entry__date--media {
    text-align: left;
    width: auto;
    align-self: stretch;
    white-space: normal;
  }

  .melange-entry__thumb {
    flex-basis: auto;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    max-height: min(11rem, 45vw);
  }
}

/* —— Móvil: refuerzo global (toques, medios, laboratorio, poemas) —— */
@media (max-width: 768px) {
  main img,
  main video,
  main iframe {
    max-width: 100%;
  }

  #art {
    max-width: 100%;
    height: auto !important;
    min-height: 200px;
  }

  .back-button a {
    padding: 0.65rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .poem-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.85rem;
    align-items: stretch;
    justify-content: flex-start;
  }

  .poem-nav a {
    flex: none;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
  }

  .poem-nav a:hover,
  .poem-nav a:focus-visible {
    color: #9ec8ff;
    background: rgba(255, 255, 255, 0.06);
  }

  .lab {
    margin-left: 0;
    margin-right: 0;
  }

  .lab-toolbar {
    display: flex;
    justify-content: center;
  }

  .lab-specimen {
    padding: 0.75rem 0.85rem 0.9rem;
  }

  .lab-specimen-meta {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }

  .lab-kind {
    flex-shrink: 0;
  }

  .lab-num {
    max-width: 100%;
    text-align: left;
    flex: 1 1 100%;
  }

  .lab-shuffle {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    touch-action: manipulation;
  }

  .lab-text {
    overflow-wrap: anywhere;
  }

  .poem-body {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }
}

@media (max-width: 480px) {
  /* h1 ya escala via --fs-2 (clamp(1.85rem, 4.5vw, 2.4rem)); ningún override necesario. */

  .init a {
    font-size: clamp(1rem, 4.5vw, 1.35rem);
  }
}