@charset "UTF-8";
/* ==========================================================================
   EDERA — Hoja de estilos.

   Criterio: sobriedad editorial. Sin sombras, sin degradados, sin bordes
   redondeados en la interfaz. La jerarquia se construye con tipografia,
   filetes de un pixel y aire. Lo unico saturado de la pagina son las muestras
   de color; todo lo demas vive entre el crema, la tinta y el gris.

   Movil primero: los unicos breakpoints suben, nunca bajan.
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFIA AUTOALOJADA

   Outfit para titulares y texto, IBM Plex Mono para codigos y datos. Las dos
   son OFL y se sirven desde este dominio: ni una peticion a un tercero en
   todo el sitio.

   Outfit es variable, asi que un fichero cubre de 300 a 700 y pesa 31 KB.
   font-display: swap para que el texto se lea desde el primer fotograma.

   Es una geometrica: las contraformas son casi circulares y la altura de la x
   es menor que en una grotesca. Eso obliga a dos ajustes que estan mas abajo:
   el texto corrido va un punto mas grande de lo que iria en Inter, y los
   titulares llevan el tracking algo mas cerrado, porque una geometrica a
   cuerpo grande se desarma sola.

   Cambiar de familia es cambiar --titulo y --texto y volver a lanzar
   herramientas/fuentes.py con otra URL.
   ========================================================================== */



/* La familia la trae el armazon en --display y --texto. Aqui solo se le pone
   el nombre que usa esta hoja; --texto ya viene puesto y no se redefine, que
   apuntarse a si mismo es un ciclo y deja la variable invalida. */
:root {
  --titulo: var(--display);
}

body { font-family: var(--texto); }

h1, h2, h3,
.obra__titulo, .portada__titulo, .hero__titulo,
.plancha-item__titulo, .obra-item__titulo {
  font-family: var(--titulo);
  font-weight: 500;
  /* Mas cerrado que con una grotesca: en una geometrica las contraformas ya
     son anchas y el tracking suelto separa demasiado a cuerpo grande. */
  letter-spacing: -0.024em;
}

/* Los titulares grandes van mas ligeros: a ese cuerpo, el peso medio pesa
   demasiado y rompe la sobriedad. */
.obra__titulo, .portada__titulo, .hero__titulo { font-weight: 400; }

/* ==========================================================================
   EL VISOR

   Izquierda el cuadro, derecha el color. Cuatro modos de ventana.
   ========================================================================== */

.visor { margin-bottom: 3.5rem; }

.visor__paneles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 62rem) {
  /* El cuadro manda; el panel es una columna fija que no se estira. */
  .visor__paneles { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; }
}

/* --- Selector de modo ----------------------------------------------------- */

.modos {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 1rem;
  padding: 3px;
  width: fit-content;
  border: 1px solid var(--vidrio-borde);
  border-radius: 999px;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
          backdrop-filter: var(--desenfoque);
}

.modo {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gris);
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.modo:hover { color: var(--yedra); }
.modo--activo {
  background: linear-gradient(160deg,
    rgba(114, 158, 126, 0.9) 0%, rgba(55, 86, 71, 0.94) 100%);
  color: #F2F6F1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* --- El cuadro ------------------------------------------------------------ */

.lienzo { margin: 0; }

.lienzo__marco {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--hueco);
  /* Quita el retardo del doble toque: aqui el segundo toque cuenta. */
  touch-action: manipulation;
}

.lienzo__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ventanas { position: absolute; inset: 0; }

.ventana {
  position: absolute;
  display: block;
  cursor: pointer;
  /* El z-index sube al activarse para que su borde no quede por debajo del de
     una ventana vecina que se solape. */
  z-index: 1;
}
.ventana--activa { z-index: 2; }

.ventana__relleno {
  position: absolute;
  inset: 0;
  transition: opacity 0.18s ease;
}

/* El borde va por partida doble: uno claro y otro oscuro, uno dentro del otro.
   Asi se ve tanto sobre un cielo como sobre una sombra, que es el problema de
   dibujar encima de una pintura. */
