/* Página /catalogo/. Se carga después de /styles.css de la landing y reusa sus
   tokens (--bg, --surface, --brand…), el header, el footer y los botones. */

.pagina-catalogo { background: #06060b; }
.cat-hero { padding: 132px 0 40px; background: radial-gradient(60% 50% at 20% 0%, rgba(var(--brand-rgb), 0.22), transparent 70%); }
.cat-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: 14px; }
.cat-lead { color: var(--muted); font-size: 1.1rem; max-width: 640px; }

.cat-destacado { margin-top: 44px; display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 44px; align-items: center; padding: 32px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.cat-destacado h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 6px 0 12px; }
.cat-destacado p { color: var(--muted); }

.cat-portada { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cat-portada picture { display: block; }
.cat-portada img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; background: var(--surface-2); }
.cat-portada:hover, .cat-portada:focus-visible { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.95); }
.cat-portada:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 4px; }

.cat-seccion { padding-top: 60px; }
.cat-grilla { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cat-card { height: 100%; display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--acento, var(--brand)); scroll-margin-top: 96px; }
.cat-card:target, .cat-destacado:target { box-shadow: 0 0 0 2px var(--acento, var(--brand)); }
.cat-info { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cat-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-2); }
.cat-card h3 { font-size: 1.3rem; }
.cat-card p { color: var(--muted); font-size: 0.95rem; }
.cat-meta { font-size: 0.85rem !important; color: var(--muted) !important; opacity: 0.85; }
.cat-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }

.cat-cta { padding-top: 20px; }
.cat-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 36px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.cat-cta h2 { font-size: 1.6rem; margin-bottom: 6px; }
.cat-cta p { color: var(--muted); max-width: 560px; }
.cat-cta .cat-acciones { margin-top: 0; padding-top: 0; flex: none; }

.nav a[aria-current="page"] { color: var(--text); }

/* ---- Visor (lightbox con el libro) ---- */
.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #05060b; color: var(--text); display: none; flex-direction: column; }
.visor[open] { display: flex; }
.visor::backdrop { background: rgba(0, 0, 0, 0.7); }
.visor-barra { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.visor-barra h2 { font-size: 1rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-pag { font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.visor-acciones { display: flex; align-items: center; gap: 8px; }
.visor-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.visor-btn:hover { background: var(--surface-2); }
.visor-btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.visor-escena { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.visor-libro { margin: 0 auto; }
.visor-pagina { background: #fff; overflow: hidden; }
.visor-pagina canvas { display: block; width: 100%; height: 100%; }
.visor-estado { position: absolute; color: var(--muted); font-size: 0.95rem; text-align: center; max-width: 420px; padding: 0 20px; }
.visor-estado a { color: var(--brand-2); }
.visor-estado[hidden] { display: none; }
.visor-abierto { overflow: hidden; }

@media (max-width: 991px) {
  .cat-grilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .cat-hero { padding-top: 110px; }
  .cat-destacado { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .cat-destacado .cat-portada { max-width: 300px; margin: 0 auto; }
  .cat-grilla { grid-template-columns: 1fr; }
  .cat-cta-inner { flex-direction: column; align-items: flex-start; padding: 24px; }
  .visor-barra { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .visor-barra h2 { flex-basis: calc(100% - 52px); }
  .visor-pag { order: 3; }
  .visor-acciones { order: 2; margin-left: auto; }
  .visor-descargar { display: none; }
  .visor-escena { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-portada { transition: none; }
  .cat-portada:hover { transform: none; }
}