.pill.small { height: 34px; padding: 0 16px; font-size: 11px; }

.hero { padding: 40px 0 0; position: relative; }
.hero h1 { font-size: clamp(44px, 13vw, 72px); font-weight: 300; }
.hero-script {
  font-size: clamp(42px, 11vw, 62px);
  margin: -14px 0 0 auto;
  display: block;
  width: fit-content;
  padding-right: 6px;
}
.lede {
  color: var(--ink-soft);
  max-width: 360px;
  font-size: 15px;
  font-weight: 300;
  margin-top: 18px;
}

/* estantería grande de portada */
.shelf-art {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 370px;
  margin: 36px -20px 0;
  padding: 0 20px;
  overflow: hidden;
}
.shelf-art span {
  flex: none;
  width: var(--w);
  height: var(--h);
  background: var(--c);
  color: var(--t, #2a1416);
  border-radius: 3px 3px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 14px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) backwards;
}
.shelf-art span:nth-child(2) { animation-delay: .06s; }
.shelf-art span:nth-child(3) { animation-delay: .12s; }
.shelf-art span:nth-child(4) { animation-delay: .18s; }
.shelf-art span:nth-child(5) { animation-delay: .24s; }
.shelf-art span:nth-child(6) { animation-delay: .3s; }
.shelf-art span:nth-child(7) { animation-delay: .36s; }
.shelf-art b {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(var(--w) * .58);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.shelf-art small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
@keyframes rise { from { transform: rotate(180deg) translateY(-60px); opacity: 0; } }

/* login sobre bloque rosa */
.auth {
  background: #f6d6e3;
  color: #2a1416;
  --ink: #2a1416;
  --ink-soft: rgba(42,20,22,.68);
  --bg: #f6d6e3;
  --line: rgba(42,20,22,.22);
  --ink-faint: rgba(42,20,22,.45);
  --card: rgba(255,255,255,.4);
  --accent: #8b2c2a;
  margin: 0 -20px;
  padding: 28px 20px 30px;
}
.start-title { font-size: 30px; font-weight: 300; }
.start-sub { color: var(--ink-soft); font-weight: 300; font-size: 14px; margin: 6px 0 18px; }

#startForm { display: grid; gap: 10px; }
#startForm .pill { margin-top: 6px; width: 100%; }
.restore { justify-self: center; margin-top: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.restore u { text-underline-offset: 3px; }
.error { color: var(--accent); font-size: 13px; padding-left: 18px; }
.error:empty { display: none; }

.features { list-style: none; margin: 44px 0 30px; display: grid; gap: 26px; }
.features li { display: grid; grid-template-columns: 64px 1fr; gap: 6px; align-items: start; }
.features .num { font-size: 48px; margin-top: -8px; }
.features h3 { font-size: 22px; font-weight: 400; margin-bottom: 4px; }
.features p { color: var(--ink-soft); font-weight: 300; }

.foot { padding: 20px 0 40px; text-align: center; }


.top-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-switch button { height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--ink-soft); }
.lang-switch button.on { background: var(--ink); color: var(--bg); }

.have-account { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: var(--ink-soft); text-decoration: underline; }