.ventana__borde {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1.5px rgba(16, 19, 17, 0.45);
  opacity: 0.5;
  transform: scale(0.97);
  transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.ventana__codigo {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 4px);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #F2F6F1;
  background: rgba(16, 19, 17, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.ventana--activa .ventana__borde,
.ventana:focus-visible .ventana__borde {
  opacity: 1;
  transform: none;
  border-color: #fff;
  box-shadow: inset 0 0 0 2px var(--yedra), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.ventana--activa .ventana__codigo { opacity: 1; }
.ventana:focus { outline: none; }

/* Modo plano y degradado: el relleno tapa el cuadro. */
.visor--recorte .ventana__relleno { opacity: 0; }
.visor--plano .ventana__relleno,
.visor--degradado .ventana__relleno { opacity: 1; }
.visor--plano .ventana__borde,
.visor--degradado .ventana__borde { opacity: 0.85; transform: none; }

/* --- El mosaico ----------------------------------------------------------- */

.mosaico {
  position: absolute;
  inset: 0;
  display: grid;
  /* Sin hueco entre celdas: es la obra rehecha, no una cuadricula. */
  gap: 0;
  z-index: 3;
}
.mosaico[hidden] { display: none; }

.mosaico__celda {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: outline-color 0.12s ease;
  outline: 0 solid transparent;
}
/* Al senalar un color se encienden TODAS sus celdas a la vez: se ve de un
   golpe por donde anda ese color en la obra. Es lo que hace util el modo. */
.mosaico__celda--activa {
  outline: 1.5px solid #fff;
  outline-offset: -1.5px;
  z-index: 1;
  position: relative;
}

/* En rejilla, las ventanas estorban. */
.visor--rejilla .ventanas { pointer-events: none; opacity: 0; }

.lienzo__pie {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--gris);
}
.lienzo__aviso { color: var(--tinta); }

/* --- El panel de la derecha ---------------------------------------------- */

.panel {
  position: sticky;
  /* Debajo de la barra superior, que tambien es pegajosa. */
  top: 5rem;
  padding: 1rem;
  border: 1px solid var(--vidrio-borde);
  border-radius: 14px;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
          backdrop-filter: var(--desenfoque);
}

/* Las tres lecturas del mismo color, una al lado de otra: el recorte del
   cuadro, el color puro y su degradado. */
.panel__lecturas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.lectura { margin: 0; }
.lectura__caja {
  display: block;
  /* Marca de la casa: tambien aqui, aureo. */
  aspect-ratio: var(--muestra);
  border: 1px solid var(--filete-suave);
  background-repeat: no-repeat;
}
.lectura figcaption {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.panel__codigo {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.15rem;
}
.panel__nombre {
  font-size: 0.8rem;
  color: var(--gris);
  margin: 0 0 0.8rem;
}
.panel__datos { margin-bottom: 0.8rem; }
.panel__enlace { margin: 0; font-size: 0.8rem; }
.panel__enlace a { color: var(--yedra); }

/* --- Movil ---------------------------------------------------------------- */

@media (max-width: 61.99rem) {
  /* El panel deja de ser pegajoso: en una columna sola estorbaria. */
  .panel { position: static; }
}

@media (max-width: 47.99rem) {
  .modos { width: 100%; justify-content: space-between; }
  .modo { flex: 1 1 0; text-align: center; padding: 0.5rem 0.4rem; min-height: 44px; }
  .panel__lecturas { gap: 0.4rem; }
  .ventana__codigo { font-size: 0.58rem; }
}

/* --- Fila de las dieciseis ---------------------------------------------- */

.tira-obra {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  margin-top: 0.75rem;
}

.tira-obra__muestra {
  position: relative;
  display: block;
  aspect-ratio: var(--muestra);   /* aureo, como en el libro */
  border: 1px solid var(--filete-suave);
  transition: transform 0.14s ease, outline-color 0.14s ease;
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.tira-obra__muestra--activa {
  outline-color: var(--tinta);
  transform: translateY(-3px);
  z-index: 1;
}

.tira-obra__codigo {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--gris);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
  white-space: nowrap;
}
.tira-obra__muestra--activa .tira-obra__codigo { opacity: 1; }

.lienzo__pie {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--gris);
}
.lienzo__aviso { color: var(--tinta); }

/* ==========================================================================
   EL LIBRO
   ========================================================================== */

.libro {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--filete);
}

.libro__cubierta {
  flex: 0 0 auto;
  width: 7.5rem;
  /* Proporcion de tomo, no aurea: es un libro, no una muestra. */
  aspect-ratio: 1 / 1.4;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  border: 1px solid var(--filete);
  overflow: hidden;
  background: var(--crema);
}
.libro__cubierta img { width: 100%; height: 100%; object-fit: cover; grid-row: 1 / -1; }
/* Sin cubierta real se compone una con la propia paleta del tomo. Es honesto:
   no finge ser una portada, es lo que hay dentro. */
.libro__banda { display: block; }

.libro__texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.libro__serie {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}
.libro__titulo { font-family: var(--titulo); font-size: 1.25rem; font-weight: 500; }
.libro__nota { font-size: 0.85rem; color: var(--gris); max-width: 42ch; }

/* La linea de compra se lee como un credito, no como un anuncio: cuerpo
   pequeno, gris de apoyo, sin fondo ni color de rebajas. */
.libro__compra {
  font-size: 0.75rem;
  color: var(--gris);
  margin-top: 0.35rem;
}
.libro__compra a { text-decoration: underline; text-underline-offset: 0.16em; }
.libro__compra a:hover { color: var(--tinta); }

@media (max-width: 40rem) {
  .libro { gap: 1rem; }
  .libro__cubierta { width: 5.5rem; }
}

/* ==========================================================================
   REGION DE COLOR (prefijo de localizador)
   ========================================================================== */

.region-nota {
  font-size: 0.87rem;
  color: var(--gris);
  max-width: 62ch;
  margin-bottom: 1.5rem;
}
.region-nota code {
  color: var(--tinta);
  background: var(--hueco);
  padding: 0 0.3em;
}

/* La paleta la trae el armazon (public/css/chrome.css). Aqui solo se le
   ponen los nombres que usa esta hoja: los usan cientos de reglas y
   renombrarlos no habria cambiado ni un pixel. */
:root {
  --crema: var(--hueso);
  --tinta: var(--gordons);
  --gris:  var(--picholine);

  /* EDERA es yedra, y la yedra es verde. El verde no invade la interfaz —el
     color del catalogo sigue siendo lo unico saturado de la pantalla— pero es
     el acento de la casa: sale en lo que se pulsa y en lo que esta activo.
     Es verde azulado y bajo de croma a proposito: un verde saturado al lado
     de las muestras compite con ellas, que es justo lo que no puede pasar. */
  --yedra:       var(--gordons);
  --yedra-media: var(--picholine);
  --yedra-clara: var(--moncur);

  /* Derivados, siempre la tinta con transparencia, para que no aparezcan
     colores nuevos que no esten en la paleta. */
  --filete:       rgba(var(--tinta-rgb), 0.16);
  --filete-suave: rgba(var(--tinta-rgb), 0.08);
  --hueco:        rgba(var(--tinta-rgb), 0.045);
  /* Superficie de cristal: es el material de la interfaz. Se define una vez
     para que todas las piezas translucidas sean la misma cosa. */
  --vidrio:        rgba(255, 255, 255, 0.55);
  --vidrio-fuerte: rgba(255, 255, 255, 0.72);
  --vidrio-borde:  rgba(255, 255, 255, 0.6);
  --desenfoque:    blur(16px) saturate(1.1);

  /* --serif se conserva porque lo usan reglas de todo el sitio, pero ya no es
     una serif: apunta a la misma Outfit autoalojada que --texto. Renombrarlo
     seria tocar cuarenta reglas para no ganar nada. */
  --serif: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --aureo: 1.618;
  /* Marca de la casa. Toda muestra de color del catalogo se ensena en un
     rectangulo aureo APAISADO y con las esquinas vivas: ni cuadrados, ni alto
     fijo, ni un solo redondeo. Se declara aqui para que cambiar la
     orientacion sea una linea y no cuarenta.
     Las piezas de interfaz (el campo de busqueda, los modos, el panel) si
     llevan redondeo: son cromo, no muestras. */
  --muestra: var(--aureo) / 1;

  /* Espacio que ocupa todo lo que va por encima del hero: la barra del sitio
     (4,5rem), la de seccion (3rem) y su margen (2rem). De esto depende que el
     campo de busqueda caiga en el centro exacto de la pantalla: ver .hero.
     Medido, no estimado. */
  --tope: 9.5rem;

  /* --paso y --ancho los pone el armazon: las dos aplicaciones tienen que
     tener la misma caja o la barra no cuadraria con el contenido. */
}

/* --- Reinicio corto ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Se evita el ajuste automatico de tamano de letra de iOS al girar. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--serif);
  /* Un punto por encima del rem: Outfit tiene la altura de x mas baja que una
     grotesca y a 16 px se lee pequena. */
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0; }
p { margin: 0 0 0.75em; }
ul { list-style: none; margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }

