/* ==== Layout general ficha de libro ==== */

.libro-body {
  font-family: "Cormorant Garamond", serif;
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #f7ecde 0, #e3c9aa 40%, #a56f3d 100%);
  color: #3f291a;
  animation: libroFadeIn 0.5s ease-out both;
}

/* Mantener coherencia con el header de index */
.header-lite {
  background: linear-gradient(to right, #4a2b16, #7b5330);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Contenedor principal */
.book-page {
  display: flex;
  justify-content: center;
  padding: 40px 16px 64px;
}

.book-shell {
  width: 100%;
  max-width: 960px;
  background: linear-gradient(145deg, #f5e6d6, #edd2b5);
  border-radius: 26px;
  padding: 32px 32px 40px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(156, 112, 78, 0.18);
  position: relative;
}

/* ===== Encabezado ===== */

.book-header {
  text-align: center;
  margin-bottom: 28px;
}

.book-tagline {
  font-size: 14px;
  letter-spacing: 1.08em;
  text-transform: uppercase;
  color: rgba(90, 60, 40, 0.7);
  margin-bottom: 6px;
}

.book-title {
  font-size: clamp(32px, 4vw, 40px);
  margin: 0;
  color: #3e2818;
}

.book-author {
  font-size: 18px;
  margin: 8px 0 16px;
  color: rgba(60, 40, 25, 0.9);
}

.book-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.meta-pill {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fdf7f1;
  border: 1px solid rgba(170, 130, 95, 0.45);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.meta-pill.meta-soft {
  background: rgba(255, 255, 255, 0.3);
  border-style: dashed;
}

/* ===== Hero: portada + info ===== */

.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.book-cover {
  margin: 0;
  padding: 14px;
  border-radius: 20px;
  background: radial-gradient(circle at top, #fdfaf5 0, #e7cfb2 80%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(160, 120, 90, 0.4);
}

.book-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.book-info {
  font-size: 30px;
  line-height: 1.6;
  color: #4a3220;
}

.book-section-title {
  font-size: 20px;
  margin: 0 0 10px;
  color: #3e2818;
}

.book-synopsis {
  margin: 0 0 10px;
}

/* ===== Botones ===== */

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.book-btn-primary {
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d8b18b, #b17a4d);
  color: #3e2414;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.book-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.03);
}

.book-btn-ghost {
  border-radius: 999px;
  border: 1px solid rgba(120, 85, 55, 0.5);
  background: rgba(255, 255, 255, 0.4);
  padding: 8px 16px;
  font-size: 15px;
  font-family: "Cormorant Garamond", serif;
  cursor: pointer;
  color: #4a3220;
  transition: background 0.15s ease, transform 0.15s ease;
}

.book-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

/* ===== Bloques extra ===== */

.book-extra {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(140, 100, 70, 0.25);
}

.book-bullets {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 16px;
}

.book-bullets li + li {
  margin-top: 4px;
}

.book-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.related-pill {
  text-decoration: none;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(150, 110, 80, 0.5);
  color: #4a3220;
  transition: background 0.15s ease, transform 0.15s ease;
}

.related-pill:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

/* ===== Animación de entrada ===== */

@keyframes libroFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .book-shell {
    padding: 22px 18px 28px;
    border-radius: 20px;
  }

  .book-hero {
    grid-template-columns: 1fr;
  }

  .book-cover {
    max-width: 260px;
    margin: 0 auto;
  }

  .book-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .book-actions > * {
    width: 100%;
    text-align: center;
  }

  .book-extra {
    margin-top: 16px;
  }
}


/* ================================
   FIXES + MEJORAS PREMIUM LIBRO
   ================================ */

/* 1) Header más compacto (misma estética que index, pero más bajo) */
.header-lite {
  height: 70px !important;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.hl-logo {
  height: 36px !important;
  width: auto;
}

/* 2) Centrar todo visualmente */
.book-page {
  padding-top: 40px !important;
}

/* 3) Tarjeta principal más protagonista */
.book-shell {
  max-width: 900px !important;
  padding: 40px 50px 60px;
}

/* 4) Portada un poco más grande (queda más premium) */
.book-hero {
  grid-template-columns: 320px 1fr;
}

.book-cover {
  max-width: 320px;
}

.book-cover img {
  width: 100%;
  border-radius: 16px;
}

/* 5) Suavizar sombras y darle volumen Apple-style */
.book-shell {
  box-shadow:
    0 30px 60px rgba(0,0,0,0.18),
    0 0 0 1px rgba(160,120,90,0.25);
}

/* 6) Fade-in + slide suave */
.libro-body {
  animation: libroSlideIn 0.7s ease-out both;
}

@keyframes libroSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 7) Poner un máx ancho también al fondo para que no quede vacío */
.book-page {
  max-width: 1500px;
  margin: 0 auto;
}

/* 8) Versión mobile mejorada */
@media (max-width: 768px) {
  .book-hero {
    grid-template-columns: 1fr;
  }

  .book-shell {
    padding: 26px 20px 40px !important;
  }

  .book-cover {
    margin: 0 auto;
    max-width: 260px;
  }
}
/* ============================
   🎨 CARD PRINCIPAL
=============================== */
.book-shell {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 4.2rem);
  border-radius: 30px;
  background: var(--cream-paper, #f8f1e4);
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 20px 60px rgba(0,0,0,.14);
  animation: fadeUp .55s ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================
   📚 ENCABEZADO
=============================== */
.book-header {
  text-align: center;
  margin-bottom: 2.6rem;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.book-tagline {
  font-size: 1.72rem;
  opacity: .6;
  letter-spacing: .12rem;
  text-transform: uppercase;
}

/* ============================
   🟤 TÍTULO DEL LIBRO
=============================== */
.book-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4.0rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 26px auto 12px auto;
  letter-spacing: .6px;
  background: linear-gradient(180deg,#5c3a22,#b58963 40%,#5c3a22);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 1px 3px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInBookTitle .8s ease forwards .22s;
}

@keyframes fadeInBookTitle {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================
   👤 AUTOR
=============================== */
.book-author {
  text-align: center;
  font-size: clamp(2.15rem,2vw,1.35rem);
  color: #8b725f;
  margin-bottom: 1.2rem;
}

/* ============================
   🎖 META PILLS
=============================== */
.meta-pill {
  background: rgba(180,150,120,.18);
  border: 1px solid rgba(120,90,60,.35);
  padding: .48rem 1rem;
  border-radius: 999px;
  font-size: 1.88rem;
  font-weight: 500;
  color: #6b523d;
  backdrop-filter: blur(4px);
  display: inline-block;
  margin: 0 .2rem;
}

/* ============================
   🖼 PORTADA + INFO
=============================== */
.book-hero {
  display: flex;
  gap: 2.4rem;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 2.4rem;
}

.book-cover img {
  width: clamp(180px, 40vw, 260px);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.22),
              0 0 0 3px rgba(255,230,190,.45);
  opacity: 0;
  transition: opacity .35s ease-out, transform .30s, box-shadow .30s;
}

.book-cover img.loaded {
  opacity: 1;
}

.book-cover img:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.28),
              0 0 0 3px rgba(255,230,180,.6);
}

@media (max-width: 768px) {
  .book-hero { flex-direction: column; text-align:center; }
  .book-cover img { margin-inline:auto; }
}

/* ============================
   🟠 BOTONES
=============================== */
.book-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.4rem;
}

.book-btn-primary {
  background: linear-gradient(180deg,#c9a77c,#8f6a47);
  padding: .7rem 1.4rem;
  border-radius: 14px;
  color: white;
  font-weight: 500;
  border: none;
  transition: filter .25s, transform .2s;
}

.book-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.book-btn-ghost {
  border: 1px solid #b48552;
  background: transparent;
  padding: .7rem 1rem;
  border-radius: 14px;
  transition: all .25s;
}

.book-btn-ghost:hover {
  background: #f1e4d2;
  border-color: #6e5338;
}

/* ============================
   ✒️ TEXTO EDITORIAL
=============================== */
.long-explain {
  font-size: clamp(1rem,1.25vw,1.15rem);
  line-height: 1.65;
  color: #443527;
  opacity: .92;
  margin-top: 2.2rem;
  margin-bottom: 3rem;
}

.long-explain p + p {
  margin-top: 1rem;
}

/* ============================
   🟫 SECCIONES
=============================== */
.book-extra {
  border-top: 1px solid rgba(90,70,50,.22);
  padding-top: 2rem;
  margin-top: 2.6rem;
}

.book-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  margin-bottom: .8rem;
  color: #3e2d22;
}

.book-bullets li {
  line-height: 1.55;
  margin-bottom: .45rem;
}

/* ============================
   🟣 RELATED LINKS
=============================== */
.related-pill {
  display: inline-block;
  padding: .55rem 1.1rem;
  border-radius: 12px;
  font-size: .82rem;
  border: 1px solid rgba(140,110,80,.35);
  background: rgba(255,255,255,.55);
  transition: .25s;
}

.related-pill:hover {
  background: rgba(255,255,255,.85);
  border-color: rgba(120,90,60,.8);
  transform: translateY(-2px);
}

/* ============================
   📱 RESPONSIVE FIX
=============================== */
.book-page {
  min-height: calc(100vh - 180px);
  display: flex;
  justify-content: center;
}

.ft-minimal {
  color: #efe7dd !important;
  opacity: .92;
  font-size: .9rem;
}

.ft-minimal a {
  color: #f3e8d6 !important;
  transition: opacity .25s ease;
}

.ft-minimal a:hover {
  opacity: 1;
}

.ft-minimal .credit a {
  font-weight: 500;
  background: linear-gradient(180deg,#d8b98a,#b4885c);
  -webkit-background-clip: text;
  color: transparent;
}


/* ============================
   🟤 SECCIÓN POR QUÉ LEERLO
=============================== */

.book-extra.highlight-block {
  position: relative;
  margin-top: 3.2rem;
  padding-top: 2rem;
}

/* ✨ Línea editorial decorativa */
.book-extra.highlight-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c29a6b, #e4c9a0);
  opacity: .65;
}

/* 🖋 Título más editorial */
.book-extra.highlight-block .book-section-title {
  font-size: 1.85rem;
  letter-spacing: 0.4px;
  margin-bottom: 1rem;
  background: linear-gradient(180deg,#4b392e,#b8a18a);
  -webkit-background-clip: text;
  color: transparent;
}

/* 💡 Bullets más refinados */
.book-extra.highlight-block .book-bullets li {
  font-size: 1.08rem;
  padding-left: .4rem;
  line-height: 1.55;
  margin-bottom: .65rem;
  opacity: .92;
}

/* Punto de lista elegante */
.book-extra.highlight-block .book-bullets li::marker {
  color: #b1875e;
  font-size: 1.2rem;
}


.related-card {
  position: relative;
  margin-top: 3rem;
  padding: 1.8rem 1.6rem 1.9rem;
  border-radius: 18px;

  background:
    radial-gradient(140% 160% at 12% 0,
      rgba(255, 255, 255, .68),
      rgba(240, 225, 203, .36) 60%,
      rgba(226, 206, 182, .32)),
    linear-gradient(180deg, #f6efe4, #e8d9c7);

  border: 1px solid rgba(120, 90, 60, .28);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .14),
    0 6px 14px rgba(0, 0, 0, .08),
    inset 0 1px 0 rgba(255, 255, 255, .55);

  backdrop-filter: blur(10px);
}

.related-card .book-section-title {
  margin-bottom: 1.2rem;
  font-size: 1.55rem;
  background: linear-gradient(180deg,#5f4636,#bfa07a);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  letter-spacing: .4px;
}

/* Pills dentro de la tarjeta */
.related-card .related-pill {
  display: inline-block;
  margin: .35rem .25rem;
  padding: .6rem 1.2rem;
  border-radius: 12px;
  font-size: 1.9rem;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(140,110,80,.35);
  backdrop-filter: blur(5px);
  transition: all .25s;
}

.related-card .related-pill:hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(120,90,60,.8);
  transform: translateY(-2px);
}

.book-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.book-bullets li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .55rem;
  line-height: 1.58;
  font-size: clamp(.97rem, 1.2vw, 1.05rem);
  color: #47362a;
}




.book-extra {
  border-top: 1px solid rgba(100,80,60,.18);
  padding-top: 1.7rem;
  margin-top: 2.4rem;
}


.book-actions-ai {
  text-align: center;
  margin-top: 1.6rem;
  margin-bottom: 2.4rem;
}

#aiChatBtn.btn-ai {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  height: var(--btn-h, 52px); /* 📏 antes 46px */
  padding: 12px 24px; /* 📐 más aire */
  border: none;
  border-radius: var(--btn-radius, 16px); /* 🧊 redondeo elegante */
  background: linear-gradient(145deg, #cdb08b, #e5d5c2);
  color: #3d2c1f;
  font: 500 clamp(1.51rem, 3.6vw, 1.51rem) / 1.3 'Cormorant Garamond', serif;
  letter-spacing: .3px;
  box-shadow:
    0 6px 14px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer;
  isolation: isolate;
  transition:
    transform .2s ease-out,
    filter .22s ease,
    box-shadow .22s ease;
}

/* Hover */
#aiChatBtn.btn-ai:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
  box-shadow:
    0 10px 22px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Active */
#aiChatBtn.btn-ai:active {
  transform: translateY(1px) scale(.98);
  filter: brightness(.94);
  box-shadow:
    0 4px 10px rgba(0,0,0,.25),
    inset 0 2px 4px rgba(0,0,0,.2);
}
/* ==========================
   🧊 VISION PRO CHAT FINAL
========================== */

/* CONTENEDOR */
.vision-chat {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 56px 0 80px;
}

/* VENTANA */
.vision-window {
  width: 100%;
  max-width: 920px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 24px 64px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

/* TOPBAR */
.vision-topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 20px;
  border-bottom: 1px solid rgba(120,90,60,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(245,235,220,.6));
  font-family: "Cormorant Garamond", serif;
}

/* DOTS */
.vision-dots {
  display:flex;
  gap:6px;
}
.vision-dots .d {
  width:12px; height:12px;
  border-radius:50%;
  opacity:.92;
  background-image: linear-gradient(145deg,rgba(255,255,255,.45),transparent);
  box-shadow: inset 0 0 2px rgba(0,0,0,.18);
  transition:.25s;
}
.d.red    { background:#E8D8C5 }
.d.yellow { background:#C4A17A }
.d.green  { background:#8B6743 }

.vision-dots .d:hover {
  transform:scale(1.15);
  filter:brightness(1.15);
}

/* TITLE */
.vision-title {
  font-size: clamp(1.4rem, 2vw, 1.25rem);
  font-weight: 600;
  color:#4b392a;
}

/* MENU */
.vision-collapse{
  all:unset;
  margin-left:auto;
  cursor:pointer;
  font-size:1.6rem;
  opacity:.45;
  transition:.25s;
}
.vision-collapse:hover { opacity:.8 }

/* BODY */
.vision-body {
  max-height: clamp(360px,45vh,640px);
  overflow-y:auto;
  padding: 22px 18px;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}

/* BUBBLES */
.chat-bubble{
  font-family:"Cormorant Garamond", serif;
  font-size: clamp(1.3rem, 1.6vw, 1.15rem);
  line-height:1.55;
  border-radius:16px;
  padding:14px 18px;
  margin-bottom: 14px;
  max-width:92%;
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
}

/* USER */
.chat-bubble.user{
  margin-left:auto;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(180,160,140,.32);
  color:#3B2A1C;
}

/* IA */
.chat-bubble.ia{
  margin-right:auto;
  background: rgba(240,225,205,.55);
  border:1px solid rgba(120,90,60,.25);
  color:#4A3A2A;
}

/* IA NAME */
.chat-bubble strong{
  font-size:1.15rem;
  font-weight:600;
  display:block;
  margin-bottom:6px;
}

/* INPUT */
.vision-form {
  display:flex;
  gap:12px;
  padding:18px;
  background:rgba(255,255,255,.42);
  border-top:1px solid rgba(120,90,60,.22);
}
#chatInput{
  flex:1;
  font-family:"Cormorant Garamond", serif;
  font-size: clamp(1.35rem,2vw,1.15rem);
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(120,90,60,.22);
  background:rgba(255,255,255,.92);
}

/* BUTTON */
.vision-send {
  font-size: clamp(1.1rem,1.4vw,1rem);
  padding: 14px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg,#d6b28a,#b8926e);
  color:#3b2a22;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:.25s;
}
.vision-send:hover { filter:brightness(1.1) }


/* 📱 Mantener tamaño ORIGINAL en móviles */
@media (max-width: 480px) {



}.related-card .related-pill {
  font-size: 1.75rem !important;
  padding: .7rem 1.2rem !important;
  border-radius: 12px !important;
}

/* 🖥 Reducir SOLO en desktop */
@media (min-width: 900px) {

  .related-card {
    padding: 1.4rem 1.2rem !important;
    max-width: 720px !important;
    margin-inline: auto !important;
  }

  .related-card .book-section-title {
    font-size: 1.22rem !important;
    margin-bottom: .6rem !important;
  }

  .related-card .related-pill {
    font-size: .86rem !important;
    padding: .42rem .8rem !important;
    border-radius: 9px !important;
  }
}


/* 📱 AUMENTAR TAMAÑO EN RESPONSIVE */
@media (max-width: 900px) {

  .related-card {
    padding: 2rem 1.6rem !important;
    border-radius: 18px !important;
  }

  .related-card .book-section-title {
    font-size: 1.55rem !important;
    margin-bottom: 1.2rem !important;
    letter-spacing: .4px !important;
  }

  .related-card .related-pill {
    font-size: 1.25rem !important;
    padding: 0.85rem 1.6rem !important;
    border-radius: 14px !important;
    margin: .45rem auto !important;
    display: block !important;
    width: fit-content !important;
  }

  .book-related {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .65rem !important;
  }
}


/* 📱 RESPONSIVE – PASTILLAS MÁS GRANDES */
@media (max-width: 900px) {

  .related-card {
    padding: 2.2rem 1.5rem !important;
  }

  .book-related {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .70rem !important;
  }

  .related-pill {
    font-size: 1.32rem !important;
    padding: .85rem 1.7rem !important;
    border-radius: 14px !important;
    width: auto !important;
    text-align: center !important;
    display: block !important;
  }
}


.related-pill {
  transition: all .25s ease !important;
  backdrop-filter: blur(6px) saturate(150%) !important;
}

.related-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(120,90,60,.85) !important;
  box-shadow: 0 4px 18px rgba(120,90,60,.16) !important;
}


/* 🍫 FIX ABSOLUTO DE LEGIBILIDAD */
.related-card .book-section-title {
  font-size: clamp(1.9rem, 4vw, 2.4rem) !important;
  text-align: center !important;
  margin-bottom: 1.2rem !important;
}

/* 📚 PASTILLAS */
.related-pill {
  font-size: clamp(1.55rem, 4vw, 1.95rem) !important;
  padding: 1rem 1.8rem !important;
  border-radius: 16px !important;
  display: block !important;
  width: fit-content !important;
  margin-inline: auto !important;
}

/* 📱 SOLO PARA MÓVIL – MÁS GRANDE AÚN 💥 */
@media (max-width: 600px) {
  .related-pill {
    font-size: 2.2rem !important;   /* 🔥 ← tamaño libro tapa blanda */
    padding: 1.2rem 2rem !important;
  }

  .related-card {
    padding: 2.4rem 1.8rem !important;
  }
}


/* ===========================
   📚 PILL · “Más libros cortos…”
   =========================== */

.related-pill {
  display: inline-block !important;
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.45rem, 2.9vw, 1.85rem) !important;
  letter-spacing: .25px !important;

  padding: 1rem 1.8rem !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(150,115,80,.35) !important;
  color: #463424 !important;

  backdrop-filter: blur(6px) saturate(150%) !important;
  transition: all .25s ease !important;
}

/* 💎 HOVER */
.related-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(120,90,60,.75) !important;
  box-shadow: 0 4px 16px rgba(150,110,70,.15) !important;
}

/* 📱 MÓVIL → Grande de verdad */
@media (max-width: 600px) {
  .related-pill {
    font-size: 2.15rem !important;
    padding: 1.25rem 2rem !important;
    border-radius: 16px !important;
    display: block !important;
    width: fit-content !important;
    margin-inline: auto !important;
  }
}

/* ⛔️ DETENEMOS CUALQUIER ESTILO ANTERIOR */
.book-extra.related-card .book-related .related-pill {
  all: unset !important;
}

/* 🎯 ESTILO FINAL · LEGIBLE SIEMPRE */
.book-extra.related-card .book-related .related-pill {
  display: inline-block !important;
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 500 !important;

  /* 💥 TAMAÑO REAL LEGIBLE */
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  line-height: 1.4 !important;

  padding: 1.2rem 2rem !important;
  margin: .5rem auto !important;

  color: #3b2a1c !important;
  background: rgba(255,255,255,.75) !important;
  border: 2px solid rgba(140,100,70,.45) !important;

  border-radius: 16px !important;
  cursor: pointer !important;
  text-align: center !important;

  backdrop-filter: blur(8px) saturate(160%) !important;
  transition: all .2s ease !important;
  width: fit-content !important;
}

/* ===========================================
   🚀 BOOST DEFINITIVO DE TAMAÑOS LIBREOS
   =========================================== */

/* 🧠 TITULAR DEL CHAT */
.vision-title {
  font-size: 2.6rem !important;
  letter-spacing: .5px;
}

/* 💬 MENSAJES DE USUARIO */
.chat-bubble.user {
  font-size: 2.2rem !important;
  padding: 18px 22px !important;
  border-radius: 16px !important;
}

/* 🤖 MENSAJE DE IA */
.chat-bubble.ia,
.ia-text p {
  font-size: 2.2rem !important;
  line-height: 1.56 !important;
}

/* ✍ INPUT DEL CHAT */
#chatInput {
  font-size: 2.3rem !important;
  padding: 20px 22px !important;
  border-radius: 18px !important;
}

