/* ═══════════════════════════════════════════════════
   EDITORIAL SEFARDÍ — tienda.css
   Estilos de la tienda: catálogo y ficha de libro
   ═══════════════════════════════════════════════════ */

/* ── Encabezado de sección ── */
.tienda-header {
  margin-bottom:  2rem;
  padding-bottom: 1.25rem;
  border-bottom:  1px solid var(--border);
}
.tienda-eyebrow {
  font-family:    var(--ui-font);
  font-size:      0.68rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--gold);
  opacity:        0.85;
  display:        block;
  margin-bottom:  0.4em;
}
.tienda-title {
  font-family: var(--he-font);
  font-size:   2rem;
  font-weight: 400;
  color:       var(--fg);
  line-height: 1.25;
  margin-bottom: 0.35em;
}
.tienda-desc {
  font-family: var(--ui-font);
  font-size:   0.9rem;
  color:       var(--muted);
  line-height: 1.6;
}

/* ── Catálogo: grid de tarjetas ── */
.book-grid {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

/* ── Tarjeta de libro ── */
.book-card {
  display:         flex;
  gap:             1.4rem;
  padding:         1.25rem;
  border:          1px solid var(--border);
  border-radius:   12px;
  text-decoration: none;
  color:           var(--fg);
  background:      var(--bg);
  transition:      background .15s, border-color .15s, box-shadow .15s;
}
.book-card:hover {
  background:   var(--gold-light);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow:   0 2px 14px rgba(212, 175, 55, 0.12);
  opacity:      1;
}

/* Portada */
.book-cover-wrap { flex-shrink: 0; width: 88px; }

.book-cover {
  width:       88px;
  aspect-ratio: 2/3;
  object-fit:  cover;
  border-radius: 6px;
  box-shadow:  0 2px 10px rgba(0,0,0,0.18);
  display:     block;
}
.book-cover-placeholder {
  width:        88px;
  aspect-ratio: 2/3;
  background:   linear-gradient(160deg, #faf6e8 0%, #f0e9c8 100%);
  border:       1px solid rgba(212,175,55,0.25);
  border-radius: 6px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  box-shadow:   0 2px 8px rgba(0,0,0,0.08);
}
.cover-placeholder-icon {
  width:   52%;
  height:  auto;
  display: block;
  opacity: 0.9;
}

/* Metadatos */
.book-info {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  gap:             0.3em;
}
.book-title {
  font-family: var(--he-font);
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--fg);
  line-height: 1.3;
}
.book-subtitle-he {
  font-family: var(--he-font);
  font-size:   0.82rem;
  color:       var(--muted);
  direction:   rtl;
  unicode-bidi: isolate;
  display:     block;
  line-height: 1.4;
}
.book-author {
  font-family: var(--ui-font);
  font-size:   0.8rem;
  color:       var(--muted);
  font-style:  italic;
}
.book-description {
  font-family:        var(--ui-font);
  font-size:          0.83rem;
  color:              var(--muted);
  line-height:        1.6;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  margin-top:         0.2em;
}

/* Fila inferior de metadatos */
.book-meta-row {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  margin-top:  auto;
  padding-top: 0.7em;
  flex-wrap:   wrap;
}
.book-langs { display: flex; gap: 4px; }

.lang-badge {
  font-family:    var(--ui-font);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          var(--muted);
  background:     var(--btn-group-bg);
  border:         1px solid var(--border);
  border-radius:  4px;
  padding:        1px 6px;
}

.book-price-from {
  font-family: var(--ui-font);
  font-size:   0.78rem;
  color:       var(--muted);
}
.book-price-value {
  font-family: var(--ui-font);
  font-size:   0.88rem;
  font-weight: 700;
  color:       var(--gold);
}
.book-card-cta {
  font-family: var(--ui-font);
  font-size:   0.78rem;
  color:       var(--muted);
  margin-left: auto;
  white-space: nowrap;
  display:     flex;
  align-items: center;
  gap:         3px;
}

/* ════════════════════════════════════
   FICHA DE LIBRO (single)
   ════════════════════════════════════ */

.book-back {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-family: var(--ui-font);
  font-size:   0.82rem;
  color:       var(--muted);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition:  color .12s;
}
.book-back:hover { color: var(--gold); opacity: 1; }

/* Hero: portada + info principal */
.book-hero {
  display:     flex;
  gap:         2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.book-hero-cover { flex-shrink: 0; width: 148px; }
.book-hero-cover img {
  width:       148px;
  aspect-ratio: 2/3;
  object-fit:  cover;
  border-radius: 8px;
  box-shadow:  0 4px 24px rgba(0,0,0,0.20);
  display:     block;
}
.book-hero-cover-placeholder {
  width:        148px;
  aspect-ratio: 2/3;
  background:   linear-gradient(160deg, #f5eecb 0%, #ede3a8 100%);
  border:       1px solid rgba(212,175,55,0.3);
  border-radius: 8px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  box-shadow:   0 4px 20px rgba(0,0,0,0.10);
}

.book-hero-info { flex: 1; min-width: 0; }

.book-hero-eyebrow {
  font-family:    var(--ui-font);
  font-size:      0.68rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--gold);
  opacity:        0.8;
  display:        block;
  margin-bottom:  0.5em;
}

.book-hero-title {
  font-family: var(--he-font);
  font-size:   1.7rem;
  font-weight: 600;
  color:       var(--fg);
  line-height: 1.25;
  margin-bottom: 0.3em;
}
.book-hero-subtitle {
  font-family: var(--he-font);
  font-size:   1rem;
  color:       var(--muted);
  direction:   rtl;
  unicode-bidi: isolate;
  display:     block;
  margin-bottom: 0.6em;
  line-height: 1.5;
}
.book-hero-author {
  font-family: var(--ui-font);
  font-size:   0.9rem;
  color:       var(--muted);
  font-style:  italic;
  margin-bottom: 0.8em;
  display:     block;
}
.book-hero-langs {
  display:       flex;
  gap:           4px;
  margin-bottom: 1rem;
}
.book-hero-from {
  font-family: var(--ui-font);
  font-size:   0.73rem;
  color:       var(--muted);
  display:     block;
  margin-bottom: 0.15em;
}
.book-hero-price {
  font-family: var(--he-font);
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--gold);
}

/* ── Descripción ── */
.book-section {
  margin-bottom: 1.75rem;
}
.book-section-label {
  font-family:    var(--ui-font);
  font-size:      0.68rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--muted);
  opacity:        0.7;
  display:        block;
  margin-bottom:  0.6em;
}
.book-description-full {
  font-family: var(--ui-font);
  font-size:   0.95rem;
  color:       var(--fg);
  line-height: 1.85;
}
.book-description-full p { margin-bottom: 0.75em; }