img, svg { max-width: 100%; }

code { font-family: var(--mono); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--picholine);
  outline-offset: 3px;
}

/* --- Barra de seccion ----------------------------------------------------
   La barra del SITIO es la de EDERA y viene del armazon. Esta otra es la del
   atlas: sus cuatro vistas. Va debajo, con menos peso y sin pegarse arriba,
   para que se lea como lo que es —navegacion de una seccion— y no como una
   segunda barra de sitio compitiendo con la primera. */

.subnav {
  border-bottom: 1px solid var(--filete);
  margin-bottom: 2rem;
  transition: margin var(--tiempo, 200ms) ease;
  font-size: 0.85rem;
}

/* Buscando, la barra de seccion se aprieta: el campo tiene que quedar arriba
   del todo, igual que en la portada. */
body.buscando .subnav { margin-bottom: 0.5rem; }

.subnav__fila {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-height: 3rem;
  /* Si no caben, se deslizan: partirlos en dos lineas dejaba la barra con el
     doble de alto y el rotulo flotando en medio. */
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__fila::-webkit-scrollbar { display: none; }

/* El rotulo de la seccion. En negrita y con el tracking justo: a este cuerpo,
   mucho tracking lo desarma y poco lo apelmaza. */
.subnav__marca {
  font-family: var(--titulo);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
  flex: 0 0 auto;
  /* Un filete lo separa de sus vistas: es de otra jerarquia. */
  padding-right: 1.5rem;
  border-right: 1px solid var(--filete);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.subnav__marca:hover, .subnav__marca:focus-visible { text-decoration: none; }

.subnav__enlaces {
  display: flex;
  gap: 0 1.4rem;
  color: var(--gris);
}
.subnav__enlaces a {
  position: relative;
  white-space: nowrap;
  padding: 0.15rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.18s ease;
}
.subnav__enlaces a:hover, .subnav__enlaces a:focus-visible {
  color: var(--tinta);
  text-decoration: none;
}
/* El mismo subrayado que crece que en la barra del sitio. */
.subnav__enlaces a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1.5px;
  background: var(--upnorth);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.22, 0.72, 0.24, 1);
}
.subnav__enlaces a:hover::after,
.subnav__enlaces a:focus-visible::after { transform: scaleX(1); }

