/* ══════════════════════════════════════════════════════════════════════════
   ARREGLOS DE CELULAR

   Va aparte a propósito: los bloques de `original/secciones/` NO se editan
   nunca —son la prueba de cómo era la página que ya convertía— así que todo lo
   que hay que corregir vive acá, se lee de un vistazo y se puede sacar entero.

   Se carga DESPUÉS de base.css y styles.css, que es lo que le da la última
   palabra sin necesidad de un solo `!important`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔ EL SCROLL HORIZONTAL, QUE ES EL DEFECTO CARO (19/08/2026).
   Medido en el navegador: la página pedía 1.978 px de ancho en una ventana de
   500. El culpable es la marquesina de beneficios (`.mc-tick-track`), que mide
   varias pantallas a propósito porque se desplaza sola — en Shopify la recortaba
   el CSS del tema, y al traer los bloques solos ese recorte se perdió.
   El síntoma no es "se ve un poco corrido": es que la página entera se arrastra
   de costado con el pulgar, el texto se sale y se siente rota. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.mc-tick {
  overflow: hidden;
}

/* ⛔ Y ESTA ES LA CAUSA DE VERDAD, NO LA MARQUESINA (19/08/2026).
   El contenedor de contenido computaba `width: 560px` FIJO —no sólo
   `max-width`— porque así se lo dejaba el CSS del tema de Shopify, donde vivía
   dentro de otro contexto. En una pantalla de 500 px eso son 60 px de texto
   fuera de la vista.
   Y el `overflow-x: hidden` de arriba lo TAPABA: la página dejaba de arrastrarse
   de costado y el título seguía cortado, ahora sin forma de llegar a él. Es
   peor que el síntoma original — un defecto invisible en vez de uno molesto.
   Por eso el `overflow` se queda sólo como red de seguridad, y el ancho se
   arregla acá. */
/* ⛔ Y LA CAUSA DE LA CAUSA: `min-width: auto` EN UN FLEX ITEM.
   `.mc-lp` computaba 560 px con el padre en 500 y sin ninguna regla de ancho
   propia — porque es un ítem flex, y un ítem flex arranca con `min-width:auto`:
   no se deja encoger por debajo del ancho MÍNIMO de su contenido. Adentro tiene
   el carrusel de libros, que son fichas de 280 px: dos de ellas son exactamente
   los 560 px que aparecían.
   El carrusel ya tiene `overflow-x:auto` y sabe desplazarse solo; lo único que
   le faltaba era permiso para encogerse. Sin esto, cualquier arreglo de ancho
   más arriba es cosmético: el mínimo lo sigue imponiendo el hijo. */
.mc-lp,
.mc-lp .mc-books-track,
.mc-lp .mc-vids-track,
.mc-lp .mc-testi-track,
.mc-lp .mc-thumbs {
  min-width: 0;
}

.mc-lp .mc-wrap,
.mc-lp .mc-wrap-wide,
.mc-lp .mc-divider,
.mc-lp .mc-vids-head {
  width: 100%;
}

/* Ninguna imagen puede empujar la página más allá del ancho de la pantalla. */
img, video {
  max-width: 100%;
  height: auto;
}

/* ── LO QUE SE TOCA CON EL PULGAR ────────────────────────────────────────────
   El mínimo cómodo es 44 px. Los tres "+" del carrito medían 38 y la cruz de
   cerrar 30: en un dedo eso es errarle y cerrar el panel sin querer, o peor,
   creer que se agregó el upsell cuando no se agregó. */
.mc-up-add {
  min-width: 44px;
  min-height: 44px;
}
.mc-dh-x {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── EL CARRITO EN UNA PANTALLA ANGOSTA ──────────────────────────────────────
   El panel tiene un ancho fijo pensado para escritorio; en un teléfono chico
   quedaría más ancho que la pantalla y el botón de finalizar caería afuera. */
@media (max-width: 480px) {
  .mc-lp .mc-panel {
    width: 100%;
    max-width: 100%;
  }
}