/* ==========================================================================
   Familia Jaramillo — Álbum
   Una sola hoja de estilos para las seis páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  --crema:        #f4efe6;
  --crema-2:      #ece5d8;
  --crema-3:      #e2d9c8;
  --papel:        #ffffff;
  --tinta:        #241d18;
  --tinta-2:      #4a3f36;
  --tinta-3:      #7d7166;
  --terracota:    #b0512f;
  --terracota-2:  #8f3f23;
  --musgo:        #4d5d42;
  --linea:        rgba(36, 29, 24, 0.14);
  --filete:       rgba(36, 29, 24, 0.55);
  --oscuro:       #17110d;

  --display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
             Palatino, Georgia, "Times New Roman", serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --cabecera-alto: 66px;
  --ancho: 1240px;
  --curva: cubic-bezier(0.22, 0.68, 0.26, 1);

  /* Textura de papel de algodón. SVG en línea, sin archivos externos. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --cabecera-alto: 78px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera-alto) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  /* Letra mediana-grande: entre 17 y 19 px. */
  font-size: clamp(1.0625rem, 0.99rem + 0.38vw, 1.1875rem);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.sin-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Textura de papel sobre todo el documento. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grano);
  background-size: 260px 260px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.5vw, 56px);
}

/* --------------------------------------------------------------------------
   3. Accesibilidad
   -------------------------------------------------------------------------- */

.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 999;
  background: var(--tinta);
  color: var(--crema);
  padding: 14px 22px;
  border-radius: 2px;
  font-size: 1rem;
  text-decoration: none;
  transition: top 0.2s var(--curva);
}
.saltar:focus { top: 16px; }

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

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

/* --------------------------------------------------------------------------
   4. Velo de transición entre páginas

   Clave: en reposo el velo es INVISIBLE (opacity: 0). El fundido de entrada
   es una animación que va de 1 a 0 y no deja rastro al terminar. Así, si las
   animaciones no llegan a ejecutarse nunca —navegador antiguo, pestaña en
   segundo plano, JavaScript caído— el velo simplemente no se ve y la página
   queda a la vista. Nunca puede quedarse tapando el álbum.
   -------------------------------------------------------------------------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--crema);
  pointer-events: none;
  opacity: 0;
  animation: velo-fuera 0.45s var(--curva);
}

@keyframes velo-fuera {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Tercer seguro: el JavaScript pone esta clase a los 600 ms y corta la
   animación en seco, por si se hubiera quedado congelada (pestaña en
   segundo plano, navegador que no anima). Vuelve al opacity: 0 de arriba. */
.velo.listo { animation: none; }

/* Al salir hacia otra página sí se queda puesto (forwards). */
.velo.saliendo,
.velo.listo.saliendo {
  animation: velo-dentro 0.26s var(--curva) forwards;
}

@keyframes velo-dentro {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. Cabecera y menú
   -------------------------------------------------------------------------- */

.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--cabecera-alto);
  display: flex;
  align-items: center;
}

/* El fondo sólido con desenfoque va en un pseudo-elemento, NO en .cabecera.
   Motivo: backdrop-filter convierte al elemento que lo lleva en el contenedor
   de referencia de sus hijos con position: fixed. Si estuviera en .cabecera,
   el menú a pantalla completa se quedaría encerrado dentro de la barra de
   66 px de alto en vez de cubrir la pantalla. */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(244, 239, 230, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--linea);
  opacity: 0;
  transition: opacity 0.4s var(--curva);
  pointer-events: none;
}

.cabecera-fila {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marca {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.45rem);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}

/* En la portada el menú es transparente y se vuelve sólido al bajar.
   En las páginas de categoría es sólido desde el principio. */
