/* =================================================================
   BOOK LANDING · RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────────────
   Filosofía MOBILE-FIRST: los estilos base son la pantalla más
   pequeña. Aquí añadimos min-width media queries para enriquecer
   pantallas más grandes.

   BREAKPOINTS
     480px   xs    móvil grande (iPhone Plus, Pixel)
     640px   sm    landscape móvil / tablet pequeña
     768px   md    tablet portrait (iPad)
    1024px   lg    laptop / desktop pequeño
    1280px   xl    desktop

   ═══════════════════════════════════════════════════════════════
   ÍNDICE
     1. HERO
     2. STATS BAND
     3. BENEFITS
     4. EXPLORE / BOOK FLIP
     5. AUTHOR
     6. CHECKOUT + FAQ
     7. GLOBAL UTILITIES
   ================================================================= */


/* =============================================================
   1. HERO
   ============================================================= */

/* ── Base (< 640px) — columna única, libro encima del texto ─── */
.book-landing .bl-hero__inner {
  display: flex;
  flex-direction: column-reverse;   /* libro primero, luego texto */
  gap: var(--bl-space-5);
  padding-block: var(--bl-space-4) var(--bl-space-5);
}

.book-landing .bl-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--bl-space-3);
}

/* Libro más pequeño en móvil */
.book-landing .bl-book3d {
  width: clamp(140px, 38vw, 200px);
  margin-inline: auto;
}

/* Título más compacto en móvil */
.book-landing .bl-hero__title {
  font-size: clamp(2rem, 7vw, 3rem);
  max-width: 100%;
}

/* Descripción menos ancha en móvil */
.book-landing .bl-hero__desc {
  font-size: var(--bl-text-base);
  max-width: 100%;
}

/* CTA en columna en móvil muy pequeño */
.book-landing .bl-hero__cta {
  flex-direction: column;
  align-items: flex-start;
}

/* Botón CTA ancho completo en móvil */
.book-landing .bl-hero__cta .bl-btn {
  width: 100%;
  justify-content: center;
}

/* Precio inline con el botón */
.book-landing .bl-hero__price {
  align-items: center;
}

/* Chips en 1 columna en pantallas muy pequeñas */
.book-landing .bl-hero__chips {
  flex-direction: column;
  gap: var(--bl-space-2);
}

/* ── sm (≥ 480px) — chips vuelven a flex row ─────────────────── */
@media (min-width: 480px) {
  .book-landing .bl-hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .book-landing .bl-hero__cta .bl-btn {
    width: auto;
  }
  .book-landing .bl-hero__chips {
    flex-direction: row;
  }
}

/* ── md (≥ 768px) — dos columnas hero ───────────────────────── */
@media (min-width: 768px) {
  .book-landing .bl-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--bl-space-6);
    padding-block: clamp(var(--bl-space-5), 3vw, var(--bl-space-7));
  }

  .book-landing .bl-hero__content {
    flex: 1;
    min-width: 0;
  }

  .book-landing .bl-hero__visual {
    flex-shrink: 0;
    width: clamp(200px, 30vw, 320px);
  }

  .book-landing .bl-book3d {
    width: clamp(180px, 22vw, 260px);
    margin-inline: 0;
  }

  .book-landing .bl-hero__title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
  }

  .book-landing .bl-hero__desc {
    font-size: var(--bl-text-lg);
  }
}

/* ── lg (≥ 1024px) — hero a sangre con más aire ─────────────── */
@media (min-width: 1024px) {
  .book-landing .bl-hero__inner {
    gap: var(--bl-space-8);
  }

  .book-landing .bl-hero__visual {
    width: clamp(260px, 28vw, 380px);
  }

  .book-landing .bl-book3d {
    width: clamp(220px, 22vw, 280px);
  }

  .book-landing .bl-hero__title {
    font-size: clamp(2.6rem, 3.5vw, 4rem);
  }
}


/* =============================================================
   2. STATS BAND
   ============================================================= */

/* Separadores ya manejados en components.css con max-width:640px.
   Solo necesitamos asegurar el padding vertical en móvil. */
@media (max-width: 479px) {
  .book-landing .bl-stats {
    padding-block: var(--bl-space-4);
  }
  .book-landing .bl-stats__row {
    gap: var(--bl-space-2);
    font-size: 0.65rem;
  }
}


/* =============================================================
   3. BENEFITS
   ============================================================= */

/* ── Base (< 640px) — 1 columna ──────────────────────────────── */
.book-landing .bl-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bl-space-4);
}

/* Reducir padding en las cards en móvil */
.book-landing .bl-benefits__grid .bl-card {
  padding: var(--bl-space-4) var(--bl-space-5);
}

/* Cabecera más compacta */
.book-landing .bl-benefits__head {
  margin-bottom: var(--bl-space-6);
}

.book-landing .bl-benefits__title {
  font-size: var(--bl-text-2xl);
}

.book-landing .bl-benefits__subtitle {
  font-size: var(--bl-text-base);
}

/* ── sm (≥ 640px) — 2 columnas ──────────────────────────────── */
@media (min-width: 640px) {
  .book-landing .bl-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── lg (≥ 1024px) — 5 columnas en fila ─────────────────────── */
@media (min-width: 1024px) {
  .book-landing .bl-benefits__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--bl-space-5);
  }

  .book-landing .bl-benefits__grid .bl-card {
    padding: var(--bl-space-6);
  }

  .book-landing .bl-benefits__title {
    font-size: var(--bl-text-3xl);
  }

  .book-landing .bl-benefits__subtitle {
    font-size: var(--bl-text-lg);
  }
}


/* =============================================================
   4. EXPLORE · TABS + BOOK FLIP
   ============================================================= */

