/* 30 oct · EL CELULAR NUEVO (se carga sólo en pantallas de hasta 820 px; lo arma js/celular.js).
   Cada capítulo: la escena en video → la etiqueta → el título en tiras → los textos de corrido. Todo con clases propias (m-*),
   así nada de esto depende de las reglas de la compu ni de los parches viejos del celular.
   Escala: etiqueta 12 mono · texto 19 · lema 24 · manifiesto 27 · título 32 · portada 38. Margen 20. */

html.celular .lamina.m-oculta { display: none !important; }
html.celular .boton { display: none !important; }  /* el «Dar el primer paso» va en su lugar, en la portada y en el cierre */

.m-cap { --m-margen: 20px; background: var(--blanco); color: var(--negro); padding-bottom: 64px; position: relative; }
.m-cap.oscura { background: var(--negro); color: var(--blanco); }
.m-cap + .m-cap, .m-cap.oscura { border-top: 0; }

/* la escena */
.m-escena { position: relative; background: var(--negro); border-bottom: 4px solid var(--rojo); }
.m-escena video { display: block; width: 100%; aspect-ratio: 390 / 420; object-fit: cover; background: var(--gris); }
.m-escena.sin-video { display: none; }
/* 1 nov · en todos los capítulos (muestra aprobada, «pasalo a todo»; celular.js): el scroll mueve la cámara sobre el video, de
   costado y acercándose, y los textos entran suaves. Lo anima la placa del teléfono con la línea de tiempo del scroll; sin
   soporte, celular.js hace la misma cámara */
.m-escena.m-camara { overflow: clip; }  /* clip y no hidden: con hidden la escena pasa a ser su propio scroll y la cámara queda quieta a mitad de camino */
/* «la cámara se mueve poco»: el doble de recorrido de costado y más acercamiento (con 1,14 de escala al final no se ven los bordes) */
.m-escena.m-camara video { transform: translate3d(10%, 4%, 0) scale(1.3); will-change: transform; }
@supports (animation-timeline: view()) {
  .m-escena.m-camara video { animation: m-camara linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  /* los textos terminan de entrar cuando asomaron menos de la mitad: no hay que esperarlos para leer */
  .m-cap.m-entra .m-cuerpo > * { animation: m-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
@keyframes m-camara { from { transform: translate3d(10%, 4%, 0) scale(1.3); } to { transform: translate3d(-6%, -3%, 0) scale(1.14); } }
@keyframes m-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.m-cap.m-banda { padding-bottom: 0; }
.m-cap.m-banda .m-escena { border-bottom: 0; }
.m-cap.m-banda .m-escena video { aspect-ratio: 390 / 235; }

/* el cuerpo */
.m-cuerpo { padding: 30px var(--m-margen) 0; }
.m-etq { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.m-etq .nombre-marca { height: 22px; width: auto; }
.m-etq-txt { display: inline-flex; gap: .7em; background: var(--negro); color: var(--blanco); padding: .55em .8em .5em; }
.m-cap.oscura .m-etq-txt { background: var(--blanco); color: var(--negro); }
.m-etq-txt b { font-weight: 500; color: var(--rojo); }

/* las tiras de los títulos: una por renglón, en negativo; nada de animaciones ni giros heredados */
.m-cap .tira { animation: none !important; opacity: 1 !important; transform: none !important; rotate: none !important; translate: none !important;
  white-space: normal; max-width: 100%; }
.m-h1, .m-titulo, .m-manifiesto { display: block; line-height: 1.16; margin: 0; font-family: var(--sans); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.035em; text-wrap: balance; }
/* cada renglón es su propia tira (como en el afiche), y cada tira del copy empieza renglón nuevo */
.m-h1 .tira, .m-titulo .tira, .m-manifiesto .tira { display: inline; background: var(--negro); color: var(--blanco); padding: .03em .18em .07em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.m-h1 .tira::after, .m-titulo .tira::after, .m-manifiesto .tira::after { content: "\A"; white-space: pre; }
.m-cap.oscura :is(.m-h1, .m-titulo, .m-manifiesto) .tira { background: var(--blanco); color: var(--negro); }
.m-h1 { font-size: clamp(30px, 9.2vw, 38px); margin-bottom: 24px; }
.m-titulo { font-size: clamp(26px, 8vw, 32px); margin: 42px 0 20px; }
.m-etq + .m-titulo { margin-top: 0; }
.m-manifiesto { font-size: clamp(22px, 6.6vw, 27px); line-height: 1.3; margin: 36px 0 8px; }

/* la capacidad de la portada: la tira roja y su bajada */
.m-capacidad { display: grid; justify-items: start; gap: 10px; margin: 0 0 26px; }
.m-capacidad b { background: var(--rojo); color: var(--negro); font: 800 15px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .01em; padding: .45em .6em; }
.m-capacidad > span { font: 400 16px/1.45 var(--sans); max-width: 30em; }
.m-cta { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 34px; background: var(--rojo); color: var(--negro); text-decoration: none;
  font: 800 15px/1 var(--sans); text-transform: uppercase; letter-spacing: .02em; padding: 15px 18px; }
.m-cta i { font-style: normal; }

/* los textos de corrido */
.m-texto, .m-lema { margin: 0 0 18px; max-width: 34em; font-family: var(--sans); }
.m-texto { font-size: 19px; line-height: 1.45; font-weight: 400; letter-spacing: -.005em; }
.m-lema { font-size: 24px; line-height: 1.22; font-weight: 800; letter-spacing: -.02em; margin-bottom: 30px; }
.m-titulo + .m-texto, .m-manifiesto + .m-texto { margin-top: 10px; }
.m-texto .tira, .m-lema .tira { display: inline; background: none; color: inherit; padding: 0; }
.m-cap .mk-neg { background: var(--rojo); color: var(--negro); padding: 0 .14em; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.m-cap .mk-b { font-weight: 800; text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: .14em; text-underline-offset: .12em; }
.m-cap .mk-it { font-style: italic; font-weight: 700; }

/* 1 nov · el celular EN VIVO (?vivo): la lámina queda a la vista con el capítulo adentro y su canvas en el lugar del video */
html.celular-vivo .lamina.m-vivo { height: auto !important; min-height: 0 !important; overflow: visible !important; }
html.celular-vivo .lamina.m-vivo > .fija { display: none !important; }
html.celular-vivo .m-escena canvas { display: block; width: 100% !important; height: auto !important; aspect-ratio: 390 / 420; position: static !important; border: 0; }
html.celular-vivo .m-cap.m-banda .m-escena canvas { aspect-ratio: 390 / 235; }

/* 2 nov: en vivo, la escena queda pegada arriba mientras pasan los textos de su capítulo (la historia avanza con la lectura, como en
   la compu). Un poco más baja en los teléfonos chicos, para que quede lugar para leer. La banda del pie sigue pasando. */
html.celular-pegada .m-cap:not(.m-banda) > .m-escena { position: sticky; top: 0; z-index: 3; }
html.celular-pegada .m-cap:not(.m-banda) > .m-escena canvas { aspect-ratio: auto !important; height: min(108vw, 50svh) !important; }

/* 2 nov, «escena entera, después texto»: la escena del capítulo casi a pantalla entera (los videos verticales de
   exportar_pantalla.py, 390 × 620); el texto empieza debajo, sobre fondo liso. La banda del pie sigue apaisada. */
.m-cap:not(.m-banda) > .m-escena video { aspect-ratio: 390 / 620; height: auto; max-height: calc(100svh - 24px); object-fit: cover; }