body[data-seccion="inicio"] .cabecera { background: transparent; }
body[data-seccion="inicio"] .cabecera .marca,
body[data-seccion="inicio"] .cabecera .nav-link,
body[data-seccion="inicio"] .hamburguesa {
  color: var(--crema);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

body[data-seccion="inicio"] .cabecera.solida::before,
body:not([data-seccion="inicio"]) .cabecera::before {
  opacity: 1;
}

body[data-seccion="inicio"] .cabecera.solida .marca,
body[data-seccion="inicio"] .cabecera.solida .nav-link,
body[data-seccion="inicio"] .cabecera.solida .hamburguesa {
  color: var(--tinta);
  text-shadow: none;
}

/* Botón de menú (solo celular) */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  align-items: flex-end;
  margin-right: -8px;
}
.hamburguesa span {
  display: block;
  width: 30px;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--curva), opacity 0.2s linear;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menú a pantalla completa en el celular */
.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--crema);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4.4vh, 34px);
  opacity: 0;
  visibility: hidden;
  /* La visibilidad cambia de golpe: al abrir, al instante (para que el
     teclado pueda enfocar los enlaces); al cerrar, cuando acaba el fundido. */
  transition: opacity 0.35s var(--curva), visibility 0s linear 0.35s;
}
.menu.abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--curva), visibility 0s linear 0s;
}

.menu .nav-link {
  font-family: var(--display);
  font-size: clamp(1.75rem, 7.5vw, 2.5rem);
  text-decoration: none;
  color: var(--tinta);
  padding: 6px 10px;
  text-align: center;
}
.menu .nav-link[aria-current="page"] { color: var(--terracota); }
.menu .nav-link[data-clave="francis"][aria-current="page"] { color: var(--musgo); }

/* Separador entre las secciones de fotos y las de Carlos. En el celular es
   una raya fina de lado a lado; en escritorio, un punto discreto. */
.nav-corte {
  display: block;
  width: min(260px, 60vw);
  height: 1px;
  background: var(--linea);
  margin: clamp(6px, 1.4vh, 12px) 0;
}

.menu-inicio {
  margin-top: 12px;
  padding-top: clamp(18px, 3.5vh, 30px);
  border-top: 1px solid var(--linea);
  width: min(320px, 70vw);
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-decoration: none;
}

.menu-cerrar {
  position: absolute;
  top: 12px;
  right: clamp(14px, 5vw, 40px);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--tinta);
}

/* En escritorio el menú son enlaces en línea con subrayado animado.
   El corte está en 1180 px y no en 900: los seis nombres suman 666 px y con
   las separaciones el menú mide unos 775 px, así que por debajo de ese ancho
   se quedaría pegado al título del álbum. Entre 900 y 1180 se usa el menú a
   pantalla completa, que además va mejor en tablet. */
@media (min-width: 1180px) {
  .hamburguesa, .menu-cerrar, .menu-inicio { display: none; }

  .menu {
    position: static;
    inset: auto;
    background: none;
    flex-direction: row;
    gap: clamp(15px, 1.8vw, 30px);
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .menu .nav-link {
    font-family: var(--texto);
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: 0.008em;
    color: inherit;
    position: relative;
    padding: 4px 0;
  }

  .nav-corte {
    width: 1px;
    height: 15px;
    margin: 0;
    align-self: center;
    opacity: 0.7;
  }

  .menu .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.4s var(--curva);
  }
  .menu .nav-link:hover::after,
  .menu .nav-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .menu .nav-link[aria-current="page"] { color: var(--terracota); }
  .menu .nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--terracota);
  }
  .menu .nav-link[data-clave="francis"][aria-current="page"] { color: var(--musgo); }
  .menu .nav-link[data-clave="francis"][aria-current="page"]::after { background: var(--musgo); }

  body[data-seccion="inicio"] .cabecera:not(.solida) .menu .nav-link[aria-current="page"] { color: var(--crema); }
}

/* --------------------------------------------------------------------------
   6. Portada
   -------------------------------------------------------------------------- */

.portada {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.portada-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.portada-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: portada-zoom 26s ease-in-out infinite alternate;
}

@keyframes portada-zoom {
  from { transform: scale(1.005); }
  to   { transform: scale(1.115); }
}