/* ── Base (< 640px) ──────────────────────────────────────────── */

/* Tabs: centrados; scroll horizontal solo si no caben */
.book-landing .bl-explore__tabs {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--bl-radius-lg);
  justify-content: center;
  -webkit-overflow-scrolling: touch;
}

/* Tabs más compactos */
.book-landing .bl-explore__tab {
  font-size: 0.75rem;
  padding: var(--bl-space-2) var(--bl-space-3);
}

/* Libro virtual: ancho máximo en móvil */
.book-landing .bl-book {
  width: clamp(280px, 94vw, 480px);
}

/* Nav buttons más pequeños en móvil */
.book-landing .bl-book__nav-btn {
  font-size: var(--bl-text-xs);
  padding: var(--bl-space-2) var(--bl-space-3);
}

/* ── sm (≥ 640px) — tabs vuelven a pill ─────────────────────── */
@media (min-width: 640px) {
  .book-landing .bl-explore__tabs {
    border-radius: var(--bl-radius-pill);
    width: fit-content;
    margin-inline: auto;
    justify-content: center;
  }
  .book-landing .bl-explore__tab {
    font-size: var(--bl-text-sm);
    padding: var(--bl-space-2) var(--bl-space-4);
  }
  .book-landing .bl-book {
    width: clamp(400px, 80vw, 600px);
  }
}

/* ── lg (≥ 1024px) — libro a tamaño completo ─────────────────── */
@media (min-width: 1024px) {
  .book-landing .bl-book {
    width: clamp(500px, 65vw, 720px);
  }
  .book-landing .bl-book__nav-btn {
    font-size: var(--bl-text-sm);
    padding: var(--bl-space-2) var(--bl-space-4);
  }
}


/* =============================================================
   5. AUTHOR
   ============================================================= */

/* ── Base (< 768px) — foto cuadrada y contenido debajo ───────── */
.book-landing .bl-author__photo {
  aspect-ratio: 3 / 2;             /* paisaje en móvil: ocupa menos altura */
  border-radius: var(--bl-radius-xl);
  max-height: 300px;
}

.book-landing .bl-author__title {
  font-size: var(--bl-text-2xl);
}

.book-landing .bl-author__quote {
  font-size: var(--bl-text-lg);
}

/* Facts en 3 columnas ya funcionan en móvil gracias a grid-template-columns repeat(3,1fr) */
.book-landing .bl-author__fact-num {
  font-size: var(--bl-text-xl);
}

/* ── md (≥ 768px) — foto vertical ────────────────────────────── */
@media (min-width: 768px) {
  .book-landing .bl-author__photo {
    aspect-ratio: 4 / 5;
    max-height: none;
  }

  .book-landing .bl-author__title {
    font-size: var(--bl-text-3xl);
  }

  .book-landing .bl-author__quote {
    font-size: var(--bl-text-xl);
  }

  .book-landing .bl-author__fact-num {
    font-size: var(--bl-text-2xl);
  }
}


/* =============================================================
   6. CHECKOUT + FAQ
   ============================================================= */

/* ── Base (< 640px) ──────────────────────────────────────────── */

/* Card con menos padding en móvil */
.book-landing .bl-checkout__card {
  padding: var(--bl-space-5);
  border-radius: var(--bl-radius-xl);
}

/* Producto: flex column en móvil */
.book-landing .bl-checkout__product {
  flex-direction: column;
  gap: var(--bl-space-3);
}

/* Miniatura más pequeña */
.book-landing .bl-checkout__product-thumb {
  width: 100%;
  max-width: 120px;
  align-self: center;
}

/* Precio más compacto */
.book-landing .bl-checkout__price-now {
  font-size: var(--bl-text-2xl);
}

/* Discount en columna en pantallas muy pequeñas */
@media (max-width: 400px) {
  .book-landing .bl-checkout__discount {
    flex-direction: column;
  }
  .book-landing .bl-checkout__discount-btn {
    width: 100%;
  }
}

/* FAQ summary más compacto */
.book-landing .bl-checkout__faq-item summary {
  padding: var(--bl-space-3) var(--bl-space-4);
  font-size: var(--bl-text-base);
}

.book-landing .bl-checkout__faq-answer {
  padding: 0 var(--bl-space-4) var(--bl-space-3);
}

/* ── sm (≥ 640px) — producto en fila ─────────────────────────── */
@media (min-width: 640px) {
  .book-landing .bl-checkout__card {
    padding: var(--bl-space-7);
    border-radius: var(--bl-radius-2xl);
  }

  .book-landing .bl-checkout__product {
    flex-direction: row;
  }

  .book-landing .bl-checkout__product-thumb {
    max-width: none;
    width: 80px;
  }

  .book-landing .bl-checkout__price-now {
    font-size: var(--bl-text-3xl);
  }

  .book-landing .bl-checkout__faq-item summary {
    padding: var(--bl-space-4) var(--bl-space-5);
    font-size: var(--bl-text-md);
  }
}


/* =============================================================
   7. GLOBAL UTILITIES
   ============================================================= */

/* Section padding más ajustado en móvil */
@media (max-width: 639px) {
  .book-landing .bl-section {
    padding-block: var(--bl-space-7);
  }
  /* Cabeceras de sección más compactas */
  .book-landing .bl-benefits__head {
    max-width: 100%;
    margin-bottom: var(--bl-space-5);
  }
}

/* Touch targets mínimos (WCAG 2.5.5) */
.book-landing button,
.book-landing [role="tab"] {
  min-height: 44px;
  min-width: 44px;
}

/* Evita overflow horizontal en toda la landing */
.book-landing {
  overflow-x: hidden;
}

/* Imágenes responsive por defecto */
.book-landing img {
  max-width: 100%;
  height: auto;
}