/* 🚀 BOTÓN */
.vision-send {
  font-size: 2.1rem !important;
  padding: 18px 26px !important;
  border-radius: 16px !important;
}

/* 📖 TEXTO PRINCIPAL DEL LIBRO */
.book-extra.long-explain p {
  font-size: 2.05rem !important;
  line-height: 1.62 !important;
}

/* 📌 SUBTÍTULOS (Por qué leerlo, etc.) */
.book-section-title {
  font-size: 2.6rem !important;
}

/* 🟤 PASTILLAS / RELATED */
.related-pill {
  font-size: 2.1rem !important;
  padding: 1rem 2rem !important;
  border-radius: 18px !important;
}

/* 💡 META PILLS */
.meta-pill {
  font-size: 1.8rem !important;
  padding: .6rem 1.2rem !important;
}

/* ⚡ AJUSTE EXTRA EN MÓVIL */
@media (max-width: 600px) {
  .chat-bubble.user,
  .chat-bubble.ia,
  #chatInput,
  .vision-send,
  .ia-text p {
    font-size: 2.6rem !important;
  }

  .book-extra.long-explain p {
    font-size: 2.4rem !important;
  }

  .related-pill {
    font-size: 2.5rem !important;
  }

  .book-section-title {
    font-size: 3rem !important;
    text-align: center !important;
  }
}