.portada-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El texto vive en la mitad inferior, y ahí la foto tiene tejados blancos.
     El degradado se cierra fuerte abajo para que se lea siempre. */
  background:
    linear-gradient(to bottom,
      rgba(23, 17, 13, 0.50) 0%,
      rgba(23, 17, 13, 0.14) 28%,
      rgba(23, 17, 13, 0.40) 58%,
      rgba(23, 17, 13, 0.66) 78%,
      rgba(23, 17, 13, 0.86) 100%);
}

.portada-texto {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 clamp(20px, 5.5vw, 56px) clamp(96px, 17vh, 168px);
  color: var(--crema);
}

.kicker {
  font-size: clamp(0.7rem, 0.62rem + 0.3vw, 0.82rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 14px;
  opacity: 0.95;
}
.kicker::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  background: currentColor;
  margin-top: 14px;
  opacity: 0.8;
}

.portada-titulo {
  font-size: clamp(2.9rem, 13vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.34);
}
.portada-titulo span { display: block; }

.portada-sub {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4.6vw, 2.05rem);
  font-weight: 400;
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.38);
}
.portada-sub em {
  font-style: italic;
  opacity: 0.72;
  padding: 0 0.06em;
}

.portada-lugar {
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  opacity: 0.82;
}

.bajar {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--crema);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.bajar-linea {
  display: block;
  width: 1px;
  height: 42px;
  background: currentColor;
  transform-origin: top;
  animation: bajar-pulso 2.4s ease-in-out infinite;
}
@keyframes bajar-pulso {
  0%, 100% { transform: scaleY(0.28); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. Índice de categorías (portada)
   -------------------------------------------------------------------------- */

.indice {
  padding: clamp(64px, 12vh, 128px) 0 clamp(72px, 13vh, 140px);
  position: relative;
  z-index: 2;
}

.indice-intro {
  text-align: center;
  margin-bottom: clamp(38px, 6vh, 68px);
}
.indice-intro h2 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  margin: 0;
}

.indice-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(30px, 5vw, 44px);
}

@media (min-width: 700px) {
  .indice-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .indice-lista { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--papel);
  padding: clamp(12px, 2.2vw, 16px);
  box-shadow: 0 1px 2px rgba(36, 29, 24, 0.07),
              0 14px 30px -18px rgba(36, 29, 24, 0.42);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
  height: 100%;
}

.tarjeta-foto {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 0 0 1px var(--filete);
}
.tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--curva), filter 0.5s var(--curva);
}

/* Sección que todavía no tiene fotos: en vez de un hueco vacío, una
   tarjeta de papel con su nombre. Es el mismo recurso que usan los
   libros de los que no se consiguió portada. */
.tarjeta-papel {
  background: var(--crema);
  box-shadow: 0 0 0 1px var(--filete);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 12% 10%;
}
.tarjeta-papel-nombre {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.14;
  color: var(--tinta);
}
.tarjeta-papel-nota {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.tarjeta-pie {
  display: block;
  padding: clamp(16px, 2.4vw, 22px) 4px clamp(6px, 1vw, 10px);
}

.tarjeta-nombre {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.6vw, 1.72rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
}

@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(36, 29, 24, 0.08),
                0 30px 50px -22px rgba(36, 29, 24, 0.5);
  }
  .tarjeta:hover .tarjeta-foto img {
    transform: scale(1.045);
    filter: saturate(1.12);
  }
}

/* --------------------------------------------------------------------------
   8. Encabezado de las páginas de categoría
   -------------------------------------------------------------------------- */

.seccion-cabeza {
  padding: calc(var(--cabecera-alto) + clamp(46px, 9vh, 96px)) 0 clamp(34px, 6vh, 66px);
  text-align: center;
}

/* Sin numerales romanos: queda solo el filete de color sobre el título.
   En Francis el filete es musgo en vez de terracota. */
.seccion-filete {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--terracota);
  margin: 0 auto clamp(22px, 3.4vh, 32px);
  opacity: 0.75;
}
body[data-seccion="francis"] .seccion-filete { background: var(--musgo); }

