/* ==========================================================
   Mr. Goodman · Versión móvil
   Capa de ajustes que se carga encima del plugin de los universos.
   Selectores con "html body" delante para ganar a las reglas
   !important del plugin original sin depender del orden de carga.
   ========================================================== */

@media (max-width: 767px) {

  /* ---------- PORTADA · tarjetas de universos ---------- */
  html body #mgx-root .mgx-mobile-universes {
    gap: 18px !important;
  }

  html body #mgx-root .mgx-mobile-universe {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 18px 14px 14px !important;
  }

  html body #mgx-root .mgx-mobile-universe-title {
    position: relative !important;
    inset: auto !important;
    max-width: 100% !important;
    font-size: clamp(32px, 10.6vw, 54px) !important;
    padding-right: 6px !important;
  }

  /* Las imágenes recortadas (sin el lienzo transparente de escritorio)
     llenan la tarjeta de lado a lado y quedan centradas. */
  html body #mgx-root .mgx-mobile-universe-character {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 64vw !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html body #mgx-root .mgx-mobile-universe-cta {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 14px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* ---------- PORTADA · contacto ---------- */
  html body #mgx-root .mgx-contact-visual {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }

  html body #mgx-root .mgx-contact-character {
    inset: 66px 14px 14px !important;
    background-position: center center !important;
    background-size: contain !important;
    transform: none !important;
  }

  html body #mgx-root .mgx-contact-back {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  html body #mgx-root .mgx-contact-eyebrow {
    font-size: 12px !important;
  }

  html body #mgx-root .mgx-contact-note {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* 16px en los campos: iPhone no hace zoom al tocar el formulario */
  html body #mgx-root .mgx-contact-form input,
  html body #mgx-root .mgx-contact-form select,
  html body #mgx-root .mgx-contact-form textarea {
    font-size: 16px !important;
  }

  html body #mgx-root .mgx-bubble-cta {
    font-size: 13px !important;
  }

  /* ---------- BAD DAY ---------- */
  html body .license-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html body .license-card,
  html body .license-card.bd-license-photo {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .license-card.bd-license-photo {
    min-height: 300px !important;
  }

  html body .bd-license-photo .bd-license-copy,
  html body .bd-license-photo .bd-license-copy p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* El cómic: páginas verticales en una caja vertical (antes 16:10 y
     la página quedaba diminuta en el centro). */
  html body .book-stage {
    padding: 12px !important;
  }

  html body .book-slider {
    aspect-ratio: 3 / 4 !important;
  }

  html body .book-slider .slide {
    padding: 6px !important;
  }

  /* ---------- CALAVERITAS / COGOLLITOS · textos mínimos legibles ---------- */
  html body .calaveritas-page .cal-mini-handle,
  html body .cogollitos-page .cog-mini-handle,
  html body .cal-mini-handle,
  html body .cog-mini-handle {
    font-size: 11px !important;
  }

  html body .calaveritas-page .cal-mini-role,
  html body .cogollitos-page .cog-mini-role,
  html body .cal-mini-role,
  html body .cog-mini-role {
    font-size: 12px !important;
  }
}

/* En táctil no hay hover: sin saltos de tarjeta al tocar */
@media (hover: none) {
  html body .license-card:hover,
  html body .poster-card:hover,
  html body .comic-card:hover,
  html body .social-card:hover,
  html body .intro-box:hover,
  html body .book-stage:hover {
    transform: none !important;
  }
}

/* ---------- PORTADA · bocadillos de las pegatinas (About / Know-how / Contact) ----------
   movil.js los saca de la pegatina; aquí se muestran como tarjeta fija abajo. */
@media (max-width: 767px) {
  html body #mgx-root > .mgx-speech-bubble,
  html body #mgx-root > .mgx-speech-bubble--top,
  html body #mgx-root > .mgx-speech-bubble--bottom,
  html body #mgx-root > .mgx-speech-bubble--contact {
    position: fixed !important;
    z-index: 2147483001 !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    max-height: 70svh !important;
    overflow: auto !important;
    padding: 20px 20px 22px !important;
    border-radius: 18px !important;
    transform: translateY(14px) scale(.97) !important;
    transform-origin: center bottom !important;
    box-shadow: 6px 8px 0 rgba(0, 0, 0, .85) !important;
  }

  html body #mgx-root > .mgx-speech-bubble.is-open {
    transform: translateY(0) scale(1) !important;
  }

  html body #mgx-root > .mgx-speech-bubble::before {
    display: none !important;
  }

  html body #mgx-root > .mgx-speech-bubble strong {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  html body #mgx-root > .mgx-speech-bubble p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html body #mgx-root > .mgx-speech-bubble .mgx-bubble-cta {
    display: inline-block !important;
    margin-top: 14px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
}