/* Campaña «miembro» (miembros.html, futuro-de-la-profesion.html y la vitrina «Quién pidió qué» de la portada).
   Prefijo mb- para no chocar con estilo.css ni paginas.css; hereda la paleta, .contenedor, .respiro, .etiqueta,
   .lamina, .rotulo, los tramos y las entradas [data-entra]/[data-posa] de sitio.js. Se enlaza desde cada página
   fuera de las marcas COMUN, así construir.py (que pisa lo común con parciales viejos) no se lo lleva por delante.

   Lo aprendido del recorrido de las dos webs (27-oct): en Rojumar vende la vitrina, UNA pantalla grande y nítida
   con pestañas que pasan solas y enseñan muchas cosas en un sitio legible, sin bajar; y cada bloque vivo (pantalla
   real, foto de la casa al fondo, lámina que se posa). Aquí la vitrina es la primera pantalla de Miembros y un
   tramo de la portada. Sin beige de fondo (la CTO, 27-oct): blanco y gris muy claro; el oro, de acento. */

body[data-tono="miembros"] { --tono-pagina: #f5f5f3; --acento: var(--oro-tinta); --tono-cierre: #efefed; }
body[data-tono="futuro"] { --tono-pagina: #eceef1; --acento: var(--azul-hondo); --tono-cierre: #efefec; }

/* =====================================================================================================
   QUIÉN PIDIÓ QUÉ: la barra lateral de perfiles a la izquierda y el clip grande a la derecha
   ===================================================================================================== */
/* La primera pantalla de Miembros: cabe entera sin bajar a 1440x900 (el titular recogido arriba a la izquierda,
   la barra debajo y el clip ocupando la columna ancha). En la portada va como un tramo normal. */
.mb-quien { position: relative; overflow: clip; padding: calc(var(--nav-alto) + var(--nav-margen) + clamp(22px, 3vw, 40px)) 0 clamp(48px, 6vw, 80px); background: #fcfcfb; }
/* Luz dorada muy tenue detrás del clip, como la del papel del anuncio: el blanco no cae a plomo */
.mb-quien::before { content: ""; position: absolute; right: -10%; top: -20%; width: 60%; height: 140%; background: radial-gradient(ellipse at center, rgba(205, 180, 108, 0.16) 0%, rgba(205, 180, 108, 0) 60%); pointer-events: none; }
/* Miembros (28-oct): engranajes de latón de fondo en vez del blanco con luz dorada, que la CTO veía beige. Cada
   pieza mueve a las demás: es lo que es ser miembro. Velo blanco más fuerte a la izquierda, donde va el texto.
   Foto: Laura Ockel, Unsplash (UQ2Fw_9oApU). */
.mb-quien-engranajes { isolation: isolate; }
.mb-quien-engranajes::before { display: none; }
.mb-quien-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mb-quien-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* El velo es suave para que los engranajes se vean; lo que se lee va en una tarjeta de cristal (la CTO, 28-oct:
   «una card, que se vean los engranajes del resto, incluso de esa parte pero menos») */
.mb-quien-fondo::after { content: ""; position: absolute; inset: 0; background: rgba(252, 252, 251, 0.38); }
.mb-quien-tarjeta { grid-column: 1; grid-row: 1 / 4; align-self: stretch; margin: -30px -30px -26px; border-radius: 22px; background: rgba(252, 252, 251, 0.8); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 18px 50px rgba(40, 32, 14, 0.12); }
.mb-quien-int > .mb-quien-cab, .mb-quien-int > .mb-quien-acciones, .mb-quien-int > .mb-vitrina .mb-nav { position: relative; z-index: 1; }
/* Filas fijas: con la tarjeta delante, la colocación automática bajaba el titular debajo de todo */
.mb-quien-int > .mb-quien-cab { grid-row: 1; }
.mb-quien-int > .mb-quien-acciones { grid-row: 2; }
@media (max-width: 900px) { .mb-quien-tarjeta { display: none; } .mb-quien-fondo::after { background: rgba(252, 252, 251, 0.8); } }
.mb-quien-int { position: relative; display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); grid-template-rows: auto auto 1fr; gap: 0 clamp(28px, 3.6vw, 56px); align-items: start; }
.mb-quien-cab { grid-column: 1; max-width: 480px; }
.mb-quien-cab .etiqueta { display: block; margin-bottom: 10px; }
.mb-quien-cab .respiro { font-size: clamp(28px, 2.5vw, 38px); line-height: 1.08; }
.mb-quien-cab .linea-seccion { margin-top: 12px; font-size: clamp(15px, 1.1vw, 16.5px); max-width: 44ch; }
.mb-quien-acciones { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; }
.mb-quien-acciones .ania-mas { margin-top: 0; }
.mb-quien-acciones .boton { height: 44px; padding: 0 20px; font-size: 15px; }
/* La vitrina: la barra en la columna estrecha y la lámina en la ancha, ocupando las tres filas */
.mb-vitrina { display: contents; }
.mb-nav { grid-column: 1; grid-row: 3; margin-top: 22px; max-height: min(640px, calc(100vh - var(--nav-alto) - 300px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(74, 79, 90, 0.18) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
.mb-quien-lamina { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.mb-quien-int > .mb-quien-cab { transition-delay: 0ms; }
.mb-quien-int > .mb-quien-acciones { transition-delay: 90ms; }

/* ---------- La barra lateral: pieza propia de la casa ----------
   Los botones y las listas son hermanos: en escritorio se intercalan con «order» y el activo se ve como un panel
   abierto (botón arriba y lista debajo, mismo blanco, mismo filete de oro a la izquierda); en el móvil los botones
   pasan a una fila que se desliza y la lista del activo va debajo del clip. */
.mb-perfiles, .mb-listas { display: contents; }
.mb-nav { display: flex; flex-direction: column; }
.mb-perfil-btn, .mb-lista, .mb-leyenda { flex: none; } /* la barra desplaza, no encoge sus piezas */
.mb-perfil-btn:nth-child(1) { order: 0; } .mb-lista:nth-child(1) { order: 1; }
.mb-perfil-btn:nth-child(2) { order: 2; } .mb-lista:nth-child(2) { order: 3; }
.mb-perfil-btn:nth-child(3) { order: 4; } .mb-lista:nth-child(3) { order: 5; }
.mb-perfil-btn:nth-child(4) { order: 6; } .mb-lista:nth-child(4) { order: 7; }
.mb-perfil-btn:nth-child(5) { order: 8; } .mb-lista:nth-child(5) { order: 9; }
.mb-perfil-btn:nth-child(6) { order: 10; } .mb-lista:nth-child(6) { order: 11; }
.mb-perfil-btn:nth-child(7) { order: 12; } .mb-lista:nth-child(7) { order: 13; }
.mb-perfil-btn:nth-child(8) { order: 14; } .mb-lista:nth-child(8) { order: 15; }
.mb-leyenda { order: 20; }
.mb-perfil-btn { cursor: pointer; position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; padding: 10px 14px 10px 12px; margin: 0; border-radius: 14px 14px 0 0; border: 1px solid transparent; border-bottom: 0; text-align: left; color: var(--gris); transition: color 260ms var(--suave), background-color 300ms var(--suave), border-color 300ms var(--suave); }
.mb-perfil-btn svg { grid-row: span 2; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; transition: color 260ms, opacity 260ms; }
.mb-perfil-btn b { font-size: clamp(16px, 1.2vw, 17.5px); font-weight: 500; letter-spacing: -0.01em; color: var(--tinta-2); line-height: 1.2; transition: color 260ms; }
.mb-perfil-btn small { grid-column: 2; font-size: 12px; color: var(--gris-claro); letter-spacing: 0.02em; transition: color 260ms; }
.mb-perfil-btn i { grid-row: span 2; width: 7px; height: 7px; border-right: 1.5px solid var(--gris-claro); border-bottom: 1.5px solid var(--gris-claro); transform: rotate(-45deg); transition: transform 300ms var(--salida), border-color 300ms; }
/* Separador fino entre perfiles cerrados */
.mb-perfil-btn::after { content: ""; position: absolute; left: 12px; right: 14px; bottom: -1px; height: 1px; background: rgba(74, 79, 90, 0.1); transition: opacity 200ms; }
.mb-perfil-btn:hover { color: var(--oro-tinta); background: rgba(201, 168, 74, 0.06); }
.mb-perfil-btn:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -2px; border-radius: 14px; }
.mb-perfil-btn:hover b { color: var(--tinta); }
/* El activo: panel blanco con filete de oro, el icono en oro y la flecha girada */
.mb-perfil-btn.activo { background: #fff; border-color: rgba(74, 79, 90, 0.1); color: var(--oro-tinta); box-shadow: inset 3px 0 0 var(--amarillo); }
.mb-perfil-btn.activo::after { opacity: 0; }
.mb-perfil-btn.activo svg { opacity: 1; }
.mb-perfil-btn.activo b { color: var(--tinta); }
.mb-perfil-btn.activo small { color: var(--oro-tinta); }
.mb-perfil-btn.activo i { transform: rotate(45deg); border-color: var(--oro-tinta); }
.mb-lista { list-style: none; margin: 0; padding: 0 14px 0 12px; max-height: 0; overflow: hidden; background: #fff; border: 1px solid transparent; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: inset 3px 0 0 var(--amarillo); opacity: 0; transition: max-height 600ms var(--salida), opacity 300ms var(--suave), border-color 300ms; }
.mb-lista.activa { max-height: 600px; padding-bottom: 12px; opacity: 1; border-color: rgba(74, 79, 90, 0.1); margin-bottom: 8px; }
.mb-lista li { position: relative; padding: 6px 0 7px 38px; font-size: 14px; line-height: 1.35; color: var(--gris); cursor: pointer; transition: color 250ms var(--suave); }
.mb-lista li::before { content: ""; position: absolute; left: 20px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--gris-claro); transition: background-color 250ms, box-shadow 250ms; }
.mb-lista li.od::before { background: var(--terracota-hondo); opacity: 0.6; }
.mb-lista li:hover { color: var(--tinta); background: rgba(201, 168, 74, 0.07); border-radius: 8px; }
.mb-lista li:hover::before { background: var(--amarillo); }
.mb-lista li:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -2px; border-radius: 8px; }
.mb-lista li.actual { color: var(--tinta); font-weight: 500; }
.mb-lista li.actual::before { background: var(--amarillo); opacity: 1; box-shadow: 0 0 0 4px rgba(201, 168, 74, 0.2); }
.mb-lista li.od.actual::before { background: var(--terracota-hondo); box-shadow: 0 0 0 4px rgba(156, 107, 85, 0.18); }
/* La línea de oro que se llena mientras dura el turno de cada cosa */
.mb-lista li::after { content: ""; position: absolute; left: 38px; right: 0; bottom: 1px; height: 1.5px; background: var(--oro-mate); transform: scaleX(0); transform-origin: left; }
.mb-lista li.actual::after { animation: mb-turno var(--mb-turno, 6s) linear forwards; }
@keyframes mb-turno { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mb-leyenda { display: flex; align-items: center; gap: 9px; margin: 14px 0 0 12px; font-size: 12.5px; color: var(--gris); }
.mb-leyenda i { width: 6px; height: 6px; border-radius: 50%; background: var(--terracota-hondo); opacity: 0.7; }

/* ---------- Escritorio (28-oct): selector segmentado en vez de acordeón ----------
   La CTO: los botones-tarjeta con icono «parecen cutres, no de una app pro», y menos con barra de desplazamiento.
   Ahora los perfiles son un control segmentado de 3x2 (como los de una app de trabajo) y debajo va la lista del
   activo entera, sin caja ni scroll: con 8 cosas como mucho cabe en la primera pantalla. */
@media (min-width: 901px) {
  .mb-nav { display: block; max-height: none; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; margin-top: 26px; }
  .mb-perfiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 12px; background: rgba(74, 79, 90, 0.06); box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.07); }
  .mb-perfil-btn { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--gris); }
  .mb-perfil-btn svg, .mb-perfil-btn small, .mb-perfil-btn i, .mb-perfil-btn::after { display: none; }
  .mb-perfil-btn b { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-perfil-btn:hover { background: rgba(255, 255, 255, 0.6); color: var(--tinta); }
  .mb-perfil-btn:focus-visible { border-radius: 9px; }
  .mb-perfil-btn.activo { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(30, 34, 42, 0.08), 0 0 0 1px rgba(74, 79, 90, 0.08); }
  .mb-listas { display: block; margin-top: 18px; }
  .mb-lista { max-height: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; display: none; opacity: 1; }
  .mb-lista.activa { display: block; padding: 0; margin: 0; }
  .mb-lista li { padding: 7px 0 8px 22px; }
  .mb-lista li::before { left: 4px; top: 13px; }
  .mb-lista li::after { left: 22px; }
  .mb-lista li:hover { background: transparent; }
  .mb-leyenda { margin-left: 0; }
  /* Sin botones arriba (la CTO, 28-oct: «quita Solicita entrar y Qué es ser miembro y dale importancia a lo que
     tiene»): la lista es lo que se lee, a tamaño de texto y no de nota al pie */
  .mb-nav { margin-top: 30px; }
  .mb-perfil-btn { height: 40px; }
  .mb-perfil-btn b { font-size: 14.5px; }
  .mb-listas { margin-top: 22px; }
  .mb-lista li { padding: 9px 0 10px 26px; font-size: 16.5px; line-height: 1.35; color: var(--tinta-2); }
  .mb-lista li::before { left: 5px; top: 17px; width: 7px; height: 7px; }
  .mb-lista li::after { left: 26px; }
  .mb-lista li.actual { color: var(--tinta); }
  .mb-leyenda { margin-top: 16px; font-size: 13px; }
}

/* ---------- La primera pantalla como escaparate (28-oct, la CTO: «el primer bloque debería ser wow; no me
   pararía a leerlo») ----------
   Una lista de seis líneas no la lee nadie. Ahora lo que pidió el asesor es el TITULAR: la cosa activa sale a lo
   grande y cambia sola, y el resto del perfil se queda en barras de «historias» (cada una se llena mientras dura
   su turno y se puede pinchar). La pantalla flota en perspectiva sobre los engranajes y se endereza al pasar el
   ratón: es la única cosa que se mueve por su cuenta, además del pase. */
@media (min-width: 901px) {
  .mb-quien { min-height: 100vh; }
  .mb-quien-int { grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.42fr); align-items: center; }
  .mb-quien-tarjeta { margin: -34px -34px -30px; }
  .mb-quien-cab .respiro { font-size: clamp(24px, 2vw, 30px); }
  .mb-quien-cab .linea-seccion { margin-top: 10px; }
  .mb-nav { margin-top: 22px; }
  .mb-listas { position: relative; margin-top: 0; padding-top: clamp(130px, 11vw, 160px); }
  .mb-lista.activa { display: flex; gap: 6px; position: static; }
  /* Cada barra es el propio li: la pista y el relleno son dos fondos (el li no puede llevar posición, porque el
     texto de la cosa activa se coloca respecto a toda la caja de listas) */
  .mb-lista li { position: static; flex: 1 1 0; height: 24px; padding: 0; font-size: 0; color: transparent; border-radius: 0; background: linear-gradient(var(--oro-mate), var(--oro-mate)) left center / 0% 3px no-repeat, linear-gradient(rgba(74, 79, 90, 0.16), rgba(74, 79, 90, 0.16)) center / 100% 3px no-repeat; }
  .mb-lista li.od { background: linear-gradient(var(--terracota-hondo), var(--terracota-hondo)) left center / 0% 3px no-repeat, linear-gradient(rgba(156, 107, 85, 0.25), rgba(156, 107, 85, 0.25)) center / 100% 3px no-repeat; }
  .mb-lista li::before, .mb-lista li::after { display: none; }
  .mb-lista li:hover { background-color: transparent; }
  .mb-lista li.actual { animation: mb-barra var(--mb-turno, 7s) linear forwards; }
  /* El titular: el texto de la cosa activa, sacado de su barra y puesto encima de todas */
  .mb-lista li span { position: absolute; left: 0; right: 0; bottom: 34px; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 400; color: var(--tinta); opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--suave), transform 700ms var(--salida); pointer-events: none; text-wrap: balance; }
  .mb-lista li.actual span { opacity: 1; transform: none; }
  .mb-lista li.actual { font-weight: 400; }
  .mb-leyenda { display: none; }
  /* La pantalla, flotando */
  .mb-quien-int { perspective: 1800px; }
  /* Tras posarse (sitio.js pone .puesta), se queda girada; hace falta la misma especificidad que esa regla */
  .js .mb-quien-lamina[data-posa].puesta, .mb-quien-lamina { transform: rotateY(-9deg) rotateX(3deg); transform-origin: 0% 50%; box-shadow: 0 2px 4px rgba(40, 32, 14, 0.06), 0 30px 80px -10px rgba(40, 32, 14, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6); }
  .js .mb-quien-lamina[data-posa].puesta { transition: transform 900ms var(--salida); }
  .js .mb-quien-lamina[data-posa].puesta:hover { transform: none; }
}
/* ---------- Las bandas: un perfil por fila, sus pantallas pasando (28-oct) ----------
   Como la cinta de opiniones de Rojumar: el título del perfil fijo a la izquierda y, a su derecha, las pantallas
   (recortes reales, a altura fija para que se lean) pasando en bucle con su frase debajo. Se para al pasar el
   ratón; con «reducir movimiento» no se mueve y se desliza a mano. La vitrina vieja y la tarjeta, ocultas. */
.mb-quien-con-bandas .mb-vitrina, .mb-quien-con-bandas .mb-quien-tarjeta { display: none; }
.mb-quien-con-bandas { min-height: 0; padding-bottom: clamp(56px, 7vw, 100px); }
.mb-quien-con-bandas .mb-quien-fondo::after { background: rgba(252, 252, 251, 0.8); }
.mb-quien-con-bandas .mb-quien-int { display: block; }
/* El título, alineado a la izquierda con las bandas (la CTO, 28-oct: centrado «no pinta nada ahí») */
/* Todo el ancho de la ventana, con un margen corto: con el contenedor de la web sobraba sitio a los dos lados */
.mb-quien-con-bandas .mb-quien-int { max-width: none; width: 100%; padding-inline: clamp(16px, 3.5vw, 56px); }
.mb-quien-con-bandas .mb-quien-cab { max-width: 760px; margin: 0; text-align: left; }
.mb-quien-con-bandas .mb-quien-cab .respiro { font-size: clamp(32px, 3.4vw, 50px); }
.mb-quien-con-bandas .mb-quien-cab .linea-seccion { margin: 14px 0 0; max-width: none; font-size: clamp(16px, 1.25vw, 19px); }
/* Las bandas llegan hasta el borde derecho de la ventana: el ancho que sobra es para las pantallas */
.mb-bandas { margin-top: clamp(36px, 4.5vw, 64px); margin-right: calc(-1 * clamp(16px, 3.5vw, 56px)); display: grid; gap: clamp(36px, 4vw, 56px); }
.mb-banda { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(16px, 1.8vw, 28px); }
/* El área, en una card estrecha con la palabra en vertical (de abajo arriba, como el lomo de un libro): ocupa
   poco y deja el ancho a las pantallas. Mide lo mismo que ellas. */
.mb-banda-titulo { margin: 6px 0 0; height: clamp(240px, 20vw, 290px); width: clamp(52px, 4.4vw, 64px); display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.1), 0 16px 36px -18px rgba(40, 32, 14, 0.3); }
.mb-banda-titulo span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; letter-spacing: 0.01em; color: var(--tinta); white-space: nowrap; }
/* Sin fundidos en los bordes: las pantallas se ven enteras y nítidas hasta el corte */
.mb-banda-ventana { position: relative; overflow: hidden; padding: 6px 0 14px; }
.mb-banda-pista { display: flex; width: max-content; will-change: transform; }
.mb-banda-tramo { display: flex; gap: clamp(28px, 3vw, 48px); padding-right: clamp(28px, 3vw, 48px); }
/* La card de la pantalla mide lo que la imagen: si la frase es más larga, no la estira con un hueco blanco */
.mb-banda-pant { margin: 0; width: max-content; max-width: 880px; display: flex; flex-direction: column; align-items: flex-start; }
.mb-banda-pant .mb-banda-img { width: fit-content; }
/* La frase no cuenta para el ancho (contain): se ajusta al de su pantalla en vez de ensancharla */
.mb-banda-pant figcaption { contain: inline-size; width: 100%; box-sizing: border-box; }
/* La altura no pasa de la de los recortes (288-510 px de alto) para no ampliarlos: ampliados se ven borrosos */
.mb-banda-img { height: clamp(240px, 20vw, 290px); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.12), 0 1px 2px rgba(40, 32, 14, 0.06), 0 16px 36px -16px rgba(40, 32, 14, 0.35); }
.mb-banda-img img { display: block; height: 100%; width: auto; max-width: 880px; object-fit: cover; object-position: left top; }
/* La frase va sobre su propia card: encima de los engranajes, suelta, no se leía */
.mb-banda-pant figcaption { margin-top: 12px; display: inline-block; max-width: 46ch; padding: 10px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.1), 0 6px 16px -10px rgba(40, 32, 14, 0.4); font-size: clamp(14px, 1vw, 15.5px); font-weight: 500; line-height: 1.4; color: #2b2f36; }
.mb-banda-pant figcaption b { font-weight: 600; color: var(--oro-tinta); }
/* Banda grande (Contables, 28-oct): la CTO, con las pantallas recortadas y pequeñas, «no demuestran lo que es».
   Cada pantalla es una captura a doble resolución de la pantalla de trabajo entera y se ve casi a tamaño real:
   ancho propio (--w, en px de pantalla) sin pasar de la ventana, alto el que salga. Nunca más ancha que su
   captura, para que no se amplíe y se vea borrosa. */
