/* Catálogo Virginia Frieyro · Obra 2001–2025
   El libro: tela ultramar con oro estampado, guardas amarillo ácido, papel blanco mate.
   Colores tomados de la obra: ultramar de «NY Marathon» (2003), amarillo de
   «When all the world is green» (2021), ocres del pan de oro de «Los Iluminados» (2008). */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* sala */
  --suelo: #dcdad5;
  --suelo-tinta: #1d1c1a;
  --suelo-tinta-2: #55534e;
  --suelo-linea: rgba(29, 28, 26, 0.18);
  /* libro */
  --tela: #2b3fa9;
  --tela-honda: #1a2774;
  --oro: #d6b262;
  --guarda: #d6d53c;
  --papel: #f7f6f2;
  --tinta: #1b1b1a;
  --tinta-2: #5a5955;
  --ultramar: #2b3fa9;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--suelo);
  color: var(--suelo-tinta);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow: hidden; }

::selection { background: var(--guarda); color: var(--tinta); }

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

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- sala */

.sala {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  /* la columna no crece con el libro: al estrechar la ventana, el libro se mide contra el hueco real, no contra sí mismo */
  grid-template-columns: minmax(0, 1fr);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.mesa {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
}

.atril {
  position: relative;
  transition: transform 0.9s var(--curva);
  will-change: transform;
}
.libro { position: relative; }
/* perspectiva larga para que la tapa dura, al girar, no se proyecte mucho más alta que el libro */
.libro .stf__block { perspective: var(--perspectiva, 2000px); }
/* la sombra que la tapa proyecta al levantarse: más suave y sin bordes duros arriba y abajo */
.libro .stf__hardShadow,
.libro .stf__hardInnerShadow {
  opacity: 0.5;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  mask-composite: intersect;
}

/* Las tapas: la tela asoma unos milímetros alrededor del bloque de páginas
   (las «cejas» de una encuadernación en cartoné) y proyecta la sombra sobre la peana */
.sombra-libro {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 2px;
  background: var(--tela) url("../img/texturas/tela.webp") 0 0 / 360px;
  background-blend-mode: soft-light;
  box-shadow:
    0 2px 3px rgba(20, 18, 14, 0.22),
    0 18px 38px -6px rgba(20, 18, 14, 0.32),
    0 50px 80px -30px rgba(20, 18, 14, 0.35);
  transition: left 0.5s var(--curva), top 0.5s var(--curva), width 0.5s var(--curva), height 0.5s var(--curva), background-color 0.5s ease;
  pointer-events: none;
}

/* Cantos del bloque de páginas: crecen a la izquierda a medida que se lee */
.cantos { position: absolute; inset: 0; pointer-events: none; }
.canto {
  position: absolute;
  top: 0;
  height: 0;
  width: 0;
  opacity: 0;
  transition: opacity 0.4s ease, width 0.6s var(--curva);
  background: #ebe9e3 url("../img/texturas/cantos.png") repeat-y left top / 100% 64px;
}
.canto.visible { opacity: 1; }
.canto-izq { border-radius: 2px 0 0 2px; box-shadow: -1px 1px 2px rgba(0,0,0,0.18); }
.canto-der { border-radius: 0 2px 2px 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.18); }

/* ---------------------------------------------------------------- barra */

.barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: min(100%, 980px);
  position: relative;
  z-index: 3;
  margin: 14px auto 0;
  padding-top: 10px;
  border-top: 1px solid var(--suelo-linea);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.barra-grupo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.barra-paso { justify-content: center; gap: 6px; }
.barra-fin { justify-content: flex-end; }

.boton {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 8px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.boton:hover { text-decoration-color: currentColor; }
.boton:disabled { color: var(--suelo-tinta-2); opacity: 0.45; cursor: default; text-decoration: none; }
.boton-icono { display: grid; place-items: center; width: 40px; height: 36px; padding: 0; }
.boton-icono svg { width: 20px; height: 12px; transition: transform 0.25s var(--curva); }
#b-anterior:not(:disabled):hover svg { transform: translateX(-3px); }
#b-siguiente:not(:disabled):hover svg { transform: translateX(3px); }
#b-pantalla svg { width: 15px; height: 15px; }
#b-pantalla:hover svg { transform: scale(1.12); }

.contador {
  min-width: 13ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--suelo-tinta);
  white-space: nowrap;
}

