:root {
  --bg: #e9e3d7;

  --ink: #2b241d;
  --ink-soft: #5c4d3d;

  --wood-light: #cf963f;
  --wood: #a87328;
  --wood-dark: #754817;

  --shelf-dark: #241909;
  --gap-books: 3px;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(
      circle at center,
      #efe8dc 0%,
      var(--bg) 100%
    );
  font-family: "Roboto", sans-serif;
  user-select: none;
}

/* Encabezado */

.bookshelf-header {
  width:min(90vw,600px);
  margin: 0 auto 25px;
  text-align: center;
}

.bookshelf-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.bookshelf-header p {
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.4;
  color: var(--ink);
}


/* Librero */

.bookshelf {
  position: relative;
  width:min(90vw,600px);
  margin: 0 auto 40px;

  padding: 22px 12px 0;
  overflow: visible;

  background:
    repeating-linear-gradient(
      90deg,
      #2d1d0c 0,
      #2d1d0c 10px,
      #261707 10px,
      #261707 20px
    );

  box-shadow:
    inset 0 0 38px rgba(0,0,0,.55),
    0 22px 38px rgba(0,0,0,.25);
}

.bookshelf::before {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 5;

  border: 12px solid transparent;
  border-image:
    linear-gradient(135deg, #754817, #d49a3d 28%, #a87328 50%, #6e4315 100%) 1;

  box-shadow:
    inset 0 10px rgba(255,255,255,.08),
    inset 0 -8px rgba(0,0,0,.25);
}

.bookshelf::after {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  bottom: -30px;
  height: 30px;
  pointer-events: none;
  z-index: 6;

  background:
    linear-gradient(to bottom, #dca348 0%, #a87328 45%, #754817 100%);

  box-shadow:
    inset 0 3px rgba(255,255,255,.18),
    inset 0 -4px rgba(0,0,0,.38),
    0 22px 28px rgba(0,0,0,.35);
}

.shelf-row {
  min-height: 285px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.shelf-books {
  min-height: 270px;
  display: flex;
  align-items: flex-end;
  gap: var(--gap-books);
  padding: 20px 28px 0;

  box-shadow:
    inset 0 -20px 24px rgba(0,0,0,.25);
}

.shelf-row::after {
  content: "";
  display: block;
  height: 16px;

  background:
    linear-gradient(to bottom, #cf963f, #a87328 45%, #7a4e19);

  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 -2px rgba(0,0,0,.38),
    0 4px 10px rgba(0,0,0,.35);
}

.book {
  position: relative;
  height: 250px;
  width: 65px;
  margin: 0;

  cursor: pointer;
  transform-origin: bottom center;

  transform:
    translate(
      var(--offset-x, 0px),
      calc(var(--offset-y, 0px) + var(--jump, 0px))
    );

  transition:
    transform .32s cubic-bezier(.22, .61, .36, 1),
    filter .25s ease-out;

  overflow: hidden;

  color: white;
  font-size: 1em;

  box-shadow:
    5px 0 10px rgba(0,0,0,.35),
    inset -4px 0 8px rgba(0,0,0,.5),
    inset 2px 0 4px rgba(255,255,255,.08);
  
    text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.book:hover {
  --jump: -18px;

  box-shadow:
    8px 0 18px rgba(0,0,0,.45),
    inset -5px 0 10px rgba(0,0,0,.55),
    inset 2px 0 4px rgba(255,255,255,.12);

  z-index: 100;
}

/* Títulos */

.book h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-family: "Roboto Condensed", sans-serif;

  margin: 0;
  padding: 12px 0;

  height: 100%;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.85rem;  /* Títulos */
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    position: relative;
  z-index: 4;

}

.book h3 {
  display: none;
}

/* Tamaños */

.book-small {
  width: 55px;
}

.book-medium {
  width: 65px;
}

.book-large {
  width: 85px;
}

/* Colores */

.book-azul {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.20), transparent 34%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(100deg, rgba(0,0,0,.06) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #0072B2 0%, #005A8C 48%, #003B5C 100%);
}

.book-naranja {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.22), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.18), transparent 34%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(100deg, rgba(0,0,0,.055) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #E69F00 0%, #B87900 48%, #7A5000 100%);
}

.book-verde-azulado {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.18), transparent 34%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(100deg, rgba(0,0,0,.06) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #009E73 0%, #007A59 48%, #004D38 100%);
}

.book-magenta {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.19), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.20), transparent 34%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.045) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(100deg, rgba(0,0,0,.06) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #CC79A7 0%, #9E4F7D 48%, #65304F 100%);
}

.book-amarillo {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.34), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.13), transparent 34%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.09) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(100deg, rgba(0,0,0,.045) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #F0E442 0%, #D4C933 48%, #AFA522 100%);
}