/* ── Formatos disponibles ── */
.book-formats {
  border:        1px solid var(--border);
  border-radius: 12px;
  overflow:      hidden;
}
.formats-header {
  padding:        0.75rem 1.25rem;
  background:     var(--gold-light);
  border-bottom:  1px solid var(--border);
  font-family:    var(--ui-font);
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--gold);
}
.format-row {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.format-row:last-child { border-bottom: none; }

.format-icon {
  font-size:  1.15rem;
  flex-shrink: 0;
  width:      26px;
  text-align: center;
  opacity:    0.75;
}
.format-text { flex: 1; min-width: 0; }
.format-label {
  font-family: var(--ui-font);
  font-size:   0.88rem;
  font-weight: 600;
  color:       var(--fg);
  display:     block;
}
.format-sublabel {
  font-family: var(--ui-font);
  font-size:   0.73rem;
  color:       var(--muted);
  display:     block;
}
.format-price {
  font-family: var(--ui-font);
  font-size:   0.9rem;
  font-weight: 700;
  color:       var(--gold);
  white-space: nowrap;
  margin-right: 0.5rem;
}

/* ── Botones de compra ── */
.buy-btn {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  gap:          5px;
  padding:      9px 18px;
  background:   var(--gold);
  color:        #ffffff;
  font-family:  var(--he-font);
  font-size:    0.82rem;
  font-weight:  600;
  border-radius: 8px;
  text-decoration: none;
  white-space:  nowrap;
  cursor:       pointer;
  border:       none;
  letter-spacing: 0.01em;
  transition:   opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.buy-btn:hover  { opacity: .87; transform: translateY(-1px); color: #ffffff; }
.buy-btn:active { opacity: .95; transform: translateY(0); }

/* Anular estilos propios de Payhip */
a.payhip-buy-button.buy-btn {
  background:      var(--gold) !important;
  color:           #ffffff !important;
  font-family:     var(--he-font) !important;
  border-radius:   8px !important;
  padding:         9px 18px !important;
  box-shadow:      none !important;
  text-decoration: none !important;
}

/* ── Etiquetas ── */
.book-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.book-tag {
  font-family: var(--ui-font);
  font-size:   0.73rem;
  color:       var(--muted);
  background:  var(--btn-group-bg);
  border:      1px solid var(--border);
  border-radius: 20px;
  padding:     3px 10px;
}

/* ── Divider ── */
.book-divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     1.5rem 0;
}

/* ── Aviso vacío ── */
.tienda-empty {
  text-align: center;
  padding:    3rem 1rem;
  font-family: var(--ui-font);
  font-size:  0.9rem;
  color:      var(--muted);
  opacity:    0.6;
}

/* ════════════════════════════════════
   LANDING — inicio
   ════════════════════════════════════ */
/* Logo en landing */
.editorial-landing-logo-img {
  width:      96px;
  height:     96px;
  object-fit: contain;
  display:    block;
  /* En dark mode el logo es blanco sobre fondo oscuro — invertir */
}
.dark-mode .editorial-landing-logo-img {
  filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(0.88);
}

/* Logo en topbar */
.brand-title {
  display:     flex;
  align-items: center;
  gap:         7px;
}
.brand-logo-icon {
  width:      26px;
  height:     26px;
  object-fit: contain;
  flex-shrink: 0;
  display:    block;
}
.dark-mode .brand-logo-icon {
  filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(0.88);
}

.editorial-landing {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            1rem;
  padding:        1.75rem 0 1.25rem;
}
.editorial-landing-logo {
  font-family: var(--he-font);
  font-size:   2.8rem;
  color:       var(--gold);
  opacity:     0.85;
  line-height: 1;
}
.editorial-landing-title {
  font-family: var(--he-font);
  font-size:   1.8rem;
  font-weight: 400;
  color:       var(--fg);
  line-height: 1.25;
  max-width:   480px;
}
.editorial-landing-desc {
  font-family: var(--ui-font);
  font-size:   0.9rem;
  color:       var(--muted);
  line-height: 1.7;
  max-width:   420px;
}
.editorial-landing-cta {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  padding:      10px 24px;
  background:   var(--gold);
  color:        #ffffff;
  font-family:  var(--he-font);
  font-size:    0.9rem;
  font-weight:  600;
  border-radius: 10px;
  text-decoration: none;
  transition:   opacity .15s, transform .1s;
}
.editorial-landing-cta:hover { opacity: .87; transform: translateY(-1px); color: #ffffff; }

.editorial-landing-siblings {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  justify-content: center;
  font-family: var(--ui-font);
  font-size:   0.75rem;
  color:       var(--muted);
  opacity:     0.5;
  padding-top: 1rem;
  border-top:  1px solid var(--border);
  width:       100%;
}
.editorial-landing-siblings a { color: inherit; }
.editorial-landing-siblings a:hover { color: var(--gold); opacity: 1; }

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 620px) {
  .book-card { gap: 1rem; padding: 1rem; }
  .book-cover-wrap { width: 68px; }
  .book-cover, .book-cover-placeholder { width: 68px; }

  .book-hero { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .book-hero-cover { width: 110px; }
  .book-hero-cover img, .book-hero-cover-placeholder { width: 110px; }
  .book-hero-title { font-size: 1.35rem; }

  .format-row { flex-wrap: wrap; gap: 0.6rem; }
  .format-price { margin-right: 0; }
  .book-meta-row { gap: 0.5rem; }
  .book-card-cta { display: none; }
}