.selector { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.selector select {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 8px 18px 8px 2px;
  max-width: 34ch;
  text-overflow: ellipsis;
  cursor: pointer;
}
.selector select:hover { text-decoration: underline; text-underline-offset: 4px; }
.selector option { color: #1d1c1a; background: #f7f6f2; }
.selector-flecha { position: absolute; right: 2px; width: 10px; height: 6px; pointer-events: none; }

.pista {
  position: relative;
  z-index: 3;
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--suelo-tinta-2);
  transition: opacity 0.6s ease;
}
.pista.oculta { opacity: 0; }

/* ---------------------------------------------------------------- hojas */

.hoja { background: var(--papel); overflow: hidden; }
/* el fondo de la hoja asoma un píxel bajo la página escalada: que sea del mismo material */
.hoja.guarda { background: var(--guarda); }
.hoja.tapa, .hoja.contratapa, .hoja.contraguarda { background: var(--tela); }
.pg {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
  overflow: hidden;
  container-type: size;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
}

/* grano del papel */
.pg.papel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/texturas/papel.png");
  background-size: 256px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
}

/* el lomo: la página se hunde hacia el cosido */
.pg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13%;
  pointer-events: none;
  z-index: 4;
}
.hoja.izq .pg::after {
  right: 0;
  background: linear-gradient(to left, rgba(18, 16, 12, 0.2), rgba(18, 16, 12, 0.07) 22%, rgba(18, 16, 12, 0) 100%);
}
.hoja.der .pg::after {
  left: 0;
  background: linear-gradient(to right, rgba(18, 16, 12, 0.2), rgba(18, 16, 12, 0.07) 22%, rgba(18, 16, 12, 0) 100%);
}
.hoja.tapa .pg::after,
.libro.retrato .hoja .pg::after { width: 5%; }

.cabecera {
  position: absolute;
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  white-space: nowrap;
}
.folio {
  position: absolute;
  font-size: 10.6px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinta);
}

/* ---------------------------------------------------------------- láminas */

.lamina-img {
  position: absolute;
  display: block;
  background: #e8e6e0;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}
.lamina-img.cargada { background: none; }
.lamina-img.sangre { cursor: zoom-in; object-fit: cover; }

.pie {
  position: absolute;
  margin: 0;
  font-size: 12.2px;
  line-height: 1.38;
  color: var(--tinta-2);
  font-variant-numeric: lining-nums;
  hyphens: manual;
}
.pie-t {
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: 0.025em;
}
.pie-v { color: var(--tinta-2); }
.pie-n { font-style: italic; }
.ampliar {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0 0 5px;
  margin: 0;
  color: var(--tinta-2);
  cursor: zoom-in;
  vertical-align: -1px;
  line-height: 0;
}
.ampliar svg { width: 9px; height: 9px; }
.ampliar:hover { color: var(--ultramar); }

/* ---------------------------------------------------------------- textos */

.texto-cabeza { position: absolute; }
.texto-titulo {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--tinta);
  text-wrap: balance;
}
.texto-autor {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.texto-fecha { margin: 2px 0 0; font-size: 11px; color: var(--tinta-2); }

.cuerpo {
  position: absolute;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 13.2px;
  line-height: 20px;
  font-optical-sizing: auto;
  color: var(--tinta);
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-align: justify;
  font-variant-numeric: oldstyle-nums;
}
.cuerpo p { margin: 0; text-indent: 1.4em; }
.cuerpo p.primero,
.cuerpo p.sigue { text-indent: 0; }
.cuerpo p.partido { text-align-last: justify; }
.cuerpo p.primero::first-line { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------- portadillas de capítulo */

.cap-anios {
  position: absolute;
  margin: 0;
  font-weight: 250;
  font-stretch: 62%;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ultramar);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.cap-titulo {
  position: absolute;
  margin: 0;
  font-size: 30px;
  line-height: 1.04;
  font-weight: 620;
  font-stretch: 100%;
  letter-spacing: -0.018em;
  color: var(--tinta);
  text-wrap: balance;
}
.cap-sub {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta-2);
}
.cap-pie {
  position: absolute;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--tinta-2);
}