/* La procedencia de las obras, al final del pie del sello. */
.pie__legal {
  border-top: 1px solid rgba(var(--papel-rgb), 0.15);
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--moncur);
}

/* Aviso de datos de muestra. Deliberadamente feo: tiene que molestar. */
.aviso-muestra {
  border-bottom: 1px solid var(--tinta);
  border-top: 1px solid var(--tinta);
  padding: 0.7rem 0;
  margin: -2rem 0 2rem;
  font-size: 0.83rem;
  line-height: 1.45;
}
.aviso-muestra code { background: var(--hueco); padding: 0 0.25em; }

/* --- Encabezados de pagina ---------------------------------------------- */

.obra { margin-bottom: 2rem; }

.obra__plancha {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.5rem;
}
.obra__codigo { color: var(--tinta); }

.obra__titulo {
  font-size: clamp(1.75rem, 6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin-bottom: 0.35rem;
}
.obra__titulo--codigo {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
}

.obra__autoria { color: var(--gris); font-size: 0.95rem; }

.portada__titulo {
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}
.portada__entrada {
  max-width: 46ch;
  color: var(--gris);
  font-size: 1rem;
}
.portada__entrada code {
  color: var(--tinta);
  background: var(--hueco);
  padding: 0 0.3em;
}

/* --- Ficha tecnica ------------------------------------------------------- */

.ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 2.5rem;
  border-top: 1px solid var(--filete);
}
.ficha__par {
  display: flex;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--filete-suave);
}
.ficha dt {
  flex: 0 0 8rem;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.2em;
}
.ficha dd { margin: 0; flex: 1; }

@media (min-width: 48rem) {
  .ficha { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* --- Secciones ----------------------------------------------------------- */

.seccion { margin: 0 0 3rem; }

.seccion__titulo {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--filete);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.seccion__titulo a { color: inherit; }
.seccion__codigo { font-family: var(--mono); }

.seccion__nota {
  color: var(--gris);
  font-size: 0.87rem;
  max-width: 60ch;
  margin-top: -0.6rem;
  margin-bottom: 1.25rem;
}

.pastilla {
  display: inline-block;
  width: 0.72em;
  aspect-ratio: var(--muestra);
  vertical-align: -0.24em;
  border: 1px solid var(--filete);
}

/* --- Rejilla de color ---------------------------------------------------- */

.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

/* En movil dos columnas ya caben si las muestras son verticales. */
@media (min-width: 30rem) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.rejilla--compacta { gap: 1.5rem 1rem; }
@media (min-width: 30rem) { .rejilla--compacta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .rejilla--compacta { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .rejilla--compacta { grid-template-columns: repeat(6, 1fr); } }

.celda { display: flex; flex-direction: column; }

/* La muestra es el rectangulo aureo: 1 de ancho por 1,618 de alto. */
.celda__muestra {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--muestra);
  border: 1px solid var(--filete-suave);
  margin-bottom: 0.6rem;
}
.celda__muestra:hover, .celda__muestra:focus-visible { text-decoration: none; }

.celda__codigo {
  position: absolute;
  left: 0.6rem; bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.celda__muestra--claro .celda__codigo { color: rgba(255, 255, 255, 0.92); }
.celda__muestra--oscuro .celda__codigo { color: rgba(0, 0, 0, 0.7); }

.celda__cuerpo { flex: 1; display: flex; flex-direction: column; }

.celda__registro {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--filete-suave);
}
.celda__rol {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--gris);
  text-transform: uppercase;
}

.celda__extra {
  font-size: 0.75rem;
  color: var(--gris);
  line-height: 1.5;
  margin: 0.6rem 0 0;
}
.celda__extra a { color: var(--tinta); }

.celda__enlace {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
}

/* --- Valores con boton de copiar ---------------------------------------- */

.valores { display: flex; flex-direction: column; }

.valor {
  display: grid;
  /* 4.2rem y no 3.2: la etiqueta mas larga ("Coverage") pide 64 px y en el
     panel del visor se salia por encima del dato. */
  grid-template-columns: 4.2rem 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--filete-suave);
  font-size: 0.78rem;
}