.mb-banda-grande .mb-banda-titulo { height: clamp(280px, 29vw, 420px); }
.mb-banda-grande .mb-banda-pant { max-width: none; }
.mb-banda-grande .mb-banda-img { height: auto; }
/* Todas se quedan a la misma altura; las más altas, con el ratón encima, crecen hasta verse enteras (la CTO, 28-oct).
   La cinta ya se para con el ratón encima, así que da tiempo a leerlas. */
.mb-banda-grande .mb-banda-img img { width: min(var(--w, 1000px), 66vw); max-width: none; height: auto; min-height: clamp(280px, 29vw, 420px); max-height: clamp(280px, 29vw, 420px); object-fit: cover; object-position: left top; transition: max-height 450ms var(--suave, ease); }
.mb-banda-grande .mb-banda-pant:hover .mb-banda-img img { max-height: 1400px; }
.mb-banda-grande .mb-banda-flecha { top: calc(6px + clamp(280px, 29vw, 420px) / 2); }
.mb-banda-flecha { position: absolute; z-index: 2; top: calc(6px + clamp(240px, 20vw, 290px) / 2); transform: translateY(-50%); width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--tinta); cursor: pointer; box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.14), 0 8px 20px -8px rgba(40, 32, 14, 0.45); transition: background-color .15s, color .15s; }
.mb-banda-flecha.ant { left: 12px; }
.mb-banda-flecha.sig { right: clamp(16px, 3vw, 48px); }
.mb-banda-flecha:hover { background: #848a95; color: #fff; }
.mb-banda-flecha:focus-visible { outline: 2px solid #848a95; outline-offset: 3px; }
.mb-banda-flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .mb-banda { gap: 10px; }
  .mb-banda-titulo { height: 190px; width: 44px; }
  .mb-banda-titulo span { font-size: 19px; }
  .mb-banda-img { height: 190px; }
  .mb-banda-grande .mb-banda-img img { width: min(var(--w, 1000px), 80vw); max-height: 420px; }
  .mb-banda-grande .mb-banda-titulo { height: 240px; }
  .mb-banda-grande .mb-banda-flecha { top: calc(6px + 120px); }
  .mb-banda-img img { max-width: 78vw; }
  .mb-banda-flecha { top: calc(6px + 95px); width: 38px; height: 38px; }
}

/* Carrusel en abanico (js/miembros.js añade .mb-carrusel a las bandas grandes). Todas las pantallas comparten caja
   (--cw x --ch) para que el abanico sea regular; cada una se coloca por su distancia --d a la del centro: las vecinas,
   más pequeñas y giradas hacia dentro; más allá no se ven. Las vecinas se apagan un poco pero no se desenfocan: la
   CTO no quiere nada «difuso». */
.mb-carrusel { --cw: min(1040px, 64vw); --ch: clamp(300px, 31vw, 480px); }
.mb-carrusel .mb-banda-titulo { height: var(--ch); }
.mb-carrusel .mb-banda-ventana { padding: 0; overflow-x: clip; overflow-y: visible; perspective: 2200px; transition: height 450ms var(--suave, ease); }
.mb-carrusel .mb-banda-pista { position: relative; width: 100%; height: 100%; }
.mb-carrusel .mb-banda-tramo { display: contents; }
.mb-carrusel .mb-banda-pant { position: absolute; top: 0; left: 50%; width: var(--cw); cursor: pointer; transform-origin: 50% 35%;
  transform: translateX(calc(-50% + var(--d, 0) * var(--cw) * 0.6)) translateZ(calc(var(--ad, 0) * -160px)) rotateY(calc(var(--d, 0) * -22deg)) scale(calc(1 - var(--ad, 0) * 0.17));
  opacity: 0; z-index: 1; pointer-events: none;
  transition: transform 800ms var(--suave, cubic-bezier(.22, .8, .25, 1)), opacity 600ms, filter 600ms; }
.mb-carrusel .mb-banda-pant.vecina { opacity: 1; z-index: 2; pointer-events: auto; filter: brightness(.94) saturate(.75); }
.mb-carrusel .mb-banda-pant.vecina:hover { filter: none; }
.mb-carrusel .mb-banda-pant.actual { opacity: 1; z-index: 3; pointer-events: auto; cursor: default; }
.mb-carrusel .mb-banda-img { width: 100%; box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.12), 0 2px 4px rgba(40, 32, 14, 0.06), 0 30px 60px -28px rgba(40, 32, 14, 0.5); }
.mb-carrusel .mb-banda-img img { width: 100%; min-height: var(--ch); max-height: var(--ch); }
.mb-carrusel .mb-banda-pant.actual:hover .mb-banda-img img { max-height: 1400px; }
.mb-carrusel .mb-banda-pant:not(.actual):hover .mb-banda-img img { max-height: var(--ch); }
/* Sólo se lee la frase de la del centro; la línea de oro de abajo es el turno: al llenarse pasa a la siguiente */
.mb-carrusel .mb-banda-pant figcaption { position: relative; overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms; }
.mb-carrusel .mb-banda-pant.actual figcaption { opacity: 1; transform: none; transition-delay: 250ms; }
.mb-carrusel .mb-banda-pant figcaption::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--oro-mate); transform: scaleX(0); transform-origin: left; }
.mb-carrusel.en-pase .mb-banda-pant.actual figcaption::after { animation: mb-turno 6.5s linear forwards; }
.mb-carrusel.quieto .mb-banda-pant.actual figcaption::after { animation-play-state: paused; }
@keyframes mb-turno { to { transform: scaleX(1); } }
.mb-carrusel .mb-banda-flecha { top: calc(var(--ch) / 2); z-index: 5; }
.mb-carrusel .mb-banda-flecha.ant { left: calc(50% - var(--cw) / 2 - 23px); }
.mb-carrusel .mb-banda-flecha.sig { right: auto; left: calc(50% + var(--cw) / 2 - 23px); }
.mb-banda-puntos { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
.mb-banda-puntos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background: rgba(74, 79, 90, 0.28); cursor: pointer; transition: width 300ms, background-color 300ms; }
.mb-banda-puntos button.activo { width: 26px; background: var(--oro-mate); }
.mb-banda-puntos button:focus-visible { outline: 2px solid #848a95; outline-offset: 3px; }
@media (max-width: 900px) {
  .mb-carrusel { --cw: 78vw; --ch: 260px; }
  .mb-carrusel .mb-banda-pant { transform: translateX(calc(-50% + var(--d, 0) * var(--cw) * 0.7)) translateZ(calc(var(--ad, 0) * -120px)) rotateY(calc(var(--d, 0) * -18deg)) scale(calc(1 - var(--ad, 0) * 0.14)); }
  .mb-carrusel .mb-banda-flecha.ant { left: 4px; }
  .mb-carrusel .mb-banda-flecha.sig { left: auto; right: 4px; }
}
@media (prefers-reduced-motion: reduce) { .mb-carrusel .mb-banda-pant { transition: opacity 300ms; } }

/* Selector de área (js/miembros.js lo pone encima de las bandas): una sola área a la vista. Un raíl blanco con las
   cuatro; la elegida, en gris oscuro de la casa con letra blanca, como un interruptor. Sin barra de desplazamiento:
   en el móvil se reparte en dos filas. */
.mb-areas { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.12), 0 10px 26px -14px rgba(40, 32, 14, 0.4); }
.mb-areas button { border: 0; background: transparent; padding: 11px 22px; border-radius: 999px; font: inherit; font-size: clamp(15px, 1.1vw, 17px); font-weight: 500; color: #4a4f5a; cursor: pointer; transition: background-color .2s, color .2s; }
.mb-areas button:hover { color: var(--tinta); background: rgba(132, 138, 149, 0.12); }
.mb-areas button.activo { background: #848a95; color: #fff; }
.mb-areas button:focus-visible { outline: 2px solid #848a95; outline-offset: 2px; }
.mb-bandas > .mb-banda[hidden] { display: none; }
.mb-bandas > .mb-banda:not([hidden]) { animation: mb-area-entra 450ms var(--suave, ease) both; }
@keyframes mb-area-entra { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) { .mb-areas { border-radius: 18px; } .mb-areas button { padding: 9px 14px; font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .mb-bandas > .mb-banda:not([hidden]) { animation: none; } }

/* Escalera (js/miembros.js, [data-escalera]): cada punto entra cuando le toca, con su número delante, para que se
   lean en orden: 01, luego 02, luego 03 */
[data-escalera] > li { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--suave, ease), transform 700ms var(--suave, ease); transition-delay: calc(var(--i, 0) * 650ms + 200ms); }
[data-escalera].encendida > li { opacity: 1; transform: none; }
[data-escalera] > li .mb-pilar-num { display: inline-block; opacity: 0; transform: scale(.7); transition: opacity 500ms, transform 600ms var(--suave, ease); transition-delay: calc(var(--i, 0) * 650ms + 200ms); }
[data-escalera].encendida > li .mb-pilar-num { opacity: 1; transform: none; }

@keyframes mb-barra { from { background-size: 0% 3px, 100% 3px; } to { background-size: 100% 3px, 100% 3px; } }
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .js .mb-quien-lamina[data-posa].puesta, .mb-quien-lamina { transform: none; }
  .mb-lista li span { transition: opacity 200ms linear; transform: none; }
}

/* ---------- El clip grande: todas las pantallas apiladas, sólo la activa a la vista ----------
   La que entra llega con un acercamiento corto y la saliente se va fundiendo debajo: nunca hay un hueco gris. */
.mb-quien-lamina { aspect-ratio: 16 / 10; background: var(--humo); }
.mb-quien-lamina > video, .mb-quien-lamina > img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 650ms var(--suave), transform 1400ms var(--salida); }
.mb-quien-lamina > .activo { opacity: 1; transform: none; z-index: 1; }
.mb-quien-lamina > .saliendo { opacity: 1; z-index: 0; transition: opacity 650ms var(--suave) 300ms; }
.mb-quien-rotulo { z-index: 3; }
.mb-quien-rotulo span { transition: opacity 250ms; }
.mb-quien-rotulo.od i { background: var(--terracota-hondo); }
/* Arriba a la derecha del clip: quién lo pidió, en cristal claro */
.mb-quien-pedido { position: absolute; right: 14px; top: 12px; z-index: 3; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; padding: 7px 13px; border-radius: 999px; background: rgba(252, 252, 251, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.1), 0 6px 18px rgba(50, 38, 12, 0.08); font-size: 12.5px; color: var(--gris); }
.mb-quien-pedido b { font-weight: 500; color: var(--oro-tinta); }

/* En la portada, la vitrina va como tramo: el titular arriba a lo ancho y, debajo, barra + clip */
.mb-quien.mb-quien-tramo { padding-top: clamp(64px, 8vw, 112px); }
.mb-quien-tramo .mb-quien-int { grid-template-rows: auto auto; }
.mb-quien-tramo .mb-quien-cab { grid-column: 1 / -1; max-width: 820px; }
.mb-quien-tramo .mb-quien-cab .respiro { font-size: clamp(32px, 3.6vw, 52px); }
.mb-quien-tramo .mb-quien-cab .linea-seccion { font-size: clamp(16px, 1.25vw, 19px); max-width: 60ch; }
.mb-quien-tramo .mb-quien-acciones { grid-column: 1; grid-row: 3; margin-top: 26px; }
.mb-quien-tramo .mb-nav { grid-row: 2; margin-top: clamp(28px, 3.5vw, 48px); }
.mb-quien-tramo .mb-quien-lamina { grid-row: 2 / span 2; align-self: start; margin-top: clamp(28px, 3.5vw, 48px); }

/* =====================================================================================================
   El golpe: la frase sola, a lo grande, con la foto de la casa al fondo
   ===================================================================================================== */
.mb-golpe { position: relative; padding: clamp(80px, 11vw, 160px) 0; background: #fcfcfb; text-align: center; }
.mb-golpe .mb-golpe-int { max-width: 900px; }
.mb-golpe .etiqueta { display: block; margin-bottom: 18px; }
.mb-golpe .respiro.grande { font-size: clamp(38px, 6vw, 92px); line-height: 1.02; }
.mb-golpe .linea-seccion { margin: 22px auto 0; font-size: clamp(17px, 1.4vw, 21px); max-width: 48ch; }
/* Con la foto de los remeros de Rojumar a lo ancho (la CTO, 27-oct: «es buenísima»): cinco remeros en un lago al
   amanecer, el bote abajo a la derecha. El texto va en el cielo, arriba a la izquierda, sin tapar el bote; un velo
   blanco suave por la izquierda para que se lea, nada de beige. Se lee como lo que es: un equipo que rema junto. */
.mb-golpe-foto { min-height: clamp(520px, 62vw, 860px); display: flex; align-items: flex-start; padding: clamp(72px, 9vw, 140px) 0; text-align: left; isolation: isolate; }
.mb-golpe-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mb-golpe-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.03); animation: mb-ken 40s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
@keyframes mb-ken { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.08) translate(-1%, 0.6%); } }
.mb-golpe-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(252, 252, 251, 0.82) 0%, rgba(252, 252, 251, 0.6) 34%, rgba(252, 252, 251, 0.12) 62%, rgba(252, 252, 251, 0) 100%), linear-gradient(180deg, rgba(252, 252, 251, 0.5) 0, rgba(252, 252, 251, 0) 180px); }
.mb-golpe-foto .mb-golpe-int { max-width: none; }
.mb-golpe-foto .mb-golpe-int > * { max-width: 640px; }
.mb-golpe-foto .respiro.grande { font-size: clamp(38px, 5.2vw, 78px); }
.mb-golpe-foto .linea-seccion { margin-left: 0; }
.mb-golpe-foto .mb-golpe-acciones { margin-top: 28px; }
/* En el móvil la foto va debajo del texto, entera y a lo ancho (con el texto encima tapaba el bote) */
@media (max-width: 900px) { .mb-golpe-foto { min-height: 0; display: block; padding: 56px 0 0; } .mb-golpe-fondo { position: static; height: 64vw; margin-top: 28px; } .mb-golpe-fondo img { object-position: 60% 100%; transform: none; animation: none; } .mb-golpe-fondo::after { background: linear-gradient(180deg, rgba(252, 252, 251, 0.6) 0, rgba(252, 252, 251, 0) 30%); } }
@media (prefers-reduced-motion: reduce) { .mb-golpe-fondo img { animation: none; } }
/* Las palabras suben desde su máscara una línea tras otra (js/miembros.js numera las líneas, como los cierres) */
.mb-lineas .c-palabra { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.js .mb-lineas .c-palabra > span { display: inline-block; transform: translateY(110%); transition: transform 1000ms var(--salida) calc(var(--l, 0) * 140ms + 80ms); }
.js .visto .mb-lineas .c-palabra > span { transform: none; }

/* =====================================================================================================
   La red: tres pilares a la izquierda y el dibujo que se mueve a la derecha
   ===================================================================================================== */
.mb-red-tramo { background: #fff; }
.mb-pilares { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.mb-pilares li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; align-items: start; padding-top: 18px; border-top: 1px solid rgba(74, 79, 90, 0.12); }
.mb-pilar-num { font-size: clamp(30px, 2.6vw, 40px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--oro-mate); font-variant-numeric: tabular-nums; }
.mb-pilares h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--tinta); text-wrap: balance; }
.mb-pilares h3 em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }
.mb-pilares p { margin-top: 8px; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.5; color: var(--tinta-2); max-width: 44ch; }
.mb-privado { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 16px; border-radius: 14px; background: var(--humo); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; color: var(--tinta-2); max-width: 46ch; }
.mb-privado svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--oro-tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mb-privado b { font-weight: 500; color: var(--tinta); }
.mb-red { position: relative; margin: 0 auto; max-width: 460px; }
.mb-red svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-red-orbita { fill: none; stroke: rgba(74, 79, 90, 0.12); stroke-width: 1; stroke-dasharray: 2 6; }
.mb-red-radios line { stroke: rgba(74, 79, 90, 0.14); stroke-width: 1.2; stroke-dasharray: 160; stroke-dashoffset: 0; }
.mb-red-radios line:not(.mb-red-pide) { animation: mb-red-sale 4s var(--salida) infinite; }
.mb-red-pide { stroke: var(--terracota-hondo); stroke-width: 2; stroke-dasharray: 160; animation: mb-red-pide 4s var(--salida) infinite; }
.mb-red-nodos circle { fill: var(--fondo); stroke: var(--gris-claro); stroke-width: 1.5; animation: mb-red-llega 4s var(--suave) infinite; }
.mb-red-nodos .mb-red-uno { animation: mb-red-uno 4s var(--suave) infinite; }
.mb-red-centro { fill: var(--fondo); stroke: var(--oro-mate); stroke-width: 2; }
.mb-red-onda { fill: none; stroke: var(--oro-mate); stroke-width: 1.5; transform-origin: 200px 200px; animation: mb-red-onda 4s var(--salida) infinite; }
/* La «A» del logo en el centro (la CTO: «la A debe ser la A del logo»): la máscara img/a_marca.svg teñida del oro
   del logo, centrada en el círculo del SVG (el círculo mide r=34 de 400) */