.seccion-titulo {
  font-size: clamp(2.4rem, 9.5vw, 4.4rem);
  letter-spacing: -0.028em;
}

.seccion-lugar {
  margin: 16px 0 0;
  font-size: 0.84rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* Espacio reservado para los párrafos de introducción que se escribirán
   después. Si está vacío no ocupa nada. */
.seccion-intro:empty { display: none; }
.seccion-intro {
  max-width: 62ch;
  margin: clamp(26px, 4vh, 40px) auto 0;
  text-align: center;
  color: var(--tinta-2);
  font-size: 1.06em;
}

/* --------------------------------------------------------------------------
   9. Galería
   -------------------------------------------------------------------------- */

.galeria {
  display: grid;
  gap: clamp(26px, 5.5vw, 40px);
  list-style: none;
  margin: 0;
  /* El padding-left de 40 px que traen las listas por defecto hay que
     anularlo, si no las fotos quedan descentradas. */
  padding: 0 0 clamp(30px, 6vh, 56px);
}

@media (min-width: 900px) {
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 3vw, 46px);
  }
  /* La primera foto va a lo ancho y centrada. */
  .galeria > .foto:first-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
  }
}

.foto { margin: 0; }

.foto-btn {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--papel);
  /* Passe-partout: tarjeta blanca con margen generoso. */
  padding: clamp(14px, 4.2vw, 22px);
  box-shadow: 0 1px 2px rgba(36, 29, 24, 0.07),
              0 14px 30px -20px rgba(36, 29, 24, 0.4);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}

.foto-btn img {
  width: 100%;
  height: auto;
  /* Filete de 1 px por dentro del marco blanco. */
  box-shadow: 0 0 0 1px var(--filete);
  transition: filter 0.45s var(--curva);
  background: var(--crema-2);
}

@media (hover: hover) and (pointer: fine) {
  .foto-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 5px rgba(36, 29, 24, 0.09),
                0 34px 56px -26px rgba(36, 29, 24, 0.5);
  }
  .foto-btn:hover img { filter: saturate(1.1); }
}

/* Título debajo de una foto. Solo lo llevan los cuadros. */
.foto-titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.02rem, 2.8vw, 1.14rem);
  text-align: center;
  color: var(--tinta-2);
  margin: 14px 4px 0;
  line-height: 1.35;
}

/* Ficha del cuadro: técnica, fecha y medidas. Debajo del título. */
.foto-ficha {
  max-width: 46ch;
  margin: 7px auto 0;
  text-align: center;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--tinta-3);
}

.galeria-vacia {
  text-align: center;
  color: var(--tinta-3);
  font-style: italic;
  padding: 40px 0;
}

/* --------------------------------------------------------------------------
   9 bis. Los libros
   -------------------------------------------------------------------------- */

.libros {
  display: grid;
  gap: clamp(38px, 7vw, 54px);
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(30px, 6vh, 56px);
}

@media (min-width: 760px) {
  .libros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 58px); }
}
@media (min-width: 1100px) {
  .libros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 40px); }
}

.libro {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Mismo passe-partout que las fotos. */
.libro-marco {
  display: block;
  background: var(--papel);
  padding: clamp(14px, 4vw, 20px);
  box-shadow: 0 1px 2px rgba(36, 29, 24, 0.07),
              0 14px 30px -20px rgba(36, 29, 24, 0.4);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
  text-decoration: none;
  color: inherit;
}

.libro-portada { display: block; }
.libro-portada img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--filete);
  background: var(--crema-2);
  transition: filter 0.45s var(--curva);
}

/* Libro sin portada: hoja de papel con el título y la firma. */
.libro-portada-texto {
  aspect-ratio: 700 / 1000;
  box-shadow: 0 0 0 1px var(--filete);
  background: var(--crema);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18%;
  padding: 12% 10%;
  text-align: center;
}
.libro-portada-titulo {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4.2vw, 1.7rem);
  line-height: 1.16;
  color: var(--tinta);
}
.libro-portada-firma {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  color: var(--tinta-3);
}

