/*
  v26 - Ajuste móvil de burbujas/carruseles
  Solo visual para home pública.
  Objetivo: que las secciones usen más ancho del celular y muestren al menos 3 carátulas completas.
*/

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    max-width: 100vw !important;
  }

  .webos-shell,
  .mm-shell,
  .home-shell,
  .main-shell,
  main,
  #moduleMount {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Burbujas/paneles: más anchos y menos estrechos en móvil */
  .mm-section,
  .rail-section,
  .feature-grid-section,
  .manual-carousel-section,
  .top-books-before-die,
  .mm-books-medieval,
  .mm-books-medieval-clean,
  .human-impact-section,
  .panel-privado-home,
  .adult-red-home,
  .adult-red-module,
  .ghibli-section,
  .star-wars-section,
  [data-section],
  [data-kind="starwars"],
  [data-kind="ghibli"] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
  }

  /* Evita que el borde o sombra reduzca demasiado la zona interna */
  .mm-section > *,
  .rail-section > *,
  .feature-grid-section > *,
  .manual-carousel-section > *,
  [data-kind="starwars"] > *,
  [data-kind="ghibli"] > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section-head,
  .mm-section .section-head,
  .manual-carousel-head,
  .top-books-head {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .section-head h2,
  .mm-section h2,
  .manual-carousel-head h2,
  .top-books-head h2 {
    font-size: clamp(1.15rem, 5.1vw, 1.55rem) !important;
    line-height: 1.05 !important;
  }

  .eyebrow,
  .mm-section .eyebrow,
  .manual-carousel-head .eyebrow {
    font-size: .72rem !important;
    letter-spacing: .18em !important;
  }

  /* Carruseles: 3 carátulas completas visibles + posible cuarta parcial */
  .poster-rail,
  .book-rail,
  .manual-carousel-rail,
  .top-books-track,
  .human-impact-rail,
  .ghibli-rail,
  .star-wars-rail,
  .mm-section [class*="rail"],
  .mm-section [class*="track"] {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .poster-card,
  .book-card,
  .manual-carousel-card,
  .top-book-card,
  .human-impact-card,
  .ghibli-card,
  .star-wars-card,
  .mm-section [class*="card"] {
    flex: 0 0 calc((100% - 20px) / 3) !important;
    min-width: calc((100% - 20px) / 3) !important;
    width: calc((100% - 20px) / 3) !important;
    max-width: calc((100% - 20px) / 3) !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .poster-cover,
  .book-cover,
  .manual-carousel-card img,
  .top-book-card img,
  .human-impact-card img,
  .ghibli-card img,
  .star-wars-card img,
  .mm-section [class*="cover"],
  .mm-section [class*="poster"] {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  .poster-title,
  .book-title,
  .manual-carousel-title,
  .top-book-title,
  .human-impact-title,
  .ghibli-title,
  .star-wars-title,
  .mm-section [class*="title"] {
    font-size: .88rem !important;
    line-height: 1.08 !important;
    margin-top: 7px !important;
    -webkit-line-clamp: 2 !important;
  }

  .poster-year,
  .book-author,
  .mm-section [class*="year"],
  .mm-section [class*="meta"] {
    font-size: .76rem !important;
  }

  /* Las secciones especiales como Star Wars/Ghibli no deben cortar la tercera carátula */
  .mm-section[data-kind="starwars"],
  .mm-section[data-kind="ghibli"],
  [data-kind="starwars"],
  [data-kind="ghibli"] {
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .mm-section,
  .rail-section,
  .feature-grid-section,
  .manual-carousel-section,
  .top-books-before-die,
  .mm-books-medieval,
  .mm-books-medieval-clean,
  .human-impact-section,
  [data-kind="starwars"],
  [data-kind="ghibli"] {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 22px !important;
  }

  .poster-rail,
  .book-rail,
  .manual-carousel-rail,
  .top-books-track,
  .human-impact-rail,
  .ghibli-rail,
  .star-wars-rail,
  .mm-section [class*="rail"],
  .mm-section [class*="track"] {
    gap: 9px !important;
  }

  .poster-card,
  .book-card,
  .manual-carousel-card,
  .top-book-card,
  .human-impact-card,
  .ghibli-card,
  .star-wars-card,
  .mm-section [class*="card"] {
    flex-basis: calc((100% - 18px) / 3) !important;
    min-width: calc((100% - 18px) / 3) !important;
    width: calc((100% - 18px) / 3) !important;
    max-width: calc((100% - 18px) / 3) !important;
  }
}