/* ============================================================
   MOVIMIENTO (rediseño R3, 20/oct/2026) — sólo en la portada. Viene de maqueta-2026/
   Lo que se toma de viralfeed.mx es el MOVIMIENTO, no las tarjetas:
   · titular que entra letra por letra
   · palabras resaltadas que se subrayan con el degradado de la marca
   · franja de marcas que corre sola
   · servicios en pila: cada panel se queda fijo y el siguiente sube
     encima; el de atrás se encoge, se apaga y se desenfoca (sticky-scale-blur)
   · ilustraciones que flotan
   Las tarjetas, la baraja de pólizas y el portafolio son los de Bimm.
   Con `prefers-reduced-motion` todo se queda quieto y legible.
   ============================================================ */

/* ── Titular letra por letra ─────────────────────────────── */
.mv-letras .bm-huye__letra{display:inline-block;opacity:0;transform:translateY(.45em);
  animation:mv-sube .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 18ms + 150ms)}
@keyframes mv-sube{to{opacity:1;transform:none}}

/* ── Palabras resaltadas ─────────────────────────────────── */
.mv-resalta{background:linear-gradient(90deg,#fd4a42,#fed18d,#5bf3dc) no-repeat 0 92% / 0% .22em;
  transition:background-size 1.1s cubic-bezier(.2,.7,.2,1) .35s;padding-bottom:.04em}
.is-visible .mv-resalta,.mv-resalta.is-visible{background-size:100% .22em}

/* ── Franja de marcas ────────────────────────────────────── */
.mv-marcas{padding:72px 0 0;overflow:hidden;margin:0 calc(-1 * var(--sec-pad-x,24px))}
.mv-marcas__titulo{text-align:center;color:var(--tinta-suave);font-size:15px;margin:0 0 18px}
.mv-marcas__pista{display:flex;gap:64px;width:max-content;animation:mv-corre 28s linear infinite}
.mv-marcas:hover .mv-marcas__pista{animation-play-state:paused}
.mv-marcas__pista span{font:700 26px/1 "Space Grotesk",sans-serif;letter-spacing:-.02em;color:var(--tinta);opacity:.42;white-space:nowrap}
.mv-marcas__mascara{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@keyframes mv-corre{to{transform:translateX(-50%)}}

/* ── Servicios en pila ───────────────────────────────────── */
.mv-pila{position:relative;margin:28px 0 56px}
.mv-panel{position:sticky;top:calc(150px + var(--n,0) * 16px);margin-bottom:28px;
  display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;
  min-height:420px;padding:48px 52px;transform-origin:50% 0;will-change:transform,filter}
.mv-panel:last-child{margin-bottom:0}
.mv-panel .bm-rotulo{margin:0 0 10px}
.mv-panel h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.035em;margin:0 0 14px}
.mv-panel p{margin:0 0 18px}
.mv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.mv-chips span{font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.07em;text-transform:uppercase;padding:7px 11px;border-radius:99px;border:1px solid var(--linea);color:var(--tinta-suave)}
.mv-chips span:nth-child(4n+1){border-color:#5bf3dc;background:color-mix(in srgb,#5bf3dc 14%,transparent)}
.mv-chips span:nth-child(4n+2){border-color:#fed18d;background:color-mix(in srgb,#fed18d 22%,transparent)}
.mv-chips span:nth-child(4n+3){border-color:#fd4a42;background:color-mix(in srgb,#fd4a42 10%,transparent)}
.mv-panel__ilus{display:grid;place-items:center;aspect-ratio:1/1;max-height:340px;justify-self:center;
  border-radius:28px;background:radial-gradient(closest-side,color-mix(in srgb,#5bf3dc 22%,transparent),transparent)}
.mv-panel__ilus img{width:78%;animation:mv-flota 5s ease-in-out infinite}
.mv-panel:nth-child(even) .mv-panel__ilus img{animation-delay:-2.5s}
@keyframes mv-flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-2deg)}}

/* ── WhatsApp flotante ───────────────────────────── */
.mv-wa{position:fixed;left:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:90;animation:mv-late 2.4s ease-in-out 3s infinite}
.mv-wa svg{width:30px;height:30px;fill:#fff}
@keyframes mv-late{0%,100%{transform:scale(1)}8%{transform:scale(1.12)}16%{transform:scale(1)}}

@media (max-width:900px){
  .mv-panel{grid-template-columns:1fr;padding:30px 24px;gap:18px;min-height:0;top:calc(118px + var(--n,0) * 10px)}
  .mv-panel__ilus{max-height:200px;order:-1}
  .mv-panel__ilus img{width:62%}
  .mv-marcas__pista span{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .mv-letras .bm-huye__letra{animation:none;opacity:1;transform:none}
  .mv-marcas__pista,.mv-panel__ilus img,.mv-wa{animation:none}
  .mv-panel{position:relative;top:auto}
  .mv-resalta{transition:none;background-size:100% .22em}
}

/* overflow:hidden convierte la sección en contenedor de scroll y el sticky deja de pegarse; clip recorta igual sin eso */
.bm-sec:has(.mv-pila){overflow:clip}

/* Los paneles son la tarjeta de VIDRIO de Bimm (no color sólido). Para que no se lea el panel
   de atrás, el vidrio va más esmerilado: se ven las cintas, no el texto. */
.bm-card.mv-panel{background:color-mix(in srgb,var(--papel) 72%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);backdrop-filter:blur(26px) saturate(1.25)}
.mv-panel:hover .mv-panel__ilus img{animation:mv-salta .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes mv-salta{0%{transform:translateY(0)}40%{transform:translateY(-26px) rotate(-6deg) scale(1.05)}100%{transform:translateY(0)}}

/* ── SECCIONES COMO HOJAS (lo «Apple» de Viralfeed) ─────────
   Cada sección se queda fija cuando su final llega al borde de abajo y la
   siguiente sube ENCIMA como una hoja: esquinas redondeadas, sombra y vidrio
   esmerilado (deja ver las cintas del fondo, no el contenido de atrás).
   La de atrás se aleja (escala y velo); la que entra crece y se enfoca.
   Los ELEMENTOS de adentro siguen siendo los de Bimm. */
.mv-hojas .bm-sec{position:sticky;transform-origin:50% 0;will-change:transform}
.mv-hojas .bm-sec.mv-hoja{border-radius:36px 36px 0 0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--papel) 55%,transparent),transparent 240px)!important;
  box-shadow:0 -1px 0 rgba(255,255,255,.85) inset,0 -22px 44px -18px rgba(18,32,31,.16)}
.mv-hojas .bm-sec>.bm-cont{transition:none}
.mv-hojas .bm-cierre.mv-hoja{background:transparent!important;box-shadow:none}
.bm-subnav{z-index:400}
.bm-cab{z-index:500}
@media (prefers-reduced-motion:reduce){.mv-hojas .bm-sec{position:relative;top:auto!important;transform:none!important}}