/* ===========================================
   🚀 BOOST ABSOLUTO DE TIPOGRAFÍA LIBREOS
   (¡Se aplica a TODO lo que has pedido!)
=========================================== */

/* 🟤 FICHA – TAGLINE */
.book-tagline {
  font-size: 2.2rem !important;
  letter-spacing: 0.25rem !important;
  opacity: .8 !important;
}

/* 🏰 TÍTULO DEL LIBRO */
.book-title {
  font-size: clamp(4.2rem, 6vw, 5.4rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.4rem !important;
}

/* ✍️ AUTOR */
.book-author {
  font-size: 2.4rem !important;
  opacity: .9 !important;
  margin-bottom: 1.6rem !important;
}

/* 🟤 PILLS DE METADATOS */
.meta-pill {
  font-size: 2.05rem !important;
  padding: .75rem 1.4rem !important;
  border-radius: 999px !important;
}

.meta-pill.meta-soft {
  opacity: .85 !important;
  font-style: italic !important;
}

/* 📏 SEPARACIÓN ENTRE PILLS */
.book-meta-row {
  gap: 14px !important;
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
}

/* ⚡ BOTÓN “CONVERSAR CON SUS IDEAS“ */
#aiChatBtn.btn-ai {
  font-size: 2.4rem !important;
  padding: 40px 28px !important;
  border-radius: 18px !important;
  letter-spacing: .4px !important;
}

