.hero-ctas{
  width: min(720px, 100%);
  flex-wrap: nowrap;   /* siempre en línea */
}

.hero-ctas .producto-enlace{
  flex: 1 1 0;         /* MISMA longitud */
  white-space: nowrap; /* que no parta el texto */
}

/* En móvil sí conviene apilarlos */
@media (max-width: 576px){
  .hero-ctas{ flex-wrap: wrap; }
  .hero-ctas .producto-enlace{ flex: 1 1 100%; }
}

.hero .book-hero p.book-hero__kicker{
  font-family: var(--sci-font);
  letter-spacing: .3px; /* sutil, sin “robótico” */
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  color: rgba(255,255,255,.95);
}

.hero .book-hero p.book-hero__subtitle{
  color: rgba(255,255,255,.95);
  text-indent: 10px;
}


body.novela-page .hero::before{
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%) !important;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cta-band{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cta-band__text{
  display: flex;
  flex-direction: column; /* h2 arriba, p abajo */
  gap: 8px;
  min-width: 0;
}

.cta-band-desc{
  margin: 0;
}

.producto-enlace--sm{
  padding: 10px 14px;
  min-height: auto;
  font-size: .95rem;
  width: auto;
  white-space: nowrap;
}

/* En móvil: todo apilado y el botón alineado */
@media (max-width: 768px){
  .cta-band{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   CARDS: limitar tamaño portada
   (sin cambiar HTML)
========================= */

/* Portadas sin recorte: se ajustan manteniendo proporción */
.section-card > img.img-fluid{
  width: 100%;
  height: 240px;           /* ajusta a tu gusto */
  object-fit: contain;     /* clave: NO recorta */
  object-position: center;
  display: block;

  /* opcional: para que el "hueco" no cante si sobra espacio */
  background: rgba(0,0,0,.18);
  padding: 10px;           /* opcional, quita si no lo quieres */
  border-radius: 1rem;     /* ya tienes rounded-3, esto es por si acaso */
}

/* Responsive */
@media (max-width: 768px){
  .section-card > img.img-fluid{ height: 210px; }
}
@media (max-width: 480px){
  .section-card > img.img-fluid{ height: 190px; }
}

.novela-page h2{
  font-family: var(--sci-font);
  letter-spacing: .3px;
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}
.novela-page h3{
  font-size: 1rem
}
/*****************************************/
/* ===== Banner gratis con imagen de fondo ===== */
.gratis-banner{
  position: relative;
  overflow: hidden;
}

/* Imagen */
.gratis-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("../img/bgecos.jpg");
  background-size: cover;
  background-position: center;
  opacity: 1;
  transform: scale(1.05);
  z-index: 0;
}

/* Degradado (overlay) */
.gratis-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 500px at 20% 30%, rgba(0,0,0,.20), rgba(0,0,0,.50)),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.50));
  z-index: 1;
  pointer-events: none; /* clave: no tapa botones */
}

/* Contenido por encima */
.gratis-banner > *{
  position: relative;
  z-index: 2;
}


.gratis-banner__inner{
  padding: 18px 0 6px;
}

.gratis-banner__content{
  max-width: 860px; /* evita “vacío” */
}

.gratis-banner__title{
  margin: 0 0 8px;
  font-family: var(--sci-font);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
}

/* Botones con icono */
.gratis-banner .producto-enlace i{
  margin-right: .55rem;
  vertical-align: -1px;
}