/*
 * Diseño de la web. Copia el de Cargo: las medidas salen de la web antigua, donde la unidad
 * (--u) valía 12,96 px en el ordenador y 10 px en el móvil.
 */

/* Tipografías libres (SIL Open Font License), guardadas en la propia web. */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/libre-franklin-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/libre-franklin-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/alegreya-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/alegreya-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: 12.96px;
  --tinta: rgba(0, 0, 0, 0.75);
  --gris: #9a9a9a;
  --columnas: 4;
  --ancho: 80%;
  --margen: calc(3 * var(--u));
  --hueco: calc(4 * var(--u));
  --hueco-filas: calc(4 * var(--u));
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: #000;
}

/* Cabecera: nombre, profesión y correo */

.cabecera {
  padding: var(--margen) var(--margen) calc(2 * var(--u));
}

.cabecera h1 {
  margin: 0;
  font-family: "Libre Franklin", "Arial Black", sans-serif;
  font-weight: 700;
  font-size: calc(4 * var(--u));
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--tinta);
  /* Si no cabe en una línea, la parte en dos trozos parecidos («Daniel de la / Rubia Ortí») */
  text-wrap: balance;
}

.profesion {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: calc(2.6 * var(--u));
  line-height: 2;
  color: #000;
}

.correo {
  margin: 0 0 calc(2 * var(--u) * 2);
  min-height: calc(2 * var(--u) * 2);
  font-family: "Alegreya", Georgia, serif;
  font-size: calc(2 * var(--u));
  line-height: 2;
  color: var(--tinta);
}

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

.correo a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
}

/* Libros: las portadas de cada fila se alinean por abajo, como en Cargo */

.libros {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  column-gap: var(--hueco);
  row-gap: var(--hueco-filas);
  width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen) var(--margen);
}

.libro {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: calc(1.2 * var(--u));
  margin: 0;
}

.libro img {
  display: block;
  align-self: end;
  width: 100%;
  height: auto;
}

.libro figcaption {
  align-self: start;
  margin-bottom: calc(0.5 * var(--u));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: calc(1.3 * var(--u));
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.85);
}

.libro .edicion {
  color: var(--gris);
}

/* Tableta: tres columnas a todo lo ancho */
@media (max-width: 1023px) {
  :root {
    --columnas: 3;
    --ancho: 100%;
    --margen: calc(1.5 * var(--u));
    --hueco: calc(1.5 * var(--u));
    --hueco-filas: calc(3 * var(--u));
  }
}

/* Móvil: dos columnas y todo un poco más pequeño */
@media (max-width: 639px) {
  :root {
    --u: 10px;
    --columnas: 2;
    --margen: 12px;
    --hueco: 10px;
    --hueco-filas: 10px;
  }

  .cabecera {
    padding: 12px 12px 8px;
  }
}