#aiChatBtn.btn-ai:hover {
  transform: translateY(-3px) scale(1.03) !important;
}

/* 🧲 OPCIÓN: Haz que el botón sea PROTAGONISTA */
.book-actions-ai {
  margin-top: 2.4rem !important;
  margin-bottom: 2.2rem !important;
  text-align: center !important;
}

/* 📱 MOBILE MEGA MODE */
@media (max-width: 600px) {

  .book-tagline { font-size: 2.6rem !important; }
  .book-title   { font-size: 6rem !important; }
  .book-author  { font-size: 3rem !important; }

  .meta-pill {
    font-size: 2.6rem !important;
    padding: 1rem 1.8rem !important;
  }

  #aiChatBtn.btn-ai {
    font-size: 2.9rem !important;
    padding: 24px 32px !important;
  }
}


/* ===========================
   🚀 BOOST – SECCIÓN LECTURA
=========================== */

.book-extra.reading-card {
  margin-top: 3.2rem !important;
  padding-top: 2.4rem !important;
  border-top: 2px solid rgba(120,90,60,.28) !important;
}

/* 🟤 TÍTULO */
.book-extra.reading-card .book-section-title {
  font-size: clamp(2.4rem, 3.4vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  margin-bottom: 1.6rem !important;
  background: linear-gradient(180deg,#5a3a26,#b89774);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* 📌 BULLETS */
.book-extra.reading-card .book-bullets li {
  font-size: clamp(1.55rem, 2vw, 1.95rem) !important;
  line-height: 1.75 !important;
  margin-bottom: 1.1rem !important;
  color: #3b2a1c !important;
  opacity: .95 !important;
  padding-left: 1.6rem !important;
  position: relative !important;
}



/* 📱 MOBILE → MÁS LEGIBLE AÚN */
@media (max-width: 600px) {
  .book-extra.reading-card .book-section-title {
    font-size: 3.2rem !important;
  }
  .book-extra.reading-card .book-bullets li {
    font-size: 2.2rem !important;
    margin-bottom: 1.4rem !important;
  }
}


/* ============================================================
   🚀 BOOST — SECCIÓN "Si te gusta, quizá te encanten…"
============================================================ */

/* 🎁 Contenedor general */
.book-extra.related-card {
  padding: 3rem 2.4rem !important;
  margin-top: 4rem !important;
  border-radius: 22px !important;
  border: 2px solid rgba(140,100,70,.25) !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.75),
    rgba(242,227,205,.55)
  ) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* ✨ Título */
.book-extra.related-card .book-section-title {
  font-size: clamp(2.3rem, 3vw, 3rem) !important;
  text-align: center !important;
  letter-spacing: .4px !important;
  margin-bottom: 2.2rem !important;
  background: linear-gradient(180deg,#5f4636,#c9a57d);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* 🟤 Pills */
.book-extra.related-card .related-pill {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto 1.4rem auto !important;
  padding: 1.3rem 2.2rem !important;
  border-radius: 16px !important;

  font-family: "Cormorant Garamond", serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.65rem, 2.5vw, 2.15rem) !important;
  letter-spacing: .25px !important;
  text-align: center !important;

  color: #3b2a1c !important;
  background: rgba(255,255,255,.75) !important;
  border: 2px solid rgba(140,100,70,.45) !important;
  backdrop-filter: blur(6px) saturate(150%) !important;
  transition: all .25s ease !important;
}

/* ✨ Hover mágico */
.book-extra.related-card .related-pill:hover {
  transform: translateY(-3px) scale(1.04) !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(120,90,60,.85) !important;
  box-shadow: 0 6px 20px rgba(120,90,60,.18) !important;
}

/* 📱 MOBILE: versión XXL */
@media (max-width: 600px) {
  .book-extra.related-card .related-pill {
    font-size: 2.3rem !important;
    padding: 1.5rem 2.4rem !important;
    width: 100% !important;
  }
}


.vision-topbar {
  height: clamp(70px, 10vw, 105px); /* adaptable sin deformar */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px; /* equilibrio visual */
  padding-inline: clamp(16px, 4vw, 32px);
  border-bottom: 1px solid rgba(120, 90, 60, .18);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .92),
      rgba(245, 235, 220, .72)
  );
  font-family: "Cormorant Garamond", serif;
  backdrop-filter: blur(18px) saturate(170%);
}

.vision-title {
  font-size: clamp(2rem, 2.6vw, 2.8rem) !important;
  font-weight: 600;
  background: linear-gradient(180deg,#4b392a,#b89774);
  -webkit-background-clip: text;
  color: transparent;
}


/* ============================
   🎯 ESTILO EXACTO FOOTER
============================ */

.ft-minimal {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.95rem;
  text-align: center;
  padding: 20px 0;
  color: #e6cfa3;
  letter-spacing: .02em;
  line-height: 2;
}

/* 📱 RESPONSIVE */
@media (max-width: 560px) {
  .ft-minimal {
    font-size: 1.85rem;
    line-height: 2;
  }
}


/* ================================
   🏛 FIX FOOTER LOGO CENTRADO
================================ */

footer.ft-minimal {
  text-align: center;
  padding: 28px 0 !important;
}

/* 🔹 Contenedor logo */
footer.ft-minimal .brand {
  display: block !important;
  width: 100%;
  margin: 0 auto 14px auto !important;
  text-align: center !important;
}

/* 🖼 Imagen del logo */
footer.ft-minimal .brand-logo {
  display: block !important;
  margin: 0 auto !important;
  width: 200px !important;    /* ⬅ ajusta si quieres */
  height: auto !important;
  opacity: 1 !important;
}

/* ❌ Quitar texto sobrante si la imagen no carga */
footer.ft-minimal .brand span,
footer.ft-minimal .brand::after,
footer.ft-minimal .brand::before {
  display: none !important;
}


.ft-minimal .credit, .ft-minimal .tag {
    color: #e6cfa3;
    font-size: 2.25rem !important;
}

/* === MODAL OVERLAY === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-overlay.hidden {
  display: none;
}

/* === CONTENEDOR === */
.modal-bookshop {
  background: linear-gradient(160deg,#fff7ef,#e8d2b8);
  border-radius: 22px;
  padding: 32px 38px;
  width: clamp(300px,70vw,420px);
  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.4);
  text-align: center;
  animation: fadeUp .45s ease-out both;
}

/* === TITULO === */
.modal-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  color: #4a2e1c;
  margin-bottom: 6px;
}

/* === SUB === */
.modal-sub {
  font-size: 1.05rem;
  opacity: .7;
  margin-bottom: 22px;
}

/* === BOTONES === */
.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.buy-btn {
  display: block;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  transition: .25s;
}

.buy-btn.amazon {
  background: linear-gradient(145deg,#cfa878,#b68958);
  color: #fff;
}

.buy-btn.amazon:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.buy-btn.audible {
  background: rgba(255,255,255,.65);
  color: #543720;
  border: 1px solid rgba(120,90,60,.4);
}

.buy-btn.audible:hover {
  background: rgba(255,255,255,.85);
  transform: translateY(-2px);
}

/* CERRAR */
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  opacity: .5;
  cursor: pointer;
}
.modal-close:hover {
  opacity: 1;
}


/* ============================
   📖 MODAL COMPRA LIBRO
============================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay.hidden {
  display: none;
}

.buy-modal {
  padding: 32px;
  background: linear-gradient(180deg, #f7f2eb, #efe6dd);
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  width: clamp(300px, 70vw, 430px);
  text-align: center;
  position: relative;
  animation: fadeUp 0.4s ease-out both;
}

.modal-title {
  font-size: 1.8rem;
  margin-bottom: 6px;
  font-family: "Cormorant Garamond", serif;
  color: #4d3727;
}

.modal-sub {
  font-size: 1.05rem;
  opacity: 0.7;
  margin-bottom: 22px;
}

.buy-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.buy-options button {
  width: 70%;
  max-width: 420px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(94, 62, 39, 0.35);
  background: linear-gradient(135deg, #f2e4d5 0%, #d6b796 40%, #c59b77 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55),
    inset 0 -1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: #4d3727;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.buy-options button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-arrow {
  font-size: 1.4rem;
  opacity: 0.6;
}

/* Cerrar modal */
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 1.4rem;
  background: transparent;
  border: none;
  opacity: 0.5;
  cursor: pointer;
}
.modal-close:hover {
  opacity: 1;
}

