/* Layout fixes and accessibility shared by every screen. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 8px;
  background: #fff;
  color: #0b1d38;
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
#main-content:focus { outline: none; }
.primary:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #ee7c40;
  outline-offset: 4px;
}
.header-note { color: #d8e7f5; }
.quote-person small { color: #bed5e9; }
.quote-topic { color: #a8ddf4; }
.text-button, footer a, .dialog-close, .back, .restart { min-height: 44px; }
footer a { display: inline-flex; align-items: center; }
.dialog-close { min-width: 44px; }
.progress-head > * { min-width: 0; }
.hero > *, .result-grid > *, .book > div, .how-item > div { min-width: 0; }
.primary { max-width: 100%; overflow-wrap: anywhere; }
/* Crop only the graphic's footer band, not the site's actual legal footer.
   Full-size internal stage preserves the original book hotspot coordinates. */
.book-crop {
  position: relative;
  aspect-ratio: 1536 / 902;
  overflow: hidden;
  /* Prevent keyboard focus from scrolling the clipped stage and revealing its footer. */
  overflow: clip;
  border-radius: 12px;
}
.book-stage { position: absolute; top: 0; left: 0; width: 100%; border-radius: 0; }
.book-stage > img { border-radius: 0; }
.book-depth { background-image: url('../../assets/mockup-biblioteca-navy.png'); }
.book-depth:focus-visible {
  filter: drop-shadow(0 0 6px #fff) brightness(1.3);
}
[aria-invalid="true"] { border-color: #ab2934; }
.consent:has([aria-invalid="true"]) { border-left: 3px solid #ab2934; padding-left: 8px; }
.discount-toast { padding-right: 10px; }
.discount-toast button { min-width: 44px; min-height: 44px; }
.price-comparison s { color: #506c86; }
.discount-caption { color: #506c86 !important; }
.price-arrow, .value-strip { color: #375773; }
.quiz-topline { color: #1767a8; }
.flow-nudge { color: #176da2; }
.book { background: #edf4fb; }
.book:nth-child(3n) .book-index { background: #174c77; border-left-color: #34a8c9; }
@media (max-width: 380px) {
  h1 { font-size: 34px; }
  .micro { flex-wrap: wrap; gap: 8px 14px; }
  .quiz-shell, .result { padding-left: 16px; padding-right: 16px; }
  .quiz-actions { gap: 10px; }
  .quiz-actions .primary { min-width: 130px; padding: 14px; }
  .progress-head > span { max-width: 145px; }
  .discount-ribbon { font-size: 13px; padding: 10px; }
  .price-comparison strong { font-size: 30px; }
  footer nav { flex-wrap: wrap; gap: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .primary:hover, .book-depth:hover, .book-depth:focus-visible { transform: none; }
}