.valor__etiqueta {
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
}

.valor__dato {
  font-family: var(--mono);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* El boton solo se insinua: aparece al pasar por encima o al enfocar. */
.valor__copiar {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gris);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s linear;
}
.valor:hover .valor__copiar,
.valor__copiar:focus-visible { opacity: 1; }
.valor__copiar:hover { color: var(--tinta); }
.valor__copiar[data-copiado="si"] { opacity: 1; color: var(--tinta); }

/* En tactil no hay hover: el boton se ve siempre. */
@media (hover: none) {
  .valor__copiar { opacity: 1; }
}

.valores--amplio .valor { grid-template-columns: 7rem 1fr auto; padding: 0.45rem 0; }
.valores--amplio .valor__dato { font-size: 0.8rem; }

/* --- Ficha de color ------------------------------------------------------ */

.migas {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gris);
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.migas a { color: var(--gris); }
.migas a:hover { color: var(--tinta); }
.migas [aria-current] { color: var(--tinta); }

.color-ficha__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-bottom: 3rem;
}

@media (min-width: 48rem) {
  .color-ficha__cuerpo {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.color-ficha__muestra {
  position: relative;
  width: 100%;
  aspect-ratio: var(--muestra);
  border: 1px solid var(--filete-suave);
}

.color-ficha__hex {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
.color-ficha__muestra--claro .color-ficha__hex { color: rgba(255, 255, 255, 0.93); }
.color-ficha__muestra--oscuro .color-ficha__hex { color: rgba(0, 0, 0, 0.72); }

.obra-origen { font-size: 0.95rem; }

/* --- Tiras de muestras --------------------------------------------------- */

.registros { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .registros { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; } }

.registro__titulo {
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.5rem;
}
.registro__titulo a { color: inherit; }

.registro__tira { display: flex; gap: 3px; }

.tira__muestra {
  flex: 1 1 0;
  /* Alto derivado del ancho, no fijo: asi cada muestra sigue siendo aurea
     independientemente de cuantas quepan en la fila. */
  aspect-ratio: var(--muestra);
  border: 1px solid var(--filete-suave);
  min-width: 0;
}
.tira__muestra--actual { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* --- Mapa de extraccion -------------------------------------------------- */

.mapa {
  width: 100%;
  max-width: 34rem;
  height: auto;
  display: block;
}

/* --- Descargas ----------------------------------------------------------- */

.descargas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
}

.descarga {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--crema);
  padding: 0.7rem 0.85rem;
  height: 100%;
}
.descarga:hover, .descarga:focus-visible {
  background: var(--tinta);
  color: var(--crema);
  text-decoration: none;
}
.descarga:hover .descarga__nombre, .descarga:focus-visible .descarga__nombre { color: var(--crema); }

.descarga__ext {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.descarga__nombre { font-size: 0.76rem; color: var(--gris); }

/* --- Listados ------------------------------------------------------------ */

.lista-planchas { display: grid; gap: 1px; background: var(--filete); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }

.plancha-item__enlace {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--crema);
  padding: 1rem 0;
}
.plancha-item__enlace:hover, .plancha-item__enlace:focus-visible { text-decoration: none; }
.plancha-item__enlace:hover .plancha-item__titulo { text-decoration: underline; text-underline-offset: 0.18em; }

@media (min-width: 40rem) {
  .plancha-item__enlace { flex-direction: row; align-items: center; gap: 1.5rem; }
  .plancha-item__tira { flex: 0 0 22rem; }
}

.plancha-item__tira { display: flex; gap: 2px; }
.plancha-item__banda {
  flex: 1 1 0;
  aspect-ratio: var(--muestra);
  min-width: 0;
  border: 1px solid var(--filete-suave);
}

.plancha-item__texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.plancha-item__codigo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gris);
}
.plancha-item__titulo { font-size: 1.1rem; }
.plancha-item__meta { font-size: 0.8rem; color: var(--gris); }

.lista-cercanos { display: grid; gap: 1px; background: var(--filete); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }

.lista-cercanos--rejilla { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .lista-cercanos--rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .lista-cercanos--rejilla { grid-template-columns: repeat(3, 1fr); } }

.cercano {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.85rem;
  background: var(--crema);
  padding: 0.6rem 0.5rem 0.6rem 0;
  height: 100%;
}
.cercano:hover, .cercano:focus-visible { text-decoration: none; background: var(--hueco); }

.cercano__muestra {
  width: 2.6rem;
  aspect-ratio: var(--muestra);
  border: 1px solid var(--filete-suave);
}
.cercano__codigo { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; }
.cercano__obra { font-size: 0.78rem; color: var(--gris); grid-column: 2; }
.cercano__delta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gris);
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  white-space: nowrap;
}