/* Fade up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.book-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  height: var(--btn-h, 52px);
  padding: 12px 24px;

  border: none;
  border-radius: var(--btn-radius, 16px);

  /* 🎨 Degradado más claro */
  background: linear-gradient(
    145deg,
    #f5eadc 0%,
    #e9dcc7 45%,
    #dfcfb8 100%
  );

  /* 🟤 Texto aún legible, sin perder tu estética */
  color: #3a2a1d;

  font: 500 clamp(1.51rem, 3.6vw, 1.51rem) / 1.3 'Cormorant Garamond', serif;
  letter-spacing: .3px;

  /* 💫 Sombras más suaves */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 2px rgba(0, 0, 0, .05);

  cursor: pointer;
  isolation: isolate;

  transition:
    transform .2s ease-out,
    filter .22s ease,
    box-shadow .22s ease;
}

.book-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.book-btn-primary:active {
  transform: translateY(0);
  filter: brightness(.88);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .18),
    inset 0 -1px 3px rgba(0, 0, 0, .24);
}


/* =========================================
   BOTÓN "COMPRAR LIBRO" — versión elegante
========================================= */
.buy-button {
  display: inline-flex;
  margin-inline: auto;
  margin-top: 14px;
  padding: 8px 22px;

  font-family: "Cormorant Garamond", serif;
  font-size: 0.88rem;
  letter-spacing: .25px;
  color: #6a5038;

  background: linear-gradient(135deg, #f6eee4, #e8d8c7);
  border: 1px solid rgba(140, 110, 80, .28);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.75),
    0 2px 6px rgba(0,0,0,.12);

  cursor: pointer;
  transition: all .25s ease;
}

.buy-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    0 4px 12px rgba(0,0,0,.18);
}

.buy-button:active {
  transform: translateY(0);
  filter: brightness(.96);
}


.buy-button{

padding: 24px 121px;
font-size: 30px;

}

/* ============================
   MODAL DE COMPRA — VERSIÓN XL
=============================*/
#buyModal .modal {
  width: min(420px, 88vw);
  padding: 32px 36px;
  border-radius: 22px;

  background: linear-gradient(180deg, #faf4ec, #f0e5da);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 22px 48px rgba(0,0,0,.35);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;

  animation: fadeUp .35s ease forwards;
}

/* Título */
#buyModal .modal-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.28rem;
  font-weight: 600;
  color: #5b4632;
}

/* Subtítulo */
#buyModal .modal-sub {
  font-size: .82rem;
  color: rgba(90,60,40,.75);
  margin-top: -8px;
  margin-bottom: 8px;
}

/* Wrapper botones */
#buyModal .modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* BOTONES */
#buyModal .buy-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  letter-spacing: .25px;
  text-align: center;
  cursor: pointer;

  border: 1px solid rgba(120,95,70,.32);
  background: linear-gradient(135deg, #ebdccb, #d6b99a);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.7),
    0 3px 10px rgba(0,0,0,.18);

  transition: all .25s ease;
}

#buyModal .buy-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#buyModal .buy-btn:active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* 🧹 Evitamos que se vea minúsculo en móvil */
@media (max-width: 480px) {
  #buyModal .modal {
    width: 92vw;
    padding: 26px;
  }
}


@keyframes fadeUp {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}


/* ============================
   MODAL DE COMPRA — XXL VERSION
=============================*/
#buyModal .modal {
  width: min(540px, 92vw);
  padding: 48px 42px;
  border-radius: 26px;

  background: linear-gradient(180deg, #fff9f1, #efe3d5);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 32px 60px rgba(0,0,0,.45);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;

  animation: fadeUp .35s ease forwards;
}

/* TITULAR GRANDE — MÁS PRESENCIA */
#buyModal .modal-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.65rem;
  font-weight: 600;
  text-align: center;
  color: #543c2a;
  letter-spacing: .5px;
}

/* SUB */
#buyModal .modal-sub {
  font-size: 1.05rem;
  text-align: center;
  color: rgba(90,60,40,.75);
  margin-top: -14px;
  line-height: 1.45;
}

/* BOTONERA */
#buyModal .modal-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* BOTONES XXL */
#buyModal .buy-btn {
  width: 100%;
  padding: 16px 22px;

  border-radius: 16px;
  border: 1px solid rgba(130, 100, 70, .32);

  font-family: "Cormorant Garamond", serif;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: .35px;
  text-align: center;

  background: linear-gradient(145deg, #e9d6be, #d0b18a);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.8),
    inset 0 -2px 4px rgba(0,0,0,.1),
    0 5px 16px rgba(0,0,0,.18);

  cursor: pointer;
  transition: all .22s ease;
}

#buyModal .buy-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

#buyModal .buy-btn:active {
  transform: translateY(0);
  filter: brightness(.94);
}

/* MODAL EN MOVIL */
@media (max-width: 480px) {
  #buyModal .modal {
    width: 94vw;
    padding: 38px 30px;
  }

  #buyModal .modal-title {
    font-size: 1.45rem;
  }

  #buyModal .buy-btn {
    font-size: 1.1rem;
    padding: 14px 18px;
  }
}

/* Animación */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(18px); }
  to   { opacity:1; transform: translateY(0); }
}


/* ============================
   🛍️ MODAL DE COMPRA — ULTRA XXL
=============================*/

#buyModal .modal {
  width: min(680px, 95vw);       /* MÁS ANCHO */
  padding: 56px 48px;           /* MÁS ALTO + ESPACIO */
  border-radius: 28px;

  background: linear-gradient(180deg, #fffaf4 0%, #efe4d8 100%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 40px 70px rgba(0,0,0,.45);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;

  animation: fadeUp .35s ease forwards;
}

/* TITULAR */
#buyModal .modal-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 4.8vw, 2.2rem);
  font-weight: 600;
  text-align: center;
  color: #4a3325;
  letter-spacing: .6px;
}

/* SUB TEXTO */
#buyModal .modal-sub {
  font-size: clamp(1.15rem, 3.6vw, 1.3rem);
  text-align: center;
  color: rgba(80,50,30,.75);
  max-width: 460px;
  line-height: 1.55;
  margin-top: -14px;
  font-size: 30px;
}

/* CONTENEDOR DE BOTONES */
#buyModal .modal-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* BOTONES ULTRA XXL */
#buyModal .buy-btn {
  width: 100%;
  max-width: 520px;             /* Precioso centrado */
  padding: 20px 26px;

  border-radius: 18px;
  border: 1px solid rgba(120, 90, 60, .28);

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: .35px;
  text-align: center;

  background: linear-gradient(145deg, #ead8c1, #d2b592);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.8),
    inset 0 -2px 4px rgba(0,0,0,.12),
    0 7px 20px rgba(0,0,0,.18);

  cursor: pointer;
  transition: all .22s ease;
}

#buyModal .buy-btn:hover {
  filter: brightness(1.10);
  transform: translateY(-2px);
}

#buyModal .buy-btn:active {
  transform: translateY(0);
  filter: brightness(.92);
}

/* =========== 📱 MOBILE OPTIMIZACIÓN REAL =========== */
@media (max-width: 480px) {
  #buyModal .modal {
    width: 95vw;
    padding: 44px 30px;
    gap: 28px;
  }

  #buyModal .buy-btn {
    padding: 18px 20px;
    font-size: 1.35rem;
  }
}

/* ANIMACIÓN DEL MODAL */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(25px); }
  to   { opacity:1; transform: translateY(0); }
}




#buyModal .buy-btn-full {
  width: 100%;
  max-width: 420px;
  padding: 18px 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2e4d5 0%, #d6b796 40%, #c59b77 100%);
  border: 1px solid rgba(94, 62, 39, 0.35);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -1px 3px rgba(0,0,0,.18),
    0 4px 12px rgba(0,0,0,.15);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .25s ease;
}