/* La «A» del logo tal cual, con su «LEGAL» (la CTO, 27-oct: la máscara dibujaba otra A, cortada) */
.mb-red-logo { position: absolute; left: 50%; top: 46%; width: 9%; aspect-ratio: 203 / 209; transform: translate(-50%, -50%); background: url("../img/a_logo.png") center / contain no-repeat; pointer-events: none; }
/* 0-20 %: el despacho se enciende; 20-40 %: la petición viaja al centro; 40-55 %: se programa (la onda);
   55-80 %: sale a todos; 80-100 %: todo encendido y se apaga */
@keyframes mb-red-uno { 0% { fill: var(--fondo); stroke: var(--gris-claro); } 8%, 90% { fill: var(--terracota-hondo); stroke: var(--terracota-hondo); } 100% { fill: var(--fondo); stroke: var(--gris-claro); } }
@keyframes mb-red-pide { 0%, 18% { stroke-dashoffset: 160; opacity: 1; } 40%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mb-red-onda { 0%, 40% { transform: scale(1); opacity: 0; } 44% { opacity: 0.9; } 58%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes mb-red-sale { 0%, 52% { stroke: rgba(74, 79, 90, 0.14); stroke-dashoffset: 160; } 53% { stroke: var(--oro-mate); stroke-dashoffset: 160; } 74%, 90% { stroke: var(--oro-mate); stroke-dashoffset: 0; } 100% { stroke: rgba(74, 79, 90, 0.14); stroke-dashoffset: 0; } }
@keyframes mb-red-llega { 0%, 70% { fill: var(--fondo); stroke: var(--gris-claro); } 76%, 90% { fill: var(--amarillo); stroke: var(--amarillo); } 100% { fill: var(--fondo); stroke: var(--gris-claro); } }
.mb-red-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; font-size: 13.5px; color: var(--gris); }
.mb-red-leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.mb-red-leyenda i { width: 8px; height: 8px; border-radius: 50%; }
.mb-red-leyenda i.uno { background: var(--terracota-hondo); }
.mb-red-leyenda i.centro { background: var(--fondo); box-shadow: inset 0 0 0 2px var(--oro-mate); }
.mb-red-leyenda i.todos { background: var(--amarillo); }

/* =====================================================================================================
   Diario de mejoras: fijo a la izquierda el titular y el clip; a la derecha, la lista con su hilo de oro
   ===================================================================================================== */
.mb-diario { background: #fff; }
.mb-diario-int { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 32px clamp(40px, 5vw, 88px); align-items: start; }
.mb-diario-cab { position: sticky; top: calc(var(--nav-alto, 72px) + 32px); }
.mb-diario-lamina { margin-top: 28px; overflow: hidden; }
/* El vídeo del diario (la CTO, 28-oct: «las novedades se quedan en facturación, hay que meter más»): una pantalla
   real por novedad, una tras otra (js/miembros.js). Cada una sale entera, para que se sepa dónde estamos, y luego se
   acerca a lo nuevo: --ox/--oy es el punto al que va el zoom y --s cuánto se acerca. Mientras, en la lista se
   marca la novedad que se está viendo. */
.mb-diario-paso { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: opacity 700ms var(--suave, ease); }
.mb-diario-paso.actual { opacity: 1; animation: mb-diario-zoom 7s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes mb-diario-zoom { 0%, 22% { transform: scale(1); } 45%, 100% { transform: scale(var(--s, 1.5)); } }
.mb-diario-lamina .rotulo { z-index: 2; }
.mb-diario-lista li > * { transition: opacity 500ms var(--suave, ease); }
.mb-diario-lista.en-marcha li:not(.ahora) > * { opacity: 0.45; }
.mb-diario-lista li.ahora::before { background: var(--oro-mate); }
@media (prefers-reduced-motion: reduce) { .mb-diario-paso.actual { animation: none; } }
.mb-diario-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.mb-diario-lista::before { content: ""; position: absolute; left: 96px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, var(--oro-mate), rgba(201, 168, 74, 0.1)); }
.mb-diario-lista li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 0; padding: 14px 0 18px; }
.mb-diario-lista li::before { content: ""; position: absolute; left: 92px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 2px var(--oro-mate); }
.mb-diario-lista time { grid-row: span 2; padding-top: 0; font-size: clamp(18px, 1.4vw, 21px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mb-diario-lista time::first-line { color: var(--tinta); }
.mb-area { display: inline-flex; align-items: center; gap: 8px; padding-left: 28px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-tinta); }
.mb-diario-lista p { padding-left: 28px; margin-top: 4px; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--tinta); max-width: 46ch; text-wrap: balance; }
/* Cada mejora entra un poco después que la anterior */
.mb-diario-lista li:nth-child(2) { transition-delay: 60ms; } .mb-diario-lista li:nth-child(3) { transition-delay: 120ms; }
.mb-diario-lista li:nth-child(4) { transition-delay: 180ms; } .mb-diario-lista li:nth-child(5) { transition-delay: 240ms; }

/* =====================================================================================================
   Quién entra: dos condiciones como láminas que se posan, con su icono fino
   ===================================================================================================== */
.mb-entra { background: #fff; }
/* El ajedrez del diario, más marcado que el 7 % general (la CTO, 28-oct) */
.mb-diario.con-fondo::before { opacity: 0.2; }
/* La llave (la CTO, 28-oct: «que se vea»). En la foto está en el centro y las tarjetas la tapaban; se amplía y se
   corre para que quede a la izquierda, bajo el texto, que es donde hay aire. Más presente que el 7 % de los demás
   fondos. (Se probó un fondo lleno de llaves: «no parecen llaves».) */
.mb-entra.con-fondo::before { opacity: 0.4; background-size: 170% auto; background-position: 89% 30%; }
@media (max-width: 900px) { .mb-entra.con-fondo::before { background-size: cover; background-position: center; opacity: 0.25; } }
.mb-entra-int { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 32px clamp(40px, 5vw, 88px); align-items: center; }
.mb-condiciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
/* La pregunta encima de las dos condiciones (la CTO, 28-oct), en dorado: dice qué son las tarjetas antes de leerlas */
.mb-condiciones-titulo { margin: 0 0 30px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--oro-tinta); }
.mb-condiciones li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 26px 28px 28px; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-lamina), inset 0 0 0 1px rgba(74, 79, 90, 0.08); }
.mb-condiciones li::before { content: ""; position: absolute; left: 28px; top: 0; width: 44px; height: 2px; background: var(--oro-mate); }
.mb-condiciones span { position: absolute; right: 24px; top: 22px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--oro-tinta); }
.mb-condiciones svg { grid-row: span 3; width: 40px; height: 40px; margin-top: 2px; fill: none; stroke: var(--oro-tinta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mb-condiciones b { font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--tinta); }
.mb-condiciones p { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.55; color: var(--tinta-2); max-width: 46ch; }
.mb-ramas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mb-ramas i { font-style: normal; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.18); }
.js .mb-condiciones li:nth-child(2) { transition-delay: 140ms; }
.mb-cab-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.mb-cab-acciones .ania-mas { margin-top: 0; }