/* ---------------------------------------------------------------- tapa */

.hoja.tapa .pg,
.hoja.contratapa .pg {
  background-color: var(--tela);
  background-image:
    linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 18, 0.12) 100%),
    url("../img/texturas/tela.webp");
  background-size: 100% 100%, 360px;
  background-blend-mode: normal, soft-light;
  color: var(--oro);
}
/* la cajuela de la bisagra, junto al lomo */
.hoja.tapa .pg .bisagra,
.hoja.contratapa .pg .bisagra {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.2%;
  background: linear-gradient(90deg, rgba(0, 0, 20, 0.28), rgba(255, 255, 255, 0.07) 55%, rgba(0, 0, 20, 0.18));
  pointer-events: none;
}
.hoja.tapa .pg .bisagra { left: 2.6%; }
.hoja.contratapa .pg .bisagra { right: 2.6%; }

.oro {
  /* lámina de oro estampada en caliente: textura propia (img/texturas/oro.webp) recortada a las letras */
  background: var(--oro) url("../img/texturas/oro.webp") 0 0 / 360px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tapa-nombre {
  position: absolute;
  left: 9.5cqw;
  top: 9cqw;
  margin: 0;
  font-size: 13.4cqw;
  line-height: 0.9;
  font-weight: 760;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}
.tapa-obra {
  position: absolute;
  left: 9.8cqw;
  top: 39.5cqw;
  margin: 0;
  font-size: 3.1cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tapa-lamina {
  position: absolute;
  right: 9.5cqw;
  bottom: 10cqw;
  width: 47cqw;
  aspect-ratio: 1;
  padding: 1.6cqw;
  background: #f4f2ec;
  box-shadow: 0 0.6px 1px rgba(0, 0, 14, 0.55), 0 2px 5px rgba(0, 0, 14, 0.22);
}
.tapa-lamina img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contra-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9cqw;
  margin: 0;
  text-align: center;
  font-size: 2.5cqw;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* guardas */
.hoja.guarda .pg { background: var(--guarda); }
.hoja.contraguarda .pg {
  background: var(--tela) url("../img/texturas/tela.webp") 0 0 / 360px;
  background-blend-mode: soft-light;
}
.hoja.contraguarda .pg::before { display: none; }
.guarda-papel {
  position: absolute;
  top: 1cqw;
  bottom: 1cqw;
  background: var(--guarda);
  box-shadow: 0 0.4px 1.2px rgba(0, 0, 14, 0.35);
}
.guarda-papel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/texturas/papel.png");
  background-size: 256px;
  mix-blend-mode: soft-light;
  opacity: 0.8;
}
.hoja.izq .guarda-papel { left: 1cqw; right: 0; }
.hoja.der .guarda-papel { left: 0; right: 1cqw; }
.hoja.guarda .pg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/texturas/papel.png");
  background-size: 256px;
  mix-blend-mode: soft-light;
  opacity: 0.8;
}

/* ---------------------------------------------------------------- preliminares */

.portadilla-nombre {
  position: absolute;
  left: 0;
  right: 0;
  top: 31%;
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.portada-nombre {
  position: absolute;
  margin: 0;
  font-size: 9.4cqw;
  line-height: 0.95;
  font-weight: 640;
  font-stretch: 108%;
  letter-spacing: -0.02em;
}
.portada-titulo {
  position: absolute;
  margin: 0;
  font-size: 9.4cqw;
  line-height: 0.95;
  font-weight: 250;
  font-stretch: 62%;
  color: var(--ultramar);
  letter-spacing: -0.01em;
}
.portada-pie {
  position: absolute;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tinta-2);
}
.creditos {
  position: absolute;
  margin: 0;
  font-size: 10.6px;
  line-height: 1.55;
  color: var(--tinta-2);
}
.creditos strong { color: var(--tinta); font-weight: 600; }
.creditos p { margin: 0 0 9px; }