.lista-sugerencias { display: grid; gap: 1px; background: var(--filete); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
.lista-sugerencias a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  background: var(--crema);
  padding: 0.7rem 0;
}
.lista-sugerencias a:hover { background: var(--hueco); text-decoration: none; }
.sugerencia__codigo { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; }
.sugerencia__nota { font-size: 0.8rem; color: var(--gris); }

/* --- Navegacion por fichas ---------------------------------------------- */

.fichas-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media (min-width: 40rem) { .fichas-nav { grid-template-columns: repeat(4, 1fr); } }

.fichas-nav--sectores { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 40rem) { .fichas-nav--sectores { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 62rem) { .fichas-nav--sectores { grid-template-columns: repeat(12, 1fr); } }

.fichas-nav--linea { margin-bottom: 2.5rem; }

.ficha-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--crema);
  padding: 0.75rem 0.7rem;
  height: 100%;
}
.ficha-nav:hover, .ficha-nav:focus-visible { background: var(--tinta); color: var(--crema); text-decoration: none; }
.ficha-nav:hover .ficha-nav__cuenta, .ficha-nav:hover .ficha-nav__rango { color: var(--crema); }
.ficha-nav--actual { background: var(--yedra); color: #F2F6F1; }
.ficha-nav--actual .ficha-nav__cuenta { color: var(--crema); }
.ficha-nav--vacia { color: var(--gris); }

.ficha-nav__nombre { font-size: 0.85rem; }
.ficha-nav--sectores .ficha-nav__nombre, .fichas-nav--sectores .ficha-nav__nombre { font-family: var(--mono); }
.ficha-nav__rango { font-family: var(--mono); font-size: 0.6rem; color: var(--gris); }
.ficha-nav__cuenta { font-family: var(--mono); font-size: 0.68rem; color: var(--gris); }

.tira-sectores {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
  margin-bottom: 2.5rem;
}
@media (min-width: 40rem) { .tira-sectores { grid-template-columns: repeat(12, 1fr); } }

.tira-sectores__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: var(--crema);
  padding: 0.55rem 0.2rem;
  font-family: var(--mono);
}
.tira-sectores__item:hover { background: var(--tinta); color: var(--crema); text-decoration: none; }
.tira-sectores__item:hover .tira-sectores__cuenta { color: var(--crema); }
.tira-sectores__item--actual { background: var(--yedra); color: #F2F6F1; }
.tira-sectores__item--actual .tira-sectores__cuenta { color: var(--crema); }
.tira-sectores__item--vacio { color: var(--gris); }
.tira-sectores__letra { font-size: 0.8rem; letter-spacing: 0.06em; }
.tira-sectores__cuenta { font-size: 0.6rem; color: var(--gris); }

.enlaces-sueltos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.88rem; }

/* --- Buscador ------------------------------------------------------------ */

.portada { margin-bottom: 3rem; }

.buscador {
  display: flex;
  gap: 0;
  margin: 1.5rem 0 0;
  max-width: 34rem;
  border: 1px solid var(--tinta);
}

.buscador input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--mono);
  /* 16px exactos: por debajo, iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  padding: 0.7rem 0.85rem;
}
.buscador input::placeholder { color: var(--gris); }
.buscador input:focus { outline: 0; }
.buscador:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; }

.buscador button {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 1.1rem;
  cursor: pointer;
}
.buscador button:hover { background: var(--crema); color: var(--tinta); }

/* --- Comparador ---------------------------------------------------------- */

.comparar-form, .comparar-rapido {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 2.5rem;
}

.comparar-form__campo { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 15rem; }
.comparar-form__campo label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.comparar-form select, .comparar-rapido select {
  appearance: none;
  border: 1px solid var(--tinta);
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 16px;
  padding: 0.6rem 0.7rem;
  width: 100%;
  border-radius: 0;
}
.comparar-rapido select { flex: 1 1 15rem; }

.comparar-form button, .comparar-rapido button {
  appearance: none;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
}
.comparar-form button:hover, .comparar-rapido button:hover { background: var(--crema); color: var(--tinta); }