@media (hover: hover) and (pointer: fine) {
  a.libro-marco:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 5px rgba(36, 29, 24, 0.09),
                0 34px 56px -26px rgba(36, 29, 24, 0.5);
  }
  a.libro-marco:hover .libro-portada img { filter: saturate(1.1); }
}

.libro-pie {
  padding: clamp(18px, 3vw, 24px) 2px 0;
  text-align: center;
}

.libro-titulo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.4vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.libro-tipo {
  margin: 10px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.libro-sello {
  margin: 8px 0 0;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--tinta-3);
}

/* Libro del que todavía no tenemos el archivo. */
.libro-pendiente {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--tinta-3);
  opacity: 0.75;
}

.libro-enlaces {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}

.libro-enlace {
  position: relative;
  text-decoration: none;
  color: var(--terracota);
  font-size: 0.98rem;
  padding: 6px 2px;
}
.libro-enlace::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transition: opacity 0.3s var(--curva), transform 0.4s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .libro-enlace:hover::after { opacity: 1; }
  .libro-enlace:hover { color: var(--terracota-2); }
}

/* Nota al pie de la sección, sobre dónde están publicados. */
.libros-nota {
  max-width: 60ch;
  margin: clamp(6px, 2vh, 18px) auto 0;
  text-align: center;
  color: var(--tinta-3);
  font-size: 0.92rem;
  line-height: 1.6;
}
.libros-nota a { color: var(--terracota); }

/* En el índice, las tarjetas de los libros y de los cuadros muestran la
   pieza entera, sin recortar, sobre el crema: recortar una portada o un
   cuadro le cortaría el marco. */
.tarjeta[data-clave="libros"] .tarjeta-foto,
.tarjeta[data-clave="cuadros"] .tarjeta-foto {
  background: var(--crema-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
}
.tarjeta[data-clave="libros"] .tarjeta-foto img,
.tarjeta[data-clave="cuadros"] .tarjeta-foto img {
  width: auto;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 6px 18px -8px rgba(36, 29, 24, 0.55);
}
.tarjeta[data-clave="cuadros"] .tarjeta-foto img {
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* --------------------------------------------------------------------------
   9 ter. La biografía
   -------------------------------------------------------------------------- */

.bio {
  max-width: 62ch;
  margin: 0 auto;
  padding-bottom: clamp(20px, 4vh, 40px);
  font-size: 1.06em;
  line-height: 1.72;
  color: var(--tinta-2);
}

.bio p { margin: 0 0 1.15em; }

.bio strong { font-weight: 500; color: var(--tinta); }

.bio-entrada {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--tinta);
  margin-bottom: 1.5em;
}
.bio-entrada em { font-style: italic; color: var(--terracota); }

.bio h2 {
  font-size: clamp(1.5rem, 4.6vw, 1.95rem);
  color: var(--tinta);
  margin: clamp(38px, 6vh, 58px) 0 0.7em;
  text-align: center;
}
.bio h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--terracota);
  opacity: 0.6;
  margin: 0 auto clamp(18px, 2.6vh, 26px);
}

.bio-vinculos {
  margin: clamp(40px, 7vh, 66px) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 22px;
}

.bio-fuentes {
  margin: clamp(32px, 5vh, 48px) 0 0;
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--linea);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tinta-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Videos
   -------------------------------------------------------------------------- */

.videos {
  padding: clamp(20px, 5vh, 44px) 0 0;
  border-top: 1px solid var(--linea);
  margin-top: clamp(20px, 5vh, 44px);
}
.videos:empty { display: none; border: 0; margin: 0; padding: 0; }

.videos-titulo {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  text-align: center;
  margin-bottom: clamp(24px, 4vh, 38px);
}