/* =====================================================================================================
   Pertenecer: la cifra en su sello claro y, al lado, lo que se usa a precio de coste
   ===================================================================================================== */
.mb-pertenecer { background: #fcfcfb; }
.mb-pago { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 36px clamp(40px, 6vw, 96px); align-items: stretch; margin-top: clamp(32px, 4vw, 52px); }
.mb-sello { position: relative; padding: clamp(32px, 3.6vw, 52px); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-lamina), inset 0 0 0 1px rgba(74, 79, 90, 0.08); }
.mb-sello::before { content: ""; position: absolute; left: clamp(32px, 3.6vw, 52px); top: 0; width: 56px; height: 2px; background: var(--oro-mate); }
.mb-sello > b { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-tinta); }
.mb-sello strong { display: block; margin-top: 18px; font-size: clamp(84px, 9vw, 136px); font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mb-sello strong .mb-euro { font-size: 0.42em; letter-spacing: 0; color: var(--tinta-2); }
.mb-sello small { display: block; margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); color: var(--tinta-2); }
.mb-sello small i { font-style: normal; color: var(--gris-claro); }
.mb-sello small.mb-sin-permanencia { margin-top: 6px; font-weight: 500; color: var(--oro-tinta); }
.mb-sello p { margin: 22px 0 26px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--tinta); max-width: 34ch; }
.mb-uso > b { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-tinta); margin-bottom: 6px; }
/* Las tarifas, para leerlas en tres segundos (la CTO): la cifra grande en tinta, el concepto en negrita, una línea corta */
.mb-tarifas { list-style: none; margin: 0; padding: 0; }
.mb-tarifas li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0 16px; border-bottom: 1px solid rgba(74, 79, 90, 0.14); }
.mb-tarifas strong { font-size: clamp(19px, 1.65vw, 24px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; color: var(--tinta); font-variant-numeric: tabular-nums; text-wrap: balance; }
.mb-tarifas li:first-child strong { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.025em; }
.mb-tarifas small { font-size: 15.5px; line-height: 1.45; color: var(--tinta-2); }
.mb-nota { margin-top: 18px; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.5; color: var(--tinta); max-width: 60ch; }

/* =====================================================================================================
   La portada: «Ser miembro» en corto (tres pilares, la cifra y la llamada)
   ===================================================================================================== */
.mb-portada-ser { background: #fff; }
.mb-portada-ser .mb-pago { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
.mb-portada-ser .mb-pilares { margin-top: 0; }
.mb-portada-ser .mb-sello strong { font-size: clamp(72px, 7.5vw, 112px); }

/* =====================================================================================================
   Piezas que usa El futuro de la profesión (futuro-de-la-profesion.html)
   ===================================================================================================== */
.lamina.mb-zoom > video, .lamina.mb-zoom > img { transform: scale(var(--zs, 1)); transform-origin: var(--zo, 50% 50%); }
.mb-cita { position: relative; margin: 0; padding-left: 26px; font-size: clamp(22px, 2vw, 30px); font-weight: 300; line-height: 1.22; letter-spacing: -0.015em; color: var(--tinta); text-wrap: balance; }
.mb-cita::before { content: "“"; position: absolute; left: 0; top: -0.08em; font-size: 1.5em; font-weight: 500; color: var(--amarillo); line-height: 1; }
.mb-cifra { font-weight: 300; letter-spacing: -0.03em; line-height: 0.95; color: var(--tinta); }
.mb-cifra strong { font-weight: 300; font-size: clamp(76px, 9vw, 140px); font-variant-numeric: tabular-nums; }
.mb-cifra strong em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }
.mb-cifra small { display: inline-block; margin: 0 8px; font-size: clamp(18px, 1.8vw, 26px); color: var(--gris); letter-spacing: 0; }
.mb-cifra p { margin-top: 14px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--tinta-2); max-width: 30ch; text-wrap: balance; }
.mb-fuente, .mb-cifra small.mb-fuente { display: block; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris); max-width: 44ch; letter-spacing: 0; }
.mb-fuente b { font-weight: 500; color: var(--tinta-2); }
.mb-cifras-par { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: start; }
.mb-cifras-par .mb-cifra strong { font-size: clamp(60px, 6.6vw, 104px); }
.mb-cab-cifra { position: relative; padding: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 52px); border-radius: var(--radio); background: rgba(255, 255, 255, 0.8); box-shadow: var(--sombra-lamina), inset 0 0 0 1px rgba(74, 79, 90, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mb-cab-cifra::before { content: ""; position: absolute; left: clamp(28px, 3.4vw, 52px); top: 0; width: 44px; height: 2px; background: var(--oro-mate); }
.mb-informe { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(74, 79, 90, 0.14); }
.mb-informe .mb-fuente { margin-left: 26px; }
.mb-ir { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 15px; color: var(--gris); transition: color 200ms var(--suave); }
.mb-ir i { font-style: normal; transition: transform 300ms var(--salida); }
.mb-ir:hover { color: var(--amarillo); }
.mb-ir:hover i { transform: translateX(4px); }

/* =====================================================================================================
   Tamaños
   ===================================================================================================== */
@media (max-width: 1180px) {
  .mb-quien-int { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 900px) {
  /* Quién pidió qué en el móvil: titular, clip, los perfiles en una fila que se desliza y la lista del activo debajo */
  .mb-quien { padding-top: calc(var(--nav-alto) + var(--nav-margen) + 22px); }
  .mb-quien-int, .mb-quien-tramo .mb-quien-int { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .mb-quien-cab, .mb-quien-acciones, .mb-nav, .mb-quien-lamina, .mb-quien-tramo .mb-quien-cab, .mb-quien-tramo .mb-quien-acciones, .mb-quien-tramo .mb-nav, .mb-quien-tramo .mb-quien-lamina { grid-column: 1; grid-row: auto; }
  .mb-quien-cab { max-width: none; }
  .mb-quien-lamina, .mb-quien-tramo .mb-quien-lamina { order: 2; margin-top: 22px; }
  .mb-nav, .mb-quien-tramo .mb-nav { order: 3; margin-top: 8px; display: block; }
  .mb-quien-acciones, .mb-quien-tramo .mb-quien-acciones { order: 4; margin-top: 22px; }
  .mb-perfiles { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .mb-perfiles::-webkit-scrollbar { display: none; }
  .mb-perfil-btn { flex: none; width: auto; grid-template-columns: 20px auto; grid-template-rows: auto; column-gap: 8px; padding: 9px 14px 9px 11px; border-radius: 999px; border: 1px solid rgba(74, 79, 90, 0.14); scroll-snap-align: start; background: #fff; box-shadow: none; }
  .mb-perfil-btn::after, .mb-perfil-btn small, .mb-perfil-btn i { display: none; }
  .mb-perfil-btn svg { grid-row: auto; width: 20px; height: 20px; }
  .mb-perfil-btn b { font-size: 14px; white-space: nowrap; }
  .mb-perfil-btn.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; box-shadow: none; }
  .mb-perfil-btn.activo b { color: #fff; }
  .mb-listas { display: block; }
  .mb-lista, .mb-lista.activa { display: none; max-height: none; opacity: 1; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .mb-lista.activa { display: block; }
  .mb-lista li { padding: 7px 0 8px 22px; font-size: 14.5px; }
  .mb-lista li::before { left: 4px; top: 13px; }
  .mb-lista li::after { left: 22px; }
  .mb-leyenda { margin-left: 0; }
  .mb-quien-pedido { display: none; }
  .mb-diario-int, .mb-entra-int, .mb-pago, .mb-portada-ser .mb-pago { grid-template-columns: 1fr; }
  .mb-diario-cab { position: static; }
  .mb-diario-lamina { margin-top: 22px; }
  .mb-cab-cifra { max-width: 520px; }
}
@media (max-width: 640px) {
  .lamina.mb-zoom > video, .lamina.mb-zoom > img { transform: none; }
  /* El pie de foto del clip va debajo (estilo.css); «lo pidieron» no hace falta en el móvil */
  .mb-quien-lamina { margin-bottom: 40px; }
  .mb-golpe { padding: 64px 0; text-align: left; }
  .mb-golpe .respiro.grande { font-size: clamp(32px, 10vw, 44px); }
  .mb-golpe .linea-seccion { margin-left: 0; }
}
@media (max-width: 520px) {
  .mb-cita { font-size: clamp(20px, 5.8vw, 24px); padding-left: 22px; }
  .mb-pilares li { grid-template-columns: 40px minmax(0, 1fr); }
  .mb-diario-lista::before { left: 66px; }
  .mb-diario-lista li { grid-template-columns: 66px minmax(0, 1fr); }
  .mb-diario-lista li::before { left: 62px; }
  .mb-diario-lista time { font-size: 16px; }
  .mb-area, .mb-diario-lista p { padding-left: 20px; }
  .mb-condiciones li { grid-template-columns: 1fr; padding: 24px 20px; }
  .mb-condiciones svg { grid-row: auto; width: 32px; height: 32px; }
  .mb-sello strong, .mb-portada-ser .mb-sello strong { font-size: clamp(56px, 17vw, 72px); }
  .mb-cifra strong { font-size: clamp(64px, 19vw, 84px); }
  .mb-cifras-par { grid-template-columns: 1fr; }
  .mb-cifras-par .mb-cifra strong { font-size: clamp(56px, 17vw, 72px); }
  .mb-cab-cifra { padding: 24px 22px; }
}
/* Con «reducir movimiento» (la CTO lo tiene): la vitrina sigue pasando porque es el contenido, sin acercamientos;
   el dibujo de la red se queda quieto y entero; las palabras del golpe, ya en su sitio */
@media (prefers-reduced-motion: reduce) {
  .mb-quien-lamina > video, .mb-quien-lamina > img { transition-duration: 300ms !important; transform: none !important; }
  .mb-lista li.actual::after { animation-duration: var(--mb-turno, 6s) !important; }
  .mb-red * { animation: none !important; }
  .mb-red-uno, .mb-red-pide { stroke: var(--terracota-hondo); }
  .js .mb-lineas .c-palabra > span { transform: none; }
}

/* «Buscar el despacho en LinkedIn», bajo su campo: un enlace discreto, no otro botón */
.demo-form .demo-linkedin { justify-self: start; margin-top: 2px; font-size: 13px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
.demo-form .demo-linkedin:hover { color: var(--tinta); }