.comparar-cabecera {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--filete);
}
@media (min-width: 40rem) { .comparar-cabecera { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.comparar-cabecera h2 { font-size: 1.3rem; }

.tabla-comparar { width: 100%; border-collapse: collapse; }
.tabla-comparar th {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 400;
  text-align: left;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--filete);
}
.tabla-comparar td { padding: 0.5rem 0; border-bottom: 1px solid var(--filete-suave); vertical-align: middle; }
.tabla-comparar .col-delta { text-align: center; width: 8rem; }
.tabla-comparar .col-lado { width: calc((100% - 8rem) / 2); }

.par { display: flex; align-items: center; gap: 0.6rem; }
.par:hover, .par:focus-visible { text-decoration: none; }
.par:hover .par__codigo { text-decoration: underline; text-underline-offset: 0.18em; }
.par__muestra { flex: 0 0 auto; width: 2rem; aspect-ratio: var(--muestra); border: 1px solid var(--filete-suave); }
.par__texto { display: flex; flex-direction: column; min-width: 0; }
.par__codigo { font-family: var(--mono); font-size: 0.74rem; }
.par__hex { font-family: var(--mono); font-size: 0.66rem; color: var(--gris); }
.par--vacio { color: var(--gris); font-family: var(--mono); }

.delta { display: block; font-family: var(--mono); font-size: 0.9rem; }
.delta__nota { display: block; font-size: 0.62rem; color: var(--gris); line-height: 1.3; }
.delta--vacio { color: var(--gris); }

/* En movil la tabla se estrecha mucho: se reduce la columna del delta. */
@media (max-width: 34rem) {
  .tabla-comparar .col-delta { width: 4.5rem; }
  .tabla-comparar .col-lado { width: calc((100% - 4.5rem) / 2); }
  .delta__nota { display: none; }
  .par { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .par__muestra { width: 100%; aspect-ratio: 1.618 / 1; }
}

/* El buscador (escena, hero, campo y pistas) vive ahora en el armazon
   compartido: public/css/chrome.css. Es el mismo componente en la portada del
   sello y aqui, y tenerlo escrito dos veces era garantizar que divergiera. */

/* --- Resultados ------------------------------------------------------- */

.resultados { margin-bottom: 3rem; }

.resultados__cabecera {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  text-align: center;
  min-height: 1.2em;
  margin-bottom: 1.5rem;
}

.resultados__vacio {
  text-align: center;
  color: var(--gris);
  font-size: 0.92rem;
  max-width: 40ch;
  margin: 2rem auto;
}



/* --- Bloque de exploracion -------------------------------------------- */

.explorar {
  transition: opacity 0.4s ease;
  padding-top: 1rem;
}
/* Mientras se busca, el indice se aparta. Se colapsa en vez de ocultarse con
   display:none para que el navegador no pierda el sitio del scroll al vaciar
   el campo. */
body.buscando .explorar {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  padding: 0;
}

/* --- Al llegar con ?q= en la URL -------------------------------------- */
/* La pagina entra ya en estado de busqueda: animar al cargar seria un salto
   gratuito que nadie ha pedido. */

body.sin-animacion .hero,
body.sin-animacion .hero__arriba,
body.sin-animacion .hero__titulo,
body.sin-animacion .hero__entrada,
body.sin-animacion .hero__pistas,
body.sin-animacion .explorar,
body.sin-animacion .escena__campo { transition: none !important; }

/* --- Movil ------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  /* En movil: barra del sitio (3,5rem) mas barra de seccion (3rem) mas su
     margen (2rem). */
  :root { --tope: 8.5rem; }
  .rejilla-color { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .obra-item { gap: 0.75rem; padding: 0.6rem; }
  .obra-item__tira { flex: 0 0 5.5rem; }

  .pista { min-height: 44px; display: inline-flex; align-items: center; }
  .campo { padding-left: 0.9rem; }
  /* El propio campo de texto tambien es un objetivo tactil. */
  .campo input { min-height: 44px; }
}

/* ==========================================================================
   MOVIL

   La ficha de plancha es la pagina que se abre al escanear el QR del libro,
   asi que el movil no es un caso degradado: es EL caso. Tres problemas reales,
   medidos con pruebas/movil.py sobre emulacion de dispositivo:

   1. La ficha medía unas 21 pantallas de alto. Con la muestra a ancho completo
      en vertical, cada color ocupaba 631 px y habia que recorrer media obra
      para llegar al octavo. En movil la muestra pasa a APAISADA: sigue siendo
      un rectangulo aureo (1:1,618, la proporcion no depende de la
      orientacion), pero baja de 631 a 241 px y la pagina se queda en la mitad.
   2. Los botones de copiar median 34x16 px. En una pagina cuya razon de ser es
      copiar valores, con el movil en una mano y el libro en la otra. Todos los
      objetivos tactiles pasan a 44 px, que es el minimo de la WCAG 2.5.8.
   3. Habia texto a 9,6 px. Nada baja de 12.

   No hay desborde horizontal en 320, 375, 390 ni 412 px: eso ya estaba bien.
   ========================================================================== */

@media (max-width: 47.99rem) {

  /* --- 1. Objetivos tactiles de 44 px --------------------------------- */



  .valor {
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }
  /* En tactil no hay hover que revele el boton: se ve siempre y se le da
     un area de pulsacion de 44 px sin engordar el texto. */
  .valor__copiar {
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 54px;
    padding: 0 0.35rem;
  }

  .descarga,
  .lista-sugerencias a { min-height: 44px; align-items: center; }
  .cercano { min-height: 56px; }
  .ficha-nav,
  .tira-sectores__item { min-height: 54px; justify-content: center; }

  .buscador input,
  .buscador button,
  .comparar-form select,
  .comparar-rapido select,
  .comparar-form button,
  .comparar-rapido button { min-height: 44px; }

  /* Los enlaces sueltos dentro de un parrafo (la letra del sector, por
     ejemplo) median 8 px de ancho. Se les da area sin cambiar como se ven. */
  .celda__extra a,
  .enlaces-sueltos a,
  .migas a,
  .obra-origen a { display: inline-block; padding: 0.3rem 0.15rem; }

  /* --- 2. Nada de letra por debajo de 12 px ---------------------------- */

  .valor__etiqueta { font-size: 0.75rem; }
  .valor__dato     { font-size: 0.8rem; }
  .valor__copiar    { font-size: 0.75rem; }
  .ficha-nav__rango { font-size: 0.75rem; }
  .ficha dt,
  .marca__version,
  .celda__codigo,
  .celda__rol,
  .cercano__delta,
  .ficha-nav__cuenta,
  .tira-sectores__cuenta,
  .plancha-item__codigo { font-size: 0.75rem; }


  /* Enlaces que son una linea suelta dentro de una celda: median 14 px de
     alto. Se les da area de pulsacion sin cambiar la tipografia. */
  .seccion__titulo a,
  .registro__titulo a,
  .sugerencia__codigo { display: inline-block; padding: 0.45rem 0; }

  /* "Colour details" es la navegacion principal de la rejilla: 44 px enteros.
     Los demas enlaces de linea se quedan en 28-34 px a proposito. Llevarlos
     todos a 44 obligaria a separar los parrafos hasta deshacer el ritmo
     editorial, y la propia WCAG 2.5.8 exceptua los enlaces dentro de un texto
     corrido. Aqui se agranda lo que es un boton, no lo que es una frase. */
  .celda__enlace a,
  .obra-origen a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .obra__plancha,
  .obra__codigo,
  .descarga__ext,
  .seccion__titulo { font-size: 0.75rem; }

  /* --- Comparador ------------------------------------------------------ */
  /* Es la vista mas apretada: dos columnas de color y el delta en medio, en
     390 px. Se agranda la tipografia al minimo legible y se da altura a las
     filas para que cada pareja sea pulsable. */
  .tabla-comparar th { font-size: 0.75rem; }
  .par__codigo { font-size: 0.78rem; }
  .par__hex    { font-size: 0.75rem; }
  .delta__nota { font-size: 0.75rem; }
  .par { min-height: 44px; justify-content: center; }
  .comparar-form__campo label { font-size: 0.75rem; }
  .comparar-cabecera h2 a { display: inline-block; padding: 0.3rem 0; }

  /* --- 3. La muestra, apaisada ---------------------------------------- */

  .celda__muestra { aspect-ratio: 1.618 / 1; }

  /* En la ficha de un color suelto la muestra SI se queda vertical: ahi el
     color es el asunto de la pagina, no un elemento de una lista. */
}

/* --- Tira de salto rapido -------------------------------------------- */
/* Ocho muestras pegadas bajo la cabecera que llevan a cada color. En una
   pagina de varias pantallas es la diferencia entre encontrar un color y
   rendirse. Es color puro, no cromo: encaja con el criterio del libro. */

.salto-color { display: none; }

@media (max-width: 47.99rem) {
  .salto-color {
    display: flex;
    gap: 2px;
    position: sticky;
    /* Debajo de la cabecera, que ahora tambien es pegajosa. */
    top: 3.6rem;
    z-index: 5;
    padding: 6px 0;
    background: rgba(236, 237, 236, 0.8);
    -webkit-backdrop-filter: var(--desenfoque);
            backdrop-filter: var(--desenfoque);
    border-bottom: 1px solid var(--filete);
    margin-bottom: 1.5rem;
  }
  .salto-color a {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    border: 1px solid var(--filete-suave);
  }
  /* Sin esto el ancla deja el titulo del color debajo de la tira pegajosa. */
  .celda { scroll-margin-top: 7.5rem; }
}

/* --- Pantallas con muesca -------------------------------------------- */
/* En horizontal, el recorte de la pantalla se comeria el margen lateral. */

/* El .contenedor y su muesca los pone el armazon. */

/* --- Impresion ----------------------------------------------------------- */

@media print {
  .topbar, .pie, .subnav, .buscador, .comparar-form,
  .comparar-rapido, .valor__copiar, .saltar { display: none; }
  body { background: #fff; }
  .celda__muestra, .color-ficha__muestra, .tira__muestra,
  .plancha-item__banda, .cercano__muestra, .par__muestra {
    /* Sin esto los navegadores omiten los fondos al imprimir, que es
       justo lo unico que importa de esta pagina. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* --- Preferencias del usuario ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}