.videos-lista {
  display: grid;
  gap: clamp(28px, 5vw, 42px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) {
  .videos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos-lista > li:only-child { grid-column: 1 / -1; max-width: 840px; margin-inline: auto; width: 100%; }
}

.video-marco {
  background: var(--papel);
  padding: clamp(14px, 4.2vw, 22px);
  box-shadow: 0 1px 2px rgba(36, 29, 24, 0.07),
              0 14px 30px -20px rgba(36, 29, 24, 0.4);
}
.video-caja {
  position: relative;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px var(--filete);
  background: var(--oscuro);
}
.video-caja iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* La tapa: lo que se ve antes de darle al play. Es del álbum, no de
   YouTube: la imagen está guardada aquí y el botón está dibujado en CSS.
   Hasta que no se pulsa, la página no se conecta con YouTube. */
.video-tapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  background: var(--oscuro);
  cursor: pointer;
}
.video-tapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--curva), filter 0.4s var(--curva);
}

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 15%, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 26px -6px rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  transition: transform 0.35s var(--curva), background-color 0.35s var(--curva);
}
.video-play svg {
  width: 42%;
  height: 42%;
  fill: var(--terracota);
  margin-left: 6%;   /* el triángulo se ve centrado si se corre un poco */
}

@media (hover: hover) and (pointer: fine) {
  .video-tapa:hover img { transform: scale(1.035); filter: brightness(1.05); }
  .video-tapa:hover .video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
  }
}
.video-tapa:focus-visible { outline-offset: -4px; }

/* Por si faltara la portada de algún video: en vez del recuadro roto del
   navegador, el botón de play queda sobre un fondo del álbum. */
.video-tapa.sin-portada {
  background:
    radial-gradient(115% 90% at 50% 0%, rgba(244, 239, 230, 0.13), transparent 68%),
    linear-gradient(155deg, var(--tinta), var(--oscuro));
}
/* Video vertical (los Shorts de YouTube). Se le da su forma real y se le
   pone un ancho máximo: a lo ancho de la columna quedaría altísimo. */
.video-de-pie .video-caja { aspect-ratio: 9 / 16; }
.video-de-pie .video-marco {
  max-width: 380px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .videos-lista > li.video-de-pie:only-child .video-marco { max-width: 420px; }
}

/* El título va ARRIBA del video, con la letra del álbum. */
.video-titulo {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.2vw, 1.3rem);
  line-height: 1.25;
  text-align: center;
  color: var(--tinta);
  margin: 0 4px 14px;
}

/* --------------------------------------------------------------------------
   11. Pie de las páginas de categoría: anterior / siguiente / inicio
   -------------------------------------------------------------------------- */

.pasos {
  margin-top: clamp(52px, 9vh, 96px);
  border-top: 1px solid var(--linea);
  padding-top: clamp(28px, 5vh, 46px);
  display: grid;
  gap: 6px;
}
@media (min-width: 760px) {
  .pasos { grid-template-columns: 1fr 1fr; gap: 30px; }
}

.paso {
  display: block;
  text-decoration: none;
  padding: 18px 4px;
  color: inherit;
  border-bottom: 1px solid var(--linea);
  transition: color 0.3s var(--curva);
}
@media (min-width: 760px) {
  .paso { border-bottom: 0; padding: 6px 0; }
  .paso-siguiente { text-align: right; }
}

.paso-guia {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 8px;
}
.paso-nombre {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  line-height: 1.14;
  display: inline-block;
  position: relative;
}
.paso-nombre::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--curva);
}
.paso-siguiente .paso-nombre::after { transform-origin: right center; }
@media (hover: hover) and (pointer: fine) {
  .paso:hover { color: var(--terracota); }
  .paso:hover .paso-nombre::after { transform: scaleX(1); }
}

.volver {
  margin-top: clamp(34px, 6vh, 58px);
  text-align: center;
  padding-bottom: clamp(40px, 8vh, 80px);
}
.volver-enlace {
  display: inline-block;
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  color: var(--tinta);
  border: 1px solid var(--linea);
  background: var(--papel);
  padding: 18px clamp(28px, 7vw, 52px);
  transition: background-color 0.35s var(--curva),
              border-color 0.35s var(--curva),
              color 0.35s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .volver-enlace:hover {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--crema);
  }
}

