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

    :root {
      --bg:        #f8f6f2;
      --surface:   #ffffff;
      --text-dark: #1a1a1a;
      --text-light:#777;
      --accent:    #c0392b;
      --border:    #e0dbd3;
      --font-d:    'Crimson Text', Georgia, serif;
      --font-b:    'Nunito Sans', sans-serif;
    }

    body {
      background: var(--bg);
      font-family: var(--font-b);
      color: var(--text-dark);
      padding: 40px 16px;
    }

    /* ── Cabecera ── */
    .galeria-header {
      max-width: 1100px;
      margin: 0 auto 28px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    .galeria-header h2 {
      font-family: var(--font-d);
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
    }

    .galeria-header p {
      font-size: 0.8rem;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 4px;
    }

    /* ── Filtro por colección ── */
    .filtro-wrap {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn-filtro {
      padding: 6px 14px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
      font-family: var(--font-b);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.18s;
      color: var(--text-dark);
    }

    .btn-filtro:hover,
    .btn-filtro.activo {
      background: var(--text-dark);
      color: #fff;
      border-color: var(--text-dark);
    }

    /* ── Carrusel ── */
    .galeria-wrapper {
      max-width: 1100px;
      margin: 0 auto;
    }

    .libros-carousel { position: relative; padding: 0 52px; }

    /* ── Tarjeta ── */
    .libro-card {
      display: flex;
      flex-direction: column;
      padding: 0 8px 16px;
      cursor: pointer;
    }

    .libro-cover-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 2 / 3;
      overflow: hidden;
      border-radius: 4px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      background: #ccc;
      transition: box-shadow 0.25s, transform 0.25s;
    }

    .libro-card:hover .libro-cover-wrap {
      box-shadow: 0 10px 28px rgba(0,0,0,0.2);
      transform: translateY(-4px);
    }

    .libro-cover-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Placeholder de portada */
    .portada-placeholder {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-d);
      font-size: 0.8rem;
      color: rgba(255,255,255,0.8);
      text-align: center;
      padding: 12px;
      line-height: 1.5;
    }

    /* Acciones hover */
    .libro-actions {
      position: absolute;
      top: 8px; left: 8px;
      display: flex; flex-direction: column; gap: 5px;
      opacity: 0; transform: translateX(-8px);
      transition: opacity 0.2s, transform 0.2s;
    }
    .libro-card:hover .libro-actions { opacity: 1; transform: translateX(0); }

    .libro-actions button {
      width: 32px; height: 32px; border-radius: 50%; border: none;
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; font-size: 13px; transition: background 0.18s;
    }

    .btn-wishlist { background: var(--accent); color: #fff; }
    .btn-wishlist:hover { background: #e74c3c; }
    .btn-search   { background: #444; color: #fff; }
    .btn-search:hover { background: #111; }

    /* Info */
    .libro-info { margin-top: 12px; padding: 0 2px; }

    .libro-titulo {
      /* font-size: 0.8rem;  */
      font-weight: 600;
      line-height: 1.45; 
      color: var(--text-dark);
      margin-bottom: 6px; min-height: 48px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .libro-precio {
      font-size: 0.82rem; font-weight: 700; color: #555;
    }

    /* ── Flechas Owl ── */
    .owl-prev, .owl-next {
      position: absolute; top: 38%;
      width: 38px; height: 38px;
      background: #fff !important; border-radius: 50% !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.13) !important;
      display: flex !important; align-items: center; justify-content: center;
      transition: background 0.18s !important; z-index: 10;
    }
    .owl-prev { left: 0; }
    .owl-next { right: 0; }
    .owl-prev span, .owl-next span { font-size: 22px !important; color: #111 !important; }
    .owl-dots { display: none !important; }

    /* ── Paginación ── */
    .paginacion-wrap {
      max-width: 1100px;
      margin: 28px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .btn-pag {
      min-width: 36px; height: 36px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      font-family: var(--font-b);
      font-size: 0.82rem; font-weight: 600;
      cursor: pointer;
      transition: all 0.18s;
      color: var(--text-dark);
    }

    .btn-pag:hover:not(:disabled) {
      background: #eee;
    }

    .btn-pag.activo {
      background: var(--text-dark);
      color: #fff;
      border-color: var(--text-dark);
    }

    .btn-pag:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .pag-info {
      font-size: 0.78rem;
      color: var(--text-light);
      margin-left: 8px;
    }

    /* ── Estado de carga ── */
    .loader-overlay {
      display: none;
      position: absolute; inset: 0;
      background: rgba(248,246,242,0.7);
      align-items: center; justify-content: center;
      z-index: 20; border-radius: 4px;
    }
    .loader-overlay.visible { display: flex; }

    .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Mensaje vacío ── */
    .sin-resultados {
      display: none;
      text-align: center;
      padding: 48px 16px;
      color: var(--text-light);
      font-size: 0.9rem;
    }