.book-negro {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.14), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.25), transparent 34%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(100deg, rgba(0,0,0,.08) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #3A3A3A 0%, #1A1A1A 48%, #000000 100%);
}

/* Color de título */

.book-azul h2,
.book-naranja h2,
.book-verde-azulado h2,
.book-magenta h2,
.book-negro h2 {
  color: #FFF6D8;
}

.book-amarillo h2 {
  color: #2B2400;
}

/* Sombra general */

.book h2 {
  text-shadow:
    0 1px 1px rgba(0,0,0,.35);
}

/* Sombra especial sólo para amarillo */

.book-amarillo h2 {
  text-shadow:
    0 1px 1px rgba(255,255,255,.35);
}

/* Pie */

/* Créditos */
.pie {
    margin-top: 20px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Roboto", sans-serif;
    text-align: center;
}

.creditos {
    max-width: 1080px;
    min-width: 500;
    padding: 10px 20px;
    border-top: 1px solid #ccc;
    font-size: .8rem;
    letter-spacing: 1px;
    color: var(--ink);
}

.legal {
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: .75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
}

/* Brillo del lomo */
.book::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.05) 12%,
      transparent 35%,
      rgba(0,0,0,.18) 78%,
      rgba(0,0,0,.36) 100%
    );

  pointer-events: none;
  z-index: 2;
}

/* Sombra lateral del lomo */
.book::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;

  background: rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 2;
}

/* Adornos */

.book-ornament {
  position: absolute;
  left: 50%;
  bottom: 18px;

  transform: translateX(-50%);

  color: rgba(217,188,99,.78);
  font-size: 13px;
  line-height: 1;

  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 -1px 0 rgba(0,0,0,.30);


  opacity: .68;

  pointer-events: none;
  z-index: 4;
}

.book-diamond .book-ornament {
  transform: translateX(-50%) rotate(45deg);
}

.book-double .book-ornament:first-of-type {
  bottom: 38px;
}

.book-double .book-ornament:last-child {
  bottom: 18px;
}

.book-medallion .book-ornament {
  bottom:18px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 35%,
      #ead08a 0%,
      #c89a38 60%,
      #8a6120 100%
    );

  color: transparent;
  text-shadow: none;

  box-shadow:
    inset 0 1px rgba(255,255,255,.25),
    inset 0 -1px rgba(0,0,0,.25);
}

.book-ribs .book-ribs-lines {
  --line1: 35px;
  --line2: 20px;
  --thickness: 4px;

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 14%,
      transparent 38%,
      rgba(0,0,0,.16) 78%,
      rgba(0,0,0,.34) 100%
    ),

    linear-gradient(
      to bottom,

      transparent calc(100% - var(--line1)),

      rgba(255,255,255,.18) calc(100% - var(--line1)),
      rgba(255,255,255,.08) calc(100% - (var(--line1) - 1px)),

      rgba(0,0,0,.20) calc(100% - (var(--line1) - 1px)),
      rgba(0,0,0,.30) calc(100% - (var(--line1) - var(--thickness))),

      transparent calc(100% - (var(--line1) - var(--thickness))),

      transparent calc(100% - var(--line2)),

      rgba(255,255,255,.20) calc(100% - var(--line2)),
      rgba(255,255,255,.09) calc(100% - (var(--line2) - 1px)),

      rgba(0,0,0,.22) calc(100% - (var(--line2) - 1px)),
      rgba(0,0,0,.32) calc(100% - (var(--line2) - var(--thickness))),

      transparent calc(100% - (var(--line2) - var(--thickness)))
    );

  mix-blend-mode: overlay;
  opacity: .72;

  pointer-events: none;
  z-index: 3;
}

/* Logo-r */

.bookshelf-logo {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 1rem auto 0;
}

img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Móvil */

@media (max-width: 767px) {
  .bookshelf-header h1 {
    font-size: 1.70rem;
  }

  .bookshelf-header p {
    font-size: 0.95rem;
  }

  .bookshelf-header p {
  max-width: 400px;
}

}