/* --------------------------------------------------------------------------
   12. Pie de página
   -------------------------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--linea);
  padding: clamp(34px, 6vh, 56px) 0;
  text-align: center;
  color: var(--tinta-3);
  font-size: 0.9rem;
  position: relative;
  z-index: 2;
}
.pie-marca {
  font-family: var(--display);
  font-size: 1.22rem;
  color: var(--tinta);
  display: block;
  margin-bottom: 8px;
}
.pie-lugar { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.76rem; }

/* --------------------------------------------------------------------------
   13. Lightbox
   -------------------------------------------------------------------------- */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* Igual que el menú: visible al instante al abrir, para que el botón de
     cerrar pueda recibir el foco del teclado. */
  transition: opacity 0.3s var(--curva), visibility 0s linear 0.3s;
  touch-action: none;
}
.lupa.abierta {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--curva), visibility 0s linear 0s;
}

.lupa-escena {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 11vh, 92px) clamp(10px, 3vw, 74px);
}

.lupa-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  transition: opacity 0.22s linear, transform 0.28s var(--curva);
}
.lupa.cargando .lupa-img { opacity: 0.35; }

.lupa-btn {
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 239, 230, 0.13);
  color: var(--crema);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 239, 230, 0.22);
  transition: background-color 0.3s var(--curva), transform 0.3s var(--curva);
}
.lupa-btn svg { width: 22px; height: 22px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .lupa-btn:hover { background: rgba(244, 239, 230, 0.26); transform: scale(1.07); }
}

.lupa-cerrar { top: 14px; right: 14px; }
.lupa-bajar  { top: 14px; left: 14px; }
.lupa-ant    { left: 10px;  top: 50%; transform: translateY(-50%); }
.lupa-sig    { right: 10px; top: 50%; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .lupa-ant:hover { transform: translateY(-50%) scale(1.07); }
  .lupa-sig:hover { transform: translateY(-50%) scale(1.07); }
}

@media (min-width: 900px) {
  .lupa-btn { width: 60px; height: 60px; }
  .lupa-cerrar { top: 26px; right: 30px; }
  .lupa-bajar  { top: 26px; left: 30px; }
  .lupa-ant    { left: 26px; }
  .lupa-sig    { right: 26px; }
}

.lupa-contador {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--crema);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
}

/* Sin pie de foto a propósito: en el álbum se ve la foto y nada más.
   La descripción sigue en el atributo alt, para los lectores de pantalla. */

/* --------------------------------------------------------------------------
   14. Aparición al bajar
   Triple red de seguridad: la clase .js, el temporizador del JavaScript y
   esta animación de CSS que revela todo a los 6 segundos pase lo que pase.
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; transform: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--curva), transform 0.75s var(--curva);
  animation: red-de-seguridad 0.01s linear 6s forwards;
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
}

@keyframes red-de-seguridad {
  to { opacity: 1; transform: none; }
}

.js .reveal-tarde { transition-delay: 0.09s; }

/* --------------------------------------------------------------------------
   15. Impresión
   -------------------------------------------------------------------------- */

@media print {
  :root { --cabecera-alto: 0px; }

  body { background: #fff; color: #000; font-size: 11pt; }
  body::before,
  .cabecera, .menu, .hamburguesa, .bajar, .lupa, .velo,
  .pasos, .volver, .videos { display: none !important; }

  .portada { height: auto; min-height: 0; page-break-after: always; }
  .portada-foto img { animation: none; position: static; height: auto; }
  .portada-texto { color: #000; padding: 0 0 20pt; }
  .portada-titulo, .portada-sub { text-shadow: none; }

  .seccion-cabeza { padding-top: 0; }

  .galeria { display: block; }
  .foto { page-break-inside: avoid; margin-bottom: 14pt; }
  .foto-btn { box-shadow: none; padding: 0; border: 1px solid #999; }
  .foto-btn img { box-shadow: none; }

  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }

  a { text-decoration: none; color: #000; }
}