/* índice */
.indice-titulo {
  position: absolute;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.indice {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
}
.indice li { border-top: 1px solid rgba(27, 27, 26, 0.12); }
.indice li:last-child { border-bottom: 1px solid rgba(27, 27, 26, 0.12); }
.indice-ent {
  appearance: none;
  display: grid;
  grid-template-columns: 7.2em 1fr auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 5.1px 0;
  font: inherit;
  font-size: 12.8px;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.indice-ent .i-anio { color: var(--ultramar); font-variant-numeric: tabular-nums lining-nums; font-weight: 500; }
.indice-ent .i-pag { font-variant-numeric: tabular-nums lining-nums; color: var(--tinta-2); }
.indice-ent:hover .i-tit { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.indice-ent:hover .i-pag { color: var(--ultramar); }
.indice li.otro .indice-ent .i-anio { color: var(--tinta-2); }

/* currículum */
.cv-col { position: absolute; overflow: hidden; }
.cv-col h3 {
  margin: 14px 0 6px;
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ultramar);
}
.cv-col h3:first-child { margin-top: 0; }
.cv-ent {
  display: grid;
  grid-template-columns: 5.4em 1fr;
  gap: 6px;
  margin: 0 0 3.6px;
  font-size: 11.2px;
  line-height: 1.38;
  color: var(--tinta);
  font-variant-numeric: tabular-nums lining-nums;
}
.cv-ent .cv-a { color: var(--tinta-2); }

.contacto {
  position: absolute;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}
.contacto dt {
  margin-top: 16px;
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ultramar);
}
.contacto dt:first-child { margin-top: 0; }
.contacto dd { margin: 3px 0 0; }
.contacto a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contacto a:hover { color: var(--ultramar); }

/* vídeo */
.video-marco {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #111;
}
.video-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-marco .play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  color: #fff;
  transition: transform 0.3s var(--curva);
}
.video-marco:hover .play { transform: scale(1.08); }
.video-texto { position: absolute; margin: 0; font-size: 11px; line-height: 1.5; color: var(--tinta); }
.video-texto strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.video-qr { position: absolute; display: block; }
.video-qr-pie { position: absolute; margin: 0; font-size: 10.6px; line-height: 1.45; color: var(--tinta-2); }
.video-qr-pie a { color: var(--tinta); }

/* ---------------------------------------------------------------- visor */

.visor {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: rgba(220, 218, 213, 0.97);
  color: #1d1c1a;
}
.visor::backdrop { background: transparent; }
.visor[open] { display: grid; place-items: center; animation: visor-entra 0.35s var(--curva); }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }
.visor-figura {
  margin: 0;
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: calc(100vw - 32px);
}
.visor-figura img {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 140px);
  width: auto;
  height: auto;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45);
  animation: visor-img 0.5s var(--curva);
}
@keyframes visor-img { from { transform: scale(0.97); } to { transform: none; } }
.visor-pie { font-size: 12.5px; line-height: 1.45; max-width: 70ch; }
.visor-pie .pie-t { color: inherit; font-weight: 600; letter-spacing: 0.025em; }
.visor-cerrar { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); font-size: 13px; }

.medidor {
  position: absolute;
  left: -100000px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}
.medidor .hoja { position: relative; }

.sin-js { position: fixed; inset: auto 0 40% 0; text-align: center; }

/* maqueta compacta (teléfonos): la letra crece respecto a la página para seguir siendo legible */
[data-perfil="compacto"] .cuerpo { font-size: 15px; line-height: 22.5px; }
[data-perfil="compacto"] .texto-titulo { font-size: 22px; }

/* ---------------------------------------------------------------- pantallas estrechas */

@media (max-width: 640px) {
  .sala { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .barra {
    grid-template-columns: 1fr auto;
    grid-template-areas: "inicio fin" "paso paso";
    row-gap: 2px;
    margin-top: 10px;
    font-size: 12.5px;
  }
  .barra-inicio { grid-area: inicio; gap: 10px; }
  .barra-paso { grid-area: paso; }
  .barra-fin { grid-area: fin; }
  .selector select { max-width: 19ch; }
  .pista { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atril, .sombra-libro, .canto, .visor[open], .visor-figura img { transition: none; animation: none; }
}