/* Mejoras sobre el clon (no existen en la web original).
   (El logo único, el color del menú y la barra de avance los hace efectos.js con alba.css.) */

/* /mister-meister/: banner en código (assets/js/baner-mm.js) en lugar de los vídeos; mismas proporciones que estos */
#mister-1 .mm-baner { display: block; box-sizing: content-box; width: 100%; aspect-ratio: 1920 / 300; background: #000; }
@media only screen and (max-width: 1200px) { #mister-1 .mm-baner { aspect-ratio: 2 / 1; } }

/* /mister-meister/: «Nuestro ADN somos» en SVG (assets/js/adn-mm.js) en lugar del vídeo; mismo tamaño, fondo transparente */
.animacio-2 .mm-adn { height: auto; aspect-ratio: 1 / 1; overflow: visible; }

/* home: cabecera en código (assets/js/portada-mm.js) en lugar de los vídeos MM-Logo-Motion (escritorio) y vertical (móvil).
   Intro como en industrial-web, pero el recogido de «MISTER MEISTER» y la escritura de «/ AGENCIA SEO» los lleva el JS
   con las curvas del vídeo. El tachado (a media altura de las mayúsculas, igual que en el canvas) no aparece por opacidad:
   crece desde el centro, de casi nada a su tamaño, con la escala que pone el JS (--mp-tx largo, --mp-ty grosor) */
.mm-portada { position: absolute; inset: 0; overflow: hidden; background: #000; pointer-events: none; }
.mm-portada .mp-escena { position: absolute; left: 50%; top: 50%; }
.mm-portada canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mm-portada .mp-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: pre; font-family: Inter, sans-serif; font-weight: 400; line-height: 1; }
.mm-portada .mp-in { display: inline-flex; color: transparent; transition: transform .55s cubic-bezier(.5, 0, .2, 1), color .25s linear .15s; }
.mm-portada.i1 .mp-in { color: var(--mp-gris); }
.mm-portada .mp-lg { font-weight: 700; position: relative; }
.mm-portada .mp-lg::before { content: ''; position: absolute; left: 0; right: 0; top: .46em; height: .08em; background: var(--mp-gris); transform: scale(var(--mp-tx, 1), var(--mp-ty, 1)); }
.mm-portada .mp-in i { font-style: normal; display: inline-block; overflow: hidden; vertical-align: top; }
.mm-portada .mp-tail { display: inline-flex; justify-content: flex-end; overflow: hidden; max-width: 0; }
.mm-portada .mp-tail span { flex: none; }
.mm-portada .mp-sin, .mm-portada .mp-sin *, .mm-portada.mp-quieto * { transition: none !important; }
.mp-comparar { position: fixed; right: 10px; bottom: 10px; width: 32vw; z-index: 100000; border: 1px solid #ffee00; }

/* /seo/ (4-nov, Alfons): «METODOLOGÍA» con la misma letra, color y tamaño que «NUESTRO ADN» de MM. Ya eran iguales
   (Inter 12 px negro), salvo en pantallas altas: MM escala sus fichas con --mm-z (efectos.js, hasta 1,2) y /seo/ no. */
@media only screen and (min-width: 1201px) {
  #seo-3 .subtitol { font-size: calc(12px * var(--mm-z, 1)); line-height: calc(26px * var(--mm-z, 1)); }
}
/* /seo/: la E y la O aparecen al acabar la entrada de la S; si se ha bajado durante ella ya están a la vista: fundido corto */
#E, #O { transition: opacity .4s ease-out; }

/* MM «¿Cómo trabajamos?» en escritorio (4-nov, Alfons): los textos van de uno en uno, centrados respecto a la columna
   de números (+12 px: la lista 1–5 no llena la fila); mister-meister.js (clase mm-pasos) pone --mm-o (opacidad) y --mm-d
   (desplazamiento) según el scroll. */
@media only screen and (min-width: 1201px) {
  #mister-3.mm-pasos #mister-33 { inset: 0; }
  #mister-3.mm-pasos #mister-33 > div { position: absolute; left: 0; right: 0; top: calc(50% + 12px); margin: 0; color: #000;
    opacity: var(--mm-o, 0); transform: translateY(calc(-50% + var(--mm-d, 0px))); transition: none; }
  #mister-3.mm-pasos #mister-32 ul li a { transition: color .3s ease-out; }
}