#buyModal .buy-btn-full:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

#buyModal .buy-logo {
  width: 50%;          /* 💥 EL LOGO ESCALA AL 70% DEL BOTÓN */
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .22));
  transition: transform .25s ease, filter .25s ease;
}

#buyModal .buy-btn-full:hover .buy-logo {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}





/* ======================
   🎨 PLANTILLAS LIBREOS
   ====================== */

.cover-1  { background-image:url("/resources/img/portadas/1.webp"); }
.cover-1  .fake-cover-title,
.cover-1  .fake-cover-author { color:#6a4b28; }

.cover-2  { background-image:url("/resources/img/portadas/2.webp"); }
.cover-2  .fake-cover-title,
.cover-2  .fake-cover-author { color:#3e2a1a; }

.cover-3  { background-image:url("/resources/img/portadas/3.webp"); }
.cover-3  .fake-cover-title,
.cover-3  .fake-cover-author { color:#d3b26c; }

.cover-4  { background-image:url("/resources/img/portadas/4.webp"); }
.cover-4  .fake-cover-title,
.cover-4  .fake-cover-author { color:#d3b26c; }

.cover-5  { background-image:url("/resources/img/portadas/5.webp"); }
.cover-5  .fake-cover-title,
.cover-5  .fake-cover-author { color:#807c72; }

.cover-6  { background-image:url("/resources/img/portadas/6.webp"); }
.cover-6  .fake-cover-title,
.cover-6  .fake-cover-author { color:#d3b26c; }

.cover-7  { background-image:url("/resources/img/portadas/7.webp"); }
.cover-7  .fake-cover-title,
.cover-7  .fake-cover-author { color:#a8793b; }

.cover-8  { background-image:url("/resources/img/portadas/8.webp"); }
.cover-8  .fake-cover-title,
.cover-8  .fake-cover-author { color:#7b5234; }

.cover-9  { background-image:url("/resources/img/portadas/9.webp"); }
.cover-9  .fake-cover-title,
.cover-9  .fake-cover-author { color:#d3b26c; }

.cover-10 { background-image:url("/resources/img/portadas/10.webp"); }
.cover-10 .fake-cover-title,
.cover-10 .fake-cover-author { color:#1c1c1c; }

.cover-11 { background-image:url("/resources/img/portadas/11.webp"); }
.cover-11 .fake-cover-title,
.cover-11 .fake-cover-author { color:#4b3022; }

.cover-12 { background-image:url("/resources/img/portadas/12.webp"); }
.cover-12 .fake-cover-title,
.cover-12 .fake-cover-author { color:#d3b26c; }

.cover-13 { background-image:url("/resources/img/portadas/13.webp"); }
.cover-13 .fake-cover-title,
.cover-13 .fake-cover-author { color:#ffffff; }

.cover-14 { background-image:url("/resources/img/portadas/14.webp"); }
.cover-14 .fake-cover-title,
.cover-14 .fake-cover-author { color:#d3b26c; }

.fake-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Muy recomendable: */
  width: 140px;    /* ajusta al tamaño que quieres */
  height: 200px;   /* ajusta al tamaño que quieres */
  border-radius: 12px;
}



.fake-cover {
  position: relative;
}

.fake-cover-inner {
  position: relative;
  z-index: 5; /* se pone encima de marcos */
}


.fake-cover::before,
.fake-cover::after {
  position: absolute;
  z-index: 1 !important; /* los marcos quedan detrás */
}


.fake-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 !important;        /* ❗ clave */
  box-sizing: border-box;       /* evita recortes raros */
  background-clip: border-box;  /* asegura que la imagen llega al borde */
}


.fake-cover {
  width: 160px;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;              /* evita que la imagen se salga */
  box-shadow: 0 6px 20px rgba(0,0,0,.15); /* estética Libreos */
}


/* =============================================
   🎨 PORTADAS LIBREOS · RESPONSIVE + PREMIUM
   ============================================= */

/* Contenedor principal */
.fake-cover {
  position: relative;

  /* Fondo dinámico */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Tamaño base (móvil primero) */
  width: 140px;
  height: 210px;

  /* Forma y acabado */
  border-radius: 14px;
  overflow: hidden;
  padding: 0 !important;
  box-sizing: border-box;

  /* Sombra suave estilo Libreos */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover premium (solo Desktop) */
@media (hover: hover) {
  .fake-cover:hover {
    transform: translateY(-4px) scale(1.025);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  }
}

/* Título + Autor dentro de la portada */
.fake-cover-inner {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  text-align: left;

  z-index: 5;
  color: inherit;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.fake-cover-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.fake-cover-author {
  font-size: 0.78rem;
  opacity: 0.9;
  margin-top: 4px;
}

/* =============================
   📱 RESPONSIVE EN MÓVIL
   ============================= */
@media (max-width: 480px) {
  .fake-cover {
    width: 120px;
    height: 180px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }

  .fake-cover-title {
    font-size: 0.9rem;
  }

  .fake-cover-author {
    font-size: 0.7rem;
  }
}

/* =============================
   🖥️ RESPONSIVE EN DESKTOP
   ============================= */
@media (min-width: 768px) {
  .fake-cover {
          width: 467px;
        height: 431px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  }

  .fake-cover-title {
    font-size: 1.1rem;
  }

  .fake-cover-author {
    font-size: 0.82rem;
  }
}

/* =====================================
   🎨 Tus plantillas (mantienen color)
   ===================================== */

.cover-1  { background-image:url("/resources/img/portadas/1.webp"); color:#6a4b28; }
.cover-2  { background-image:url("/resources/img/portadas/2.webp"); color:#3e2a1a; }
.cover-3  { background-image:url("/resources/img/portadas/3.webp"); color:#d3b26c; }
.cover-4  { background-image:url("/resources/img/portadas/4.webp"); color:#d3b26c; }
.cover-5  { background-image:url("/resources/img/portadas/5.webp"); color:#807c72 }
.cover-6  { background-image:url("/resources/img/portadas/6.webp"); color:#d3b26c; }
.cover-7  { background-image:url("/resources/img/portadas/7.webp"); color:#a8793b; }
.cover-8  { background-image:url("/resources/img/portadas/8.webp"); color:#d3b26c; }
.cover-9  { background-image:url("/resources/img/portadas/9.webp"); color:#d3b26c; }
.cover-10 { background-image:url("/resources/img/portadas/10.webp"); color:#1c1c1c; }
.cover-11 { background-image:url("/resources/img/portadas/11.webp"); color:#4b3022; }
.cover-12 { background-image:url("/resources/img/portadas/12.webp"); color:#d3b26c; }
.cover-13 { background-image:url("/resources/img/portadas/13.webp"); color:#ffffff; }
.cover-14 { background-image:url("/resources/img/portadas/14.webp"); color:#d3b26c; }


.fake-cover-title {
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fake-cover-author {
  margin-top: 6px;
  font-size: 0.8rem;
  opacity: 0.95;
}


.fake-cover-inner {
    position: absolute;
    bottom: 267px;
    left: 119px;
    right: 12px;
    text-align: left;
    z-index: 5;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fake-cover-inner {
  top: 58px;          /* antes estaba en bottom; ahora lo colocamos arriba */
  bottom: auto;
  left: 0;
  right: 0;
  text-align: center;
}


.fake-cover-title {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.fake-cover-author {
  font-size: 0.82rem;
  opacity: 0.75;
}


.fake-cover-inner {
  top: 116px;     /* antes 58px */
  bottom: auto;
  left: 0;
  right: 0;
  text-align: center;
}

.fake-cover-title {
  margin-bottom: 10px; /* para respirar más */
}


.chat-bubble.user .chat-book-title {
    font-size: 2.15rem;
    font-style: italic;
    font-weight: 500;
    margin-top: 0.3rem;
    color: #8a6a43;
    word-wrap: break-word;
}


.list-container {
  max-width: 880px;
  margin: 0 auto;
}

.lista-libro {
  position: relative; /* ← NECESARIO */
  background: linear-gradient(145deg, #f4eadd, #e8d4be);
  padding: 24px 26px;
  margin-bottom: 24px;
  border-radius: 20px;
  border: 1px solid rgba(120, 90, 60, 0.22);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  transition: 0.3s ease;
}

.lista-libro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 15px rgba(255,255,255,0.30);
}

@media (hover: hover) {
  .lista-libro:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
  }
}


.lista-btn {
    display: inline-block;
    padding: 12px 26px;               /* ← Más alto y más ancho */
    background: linear-gradient(135deg, #d8b995, #c6a27f);
    color: #3a2918;
    border-radius: 14px;              /* ← Un poco más suave */
    border: 1px solid rgba(130, 100, 70, 0.45);
    text-decoration: none;
    font-size: 25px;                  /* ← Subido 1px */
    font-weight: 500;                 /* ← Le da presencia */
    letter-spacing: 0.2px;            /* ← Más “editorial” */
    transition: 0.25s;
}

@media (hover: hover) {
  .lista-btn:hover {
      background: linear-gradient(135deg, #e1c7a8, #cfb08e);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
}

.lista-btn:active {
    transform: scale(0.97);
}


.lista-desc {
  margin-bottom: 14px;
}


.fake-cover-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;        /* un pelín más pequeño para títulos largos */
  font-weight: 600;
  color: #d7c6ab;
  line-height: 1.25;
  margin: 0;

  max-width: 85%;            /* LIMITA el ancho dentro del marco */
  overflow: hidden;          /* evita desbordes laterales */
  text-overflow: ellipsis;   /* añade "..." si es exagerado */
  white-space: normal;       /* permite multi-línea */
  word-break: break-word;    /* fuerza saltos en palabras largas */
  text-align: center;        /* alineado bonito */
}



#aiChatBtn.btn-ai {
    font-size: 1.7rem !important;
    padding: 40px 28px !important;
    border-radius: 18px !important;
    letter-spacing: .4px !important;
}

.chat-bubble strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.05rem;
  font-weight: 700;
  color: #b38b5a; /* dorado suave Libreos */
  letter-spacing: 0.5px;
  text-transform: capitalize;

  background: linear-gradient(90deg, #c8a26f, #e8d4b4);
  -webkit-background-clip: text;
  color: transparent;

  padding: 0 2px;
}


.author-block {
  display: flex;
  justify-content: center;
  margin: 0 auto 1rem;
}

.author-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 26px rgba(0,0,0,0.18);
  border: 2px solid rgba(255,255,255,0.6);
  background: #f7f0e8;
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}


.author-vintage {
  display: flex;
  justify-content: center;
  margin: 1rem auto 0.3rem;
}

.author-vintage img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;

  /* Marco dorado vintage */
  padding: 4px;
  border: 2px solid rgba(215, 177, 117, 0.9);
  background: radial-gradient(circle, #f3eadf 0%, #e8ddcf 80%);

  /* Sombra estilo daguerrotipo */
  box-shadow: 0 6px 22px rgba(0,0,0,0.22);

  /* Animación suave */
  opacity: 0;
  transform: scale(0.92);
  animation: fadeInVintage 0.45s ease forwards;
}

@keyframes fadeInVintage {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .author-vintage img {
    width: 60px;
    height: 60px;
    padding: 3px;
  }
}


.author-vintage {
  display: flex;
  justify-content: center;
  margin: 1rem auto 0.4rem;
}

.author-vintage-photo {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;

  /* Marco dorado editorial */
  padding: 4px;
  border: 2px solid rgba(205, 170, 110, 0.95);
  background: radial-gradient(circle, #f8f2e8 0%, #e9dfd0 75%);

  /* Sombra estilo daguerrotipo */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);

  /* Animación */
  opacity: 0;
  transform: scale(0.92);
  animation: fadeInVintage 0.45s ease forwards;
}

@keyframes fadeInVintage {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .author-vintage-photo {
    width: 60px;
    height: 60px;
    padding: 3px;
  }
}



.author-photo {
    width: 282px;
    height: 379px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: #f7f0e8;
    animation: fadeIn 0.5s 
ease forwards;
    opacity: 0;
    box-shadow:
  inset 0 0 8px rgba(0,0,0,0.22),
  0 12px 22px rgba(0,0,0,0.22),
  0 4px 4px rgba(0,0,0,0.18);

    
}


.author-vintage img {
    width: 253px;
    height: 360px;
    border-radius: 50%;
    object-fit: cover;
    padding: 4px;
    border: 2px solid rgba(215, 177, 117, 0.9);
    background: radial-gradient(circle, #f3eadf 0%, #e8ddcf 80%);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: scale(0.92);
    animation: fadeInVintage 0.45s 
ease forwards;
}

.fake-cover-inner {
  position: absolute;
  top: 26%;               /* 👉 Ajusta la altura del bloque completo */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;             /* ancho ideal dentro del marco dorado */
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  color: #d8c7a1;         /* dorado suave */
}

/* TÍTULO */
.fake-cover-title {
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

/* AUTOR (alineado al centro naturalmente con el título) */
.fake-cover-author {
  font-size: 0.95rem;
  font-weight: 400;
  margin-top: 0.35rem;
  opacity: 0.9;
  letter-spacing: 0.4px;
}

/* =========================================
   🔥 ICONO COMPARTIR
========================================= */
.meta-icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.meta-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity .2s ease, transform .2s ease;
}

.meta-icon-btn:hover .meta-icon {
  opacity: 1;
  transform: scale(1.08);
}


/* =========================================
   🔥 MODAL COMPARTIR BASE
========================================= */
.modal-share {
  background: var(--cream);
  width: 520px;
  max-width: 95%;
  padding: 40px 36px;
  border-radius: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  animation: fadeIn .3s ease;
  text-align: center;
  transform: translateY(-20px);
}

.modal-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .2px;
  margin-bottom: 22px;
  color: #4b3a2a;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}


/* =========================================
   🔥 BOTONES COMPARTIR (GRANDES + NEGRITA)
========================================= */
.share-btn {
  background: rgba(159, 118, 68, 0.18);
  border: 1px solid rgba(159, 118, 68, 0.35);
  padding: 18px 22px;
  color: #4b3a2a;
  font-size: 19px;
  font-weight: 700;
  border-radius: 14px;

  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;

  transition: all .2s ease;
}

.share-btn:hover {
  background: rgba(159, 118, 68, 0.28);
  transform: scale(1.02);
}


/* =========================================
   🔥 QR GRANDE
========================================= */
.qr-box {
  margin-top: 20px;
}

.qr-box img {
  width: 220px !important;
  height: 220px !important;
  margin-top: 18px;
}


/* =========================================
   🔥 OVERLAY DIFUMINADO
========================================= */
.modal-overlay {
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.25);
}


/* =========================================
   🔥 RESPONSIVE MÓVIL
========================================= */
@media (max-width: 600px) {
  .modal-share {
    width: 94%;
    padding: 34px 28px;
    border-radius: 24px;
  }

  .modal-title {
    font-size: 22px;
  }

  .share-btn {
    font-size: 18px;
    padding: 16px;
    border-radius: 16px;
  }

  .qr-box img {
    width: 210px !important;
    height: 210px !important;
  }
}


/* Botón con icono */
.icon-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

/* Icono dorado */
.share-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Hover */
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.icon-btn:hover .share-icon {
  opacity: 1;
}
.icon-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  font-size: 16px;
}

.share-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  transition: opacity 0.2s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.icon-btn:hover .share-icon {
  opacity: 1;
}



/* Botones del modal de compartir */
.icon-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  
  background: #F8F2EA; /* Fondo beige cálido */
  border: 1px solid #C0A878; /* Dorado suave */
  border-radius: 12px;

  cursor: pointer;
  transition: background .2s ease, transform .15s ease;

  font-size: 16px;
  color: #4A3B2B; /* marrón suave coherente */
}

/* Icono de compartir */
.share-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity .2s ease;
}

/* Hover */
.icon-btn:hover {
  background: #EFE5D7; /* un tono más oscuro */
  transform: translateY(-2px);
}

.icon-btn:hover .share-icon {
  opacity: 1;
}


.book-extra {
  position: relative;
  background: radial-gradient(140% 160% at 12% 0, rgba(255, 255, 255, .68), rgba(240, 225, 203, .36) 60%, rgba(226, 206, 182, .32)),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 22px 18px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14),
              0 6px 14px rgba(0, 0, 0, .08),
              inset 0 1px 0 rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px);
  color: var(--text);
  margin-bottom: 24px; /* separación elegante entre los dos recuadros */
}

/* Caja superior: meta descripción */
.meta-summary {
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: radial-gradient(130% 150% at 10% -10%,
                rgba(255, 255, 255, .75),
                rgba(245, 232, 215, .45) 55%,
                rgba(230, 210, 185, .34));
  font-size: 1.55rem;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.2px;
  opacity: .92;
}

/* Caja inferior: descripción larga */
.long-explain {
  padding-top: 26px;
  font-size: 1.09rem;
  line-height: 1.62;
}


/* ------------------------------------------ */
/* 1) Resumen corto (meta-description)        */
/* ------------------------------------------ */
.meta-summary {
  position: relative;
  background: radial-gradient(
              130% 160% at 12% -8%,
              rgba(235, 220, 139, 0.85),
              rgba(245, 230, 210, .42) 60%,
              rgba(230, 210, 185, .30)
             );
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px;
  padding: 18px 22px 16px;
  font-size: 1.85rem;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.2px;
  opacity: .92;
  box-shadow: 
      0 10px 26px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  margin-bottom: 28px;
}

/* ------------------------------------------ */
/* 2) Bloque de sinopsis larga                */
/* ------------------------------------------ */
.long-explain {
  position: relative;
  background: radial-gradient(
              140% 180% at 16% -10%,
              rgba(255, 255, 255, .68),
              rgba(240, 225, 203, .36) 55%,
              rgba(226, 206, 182, .30)
             );
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px 26px 26px;
  font-size: 1.15rem;
  line-height: 1.68;
  letter-spacing: .15px;
  color: var(--text);
  box-shadow:
      0 24px 48px rgba(0, 0, 0, .16),
      0 10px 22px rgba(0, 0, 0, .09),
      inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px);
}


/* ------------------------------------------ */
/* META DESCRIPTION (texto suelto, elegante)  */
/* ------------------------------------------ */
.meta-description p {
  font-size: 1.18rem;       /* aumentado */
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
  opacity: .92;
  margin: 12px 0 20px;
  padding: 0 4px;
  text-align: center;
  letters-spacing: .2px;
}


/* ------------------------------------------ */
/* Línea divisoria decorativa premium         */
/* ------------------------------------------ */
.decorative-divider {
  width: 100%;
  height: 32px;
  margin: 10px 0 26px;
  background: url('/resources/img/separador.png') center/contain no-repeat;
  opacity: .88;
}


/* ------------------------------------------ */
/* BLOQUE SINOPSIS LARGA                      */
/* ------------------------------------------ */
.long-explain {
  position: relative;
  background: radial-gradient(
              140% 180% at 16% -10%,
              rgba(255, 255, 255, .68),
              rgba(240, 225, 203, .36) 55%,
              rgba(226, 206, 182, .30)
             );
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px 26px 26px;
  font-size: 1.15rem;
  line-height: 1.68;
  letter-spacing: .15px;
  color: var(--text);
  box-shadow:
      0 24px 48px rgba(0, 0, 0, .16),
      0 10px 22px rgba(0, 0, 0, .09),
      inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px);
}



.extended-reason {
  margin-top: 14px;
    margin-top: 14px;
    font-size: 1.72rem;
    line-height: 1.72;
    letter-spacing: .18px;
    color: var(--text);
    opacity: .96;
    text-align: left;      /* ↑ Más grande en pantallas normales */
  line-height: 1.72;
  letter-spacing: .18px;
  color: var(--text);
  opacity: .96;
  text-align: left;
}

/* 📱 Móviles (hasta 480px): aún más amable */
@media (max-width: 480px) {
  .extended-reason {
    font-size: 1.78rem;   /* ↑ un poco más para móviles */
    line-height: 1.75;
  }
}

/* 📱 Tablets (480px – 768px): equilibrado */
@media (max-width: 768px) {
  .extended-reason {
    font-size: 1.75rem;  
    line-height: 1.74;
  }
}


/* Tarjeta general (ya existe pero añadimos mejoras suaves para integrar meta) */
.long-explain {
  position: relative;
  background: radial-gradient(
              140% 180% at 16% -10%,
              rgba(255, 255, 255, .68),
              rgba(240, 225, 203, .36) 55%,
              rgba(226, 206, 182, .30)
            );
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px 26px 34px;
  font-size: 1.15rem;
  line-height: 1.68;
  letter-spacing: .15px;
  color: var(--text);
  box-shadow:
      0 24px 48px rgba(0, 0, 0, .16),
      0 10px 22px rgba(0, 0, 0, .09),
      inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px);
}

/* META_DESCRIPTION integrada arriba */
.meta-top {
  font-size: 1.12rem;
  font-style: italic;
  opacity: .88;
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.55;
  padding: 0 4px;
}

/* Divider decorativo dentro de la tarjeta */
.decorative-divider.inside {
  width: 100%;
  height: 28px;
  margin: 0 auto 28px;
  background: url('/resources/img/separador.png') center/contain no-repeat;
  opacity: .85;
}

/* Sinopsis larga ya existente pero específica para mayor control */
.long-text {
  font-size: 1.14rem;
  line-height: 1.68;
  opacity: .95;
}


/* Tarjeta grande */
.long-explain {
  position: relative;
  background: radial-gradient(
              140% 180% at 16% -10%,
              rgba(255, 255, 255, .68),
              rgba(240, 225, 203, .36) 55%,
              rgba(226, 206, 182, .30)
             ),
             linear-gradient(180deg, var(--bg1), var(--bg2));
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 28px 26px 30px;
  box-shadow:
      0 24px 48px rgba(0, 0, 0, .16),
      0 10px 22px rgba(0, 0, 0, .09),
      inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px);
  color: var(--text);
}

/* Meta integrada arriba */
.meta-top {
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.6;
  opacity: .9;
  text-align: center;
  margin: 0 0 18px;
}

/* Separador decorativo DENTRO de la tarjeta */
.decorative-divider.inside {
  width: 100%;
  height: 26px;
  margin: 0 auto 22px;
  background: url('/resources/img/separador.png') center/contain no-repeat;
  opacity: .85;
}

/* Texto largo */
.long-text {
  font-size: 1.14rem;
  line-height: 1.7;
  opacity: .96;
}


/* Mini recuadro para META_DESCRIPTION */
.meta-box {
  background: radial-gradient(
              130% 150% at 15% -10%,
              rgba(240, 225, 203, 0.75),
              rgba(225, 205, 180, 0.55) 60%,
              rgba(210, 190, 165, 0.45)
             );
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 26px;
  backdrop-filter: blur(10px);
  box-shadow:
      0 14px 32px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.55);
}

/* Texto dentro del mini recuadro */
.meta-top {
  font-size: 1.28rem;
  font-style: italic;
  line-height: 1.58;
  text-align: center;
  color: var(--text);
  opacity: .95;
  margin: 0;
  padding: 0;
}

/* Mobile: un pelín más grande */
@media (max-width: 480px) {
  .meta-top {
    font-size: 1.33rem;
  }
}


.meta-box {
  background: radial-gradient(
              130% 150% at 15% -10%,
              rgba(245, 235, 220, 0.82),
              rgba(230, 210, 185, 0.52) 55%,
              rgba(215, 195, 170, 0.42)
             );
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 26px;
  backdrop-filter: blur(10px);
  box-shadow:
      0 14px 32px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.45);
}


.meta-top {
  font-size: 1.32rem;
  line-height: 1.63;
  font-style: italic;
  opacity: .96;
  text-align: center;
  margin: 0;
  padding: 4px 6px 2px;
}


.meta-box {
  background: radial-gradient(
              130% 160% at 15% -10%,
              rgba(240, 226, 205, 0.92),
              rgba(225, 205, 180, 0.60) 55%,
              rgba(210, 190, 165, 0.45)
             );
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  padding: 24px 26px 22px;
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
  box-shadow:
      0 16px 42px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.45);
}


.meta-top {
  font-size: 1.38rem;
  line-height: 1.66;
  font-style: italic;
  opacity: .96;
  color: var(--text);
  text-align: center;
  letter-spacing: .25px;
  margin: 0;
  padding: 4px 2px 2px;
}