/* ============================================================
   UNIVERSAL LEARNING — Correcciones de RESPONSIVE MÓVIL
   Solo dentro de @media. NO afecta el desktop.
   Se carga DESPUÉS de los demás CSS en cada página.
   Decisiones aplicadas: menú sheet claro · hero corregido ·
   tarjetas en carrusel (flechas+dots) · autoridad sin overflow ·
   footer en grid 2 col.
   ============================================================ */

/* ===== Guardia global anti-overflow horizontal (todas las pantallas táctiles) ===== */
@media (max-width: 1024px) {
  /* 'clip' recorta el desborde horizontal SIN romper position:sticky (a diferencia de 'hidden') */
  html, body { overflow-x: clip; max-width: 100%; }
  /* Header siempre visible al hacer scroll, igual que en escritorio */
  .site-header { position: sticky !important; top: 0 !important; z-index: 100; }
}

/* ============================================================
   MÓVIL  ≤ 760px
   ============================================================ */
@media (max-width: 760px) {

  /* ---- Base tipográfica: bajar de 22px a escala móvil ---- */
  body { font-size: 16px; }

  /* ---- Eyebrows: más chicos, menos tracking, permiten 2 líneas (no se cortan) ---- */
  .eyebrow { font-size: 13px; letter-spacing: 0.1em; line-height: 1.3; gap: 8px; }
  .eyebrow::before { width: 18px; flex: 0 0 auto; }
  .hero-cred { white-space: normal !important; font-size: 12.5px !important; letter-spacing: 0.12em !important; line-height: 1.35 !important; }

  /* ---- Títulos y subtítulos a escala ---- */
  .section-title {
    font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.14 !important;
    white-space: normal !important;        /* anula nowrap inline que cortaba el título */
    width: auto !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
    overflow-wrap: break-word;
  }
  .section-sub { font-size: 16px !important; line-height: 1.55 !important; }
  .ao-h2, .authority h2 { font-size: clamp(26px, 7vw, 34px) !important; }
  .ao-lead { font-size: 16px !important; }

  /* ---- Botones: tamaño móvil, sin cortes, apilados a ancho completo (−20%) ---- */
  .btn { font-size: 12px !important; padding: 10px 18px !important; white-space: normal; line-height: 1.2; }
  .btn--lg { font-size: 13px !important; padding: 12px 21px !important; }
  /* "Solicitar este servicio" (detalle de soluciones) usa .sd__cta, no .btn: igualarlo */
  .sd__cta { font-size: 13px !important; padding: 12px 20px !important; gap: 8px !important; }
  .sd__cta svg { width: 15px !important; height: 15px !important; }
  /* CTA final del detalle: centrar texto y botón en móvil (Smart Tutor y demás sin imagen) */
  .sd__final-inner { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 22px !important; }

  /* Artículo checklist · bandas chevron: centrar el texto verticalmente (compensa la muesca inferior) */
  .flow-chevrons .fchev, .flow-chevrons .fchev:first-child {
    justify-content: center !important; align-items: center !important; text-align: center !important;
    padding-left: 22px !important; padding-right: 22px !important;
    padding-top: 26px !important; padding-bottom: 44px !important;
    min-height: 76px !important;
  }
  .flow-chevrons .fchev__title { text-align: center !important; }

  /* Artículo checklist · "Interpreta tu resultado": separar las 3 tarjetas
     para que el marcador "Vas en N" (que sobresale arriba) no se encime con la anterior */
  .chk-key { gap: 46px !important; }
  .header-actions .btn { font-size: 13px !important; padding: 10px 15px !important; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; width: 100%; }
  .final-cta .btn { width: 100%; max-width: 360px; }

  /* ============================================================
     1 · MENÚ  →  Sheet claro a pantalla completa (decisión 1B)
     Reusa .mobile-nav existente; solo cambia su piel en móvil.
     ============================================================ */
  .mobile-nav__panel {
    width: 100% !important; max-width: 100% !important;
    background: #fff !important;
    color: var(--ul-navy) !important;
    padding: 16px 22px calc(20px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
  }
  .mobile-nav__head { margin-bottom: 10px !important; padding-bottom: 12px; border-bottom: 1px solid var(--ul-border); }
  /* Logo blanco → logo a color sobre fondo claro (swap sin tocar el HTML) */
  .mobile-nav__head img { content: url("assets/logos/logo-color.png"); height: 40px !important; }
  .mobile-nav__close {
    border-color: var(--ul-border) !important;
    background: #fff !important; color: var(--ul-navy) !important;
    width: 44px !important; height: 44px !important;
  }
  .mobile-nav a.m-link {
    color: var(--ul-navy) !important;
    border-bottom-color: var(--ul-border) !important;
    font-size: 21px !important; font-weight: 600 !important;
    padding: 16px 2px !important;
    display: flex; align-items: center; justify-content: space-between;
  }
  .mobile-nav a.m-link::after { content: "›"; color: var(--ul-turquoise-dark); font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; opacity: 0.7; }
  .mobile-nav a.m-link.is-active { color: var(--ul-turquoise-dark) !important; }
  .mobile-nav a.m-link:hover { color: var(--ul-turquoise-dark) !important; }
  /* CTA fija al fondo del sheet */
  .mobile-nav .btn {
    margin-top: auto !important;
    margin-bottom: 4px; width: 100%;
    font-size: 17px !important; padding: 15px 22px !important;
  }

  /* ============================================================
     2 · HERO  →  título sobre imagen + botones debajo (decisión 2B)
     En Inicio el hero-cine ya cumple; aquí refuerzo legibilidad
     y aseguro botones a ancho completo bajo la imagen.
     ============================================================ */
  .hero-cine { height: clamp(420px, 78vw, 520px) !important; }
  .hero-cine__panel { bottom: 30px !important; }
  /* El eyebrow del hero quedaba pegado al header por un margin:-36px inline */
  .hero { margin-top: 0 !important; }
  .hero-actions, .hero-actions--end {
    margin-left: 0 !important; margin-right: 0 !important;   /* anula el margin:-40px inline que recortaba a la derecha */
    margin-top: 18px !important; justify-content: stretch !important;
  }

  /* ---- Heros unificados: mismo comportamiento que Soluciones · Sectores ----
     Cada página usa una clase de hero distinta; aquí las igualamos en móvil:
     mismo padding vertical, título fluido (sin medidas/nowrap inline) y sin overflow. */
  .sec-hero, .res-hero, .caso-hero, .nos-hero, .ct-hero, .gal-hero {
    padding-top: 44px !important; padding-bottom: 46px !important;
  }
  .sec-hero h1, .res-hero h1, .art-hero h1, .caso-hero h1,
  .nos-hero h1, .ct-hero h1, .gal-hero h1 {
    width: auto !important; max-width: 100% !important; height: auto !important;
    white-space: normal !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-top: 12px !important;
    font-size: clamp(27px, 7.6vw, 38px) !important; line-height: 1.16 !important;
  }
  .sec-hero .section-sub, .res-hero__lead, .art-hero__lead, .caso-hero__lead,
  .nos-hero__lead, .ct-hero__lead, .gal-hero__lead {
    font-size: 16px !important; line-height: 1.55 !important;
    width: auto !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important; margin-right: 0 !important;
  }
  .nos-hero__meta { gap: 8px !important; margin-top: 22px !important; flex-wrap: wrap; }

  /* Soluciones: leads de sector con margen/padding lateral inline que estrechaban el párrafo */
  .sector-intro__lead { margin-right: 0 !important; padding-right: 0 !important; }
  /* Footer brand: quita el padding-left inline en móvil */
  .footer-brand p { padding-left: 0 !important; }

  /* Inicio · tarjetas "Metodología/Demos/Testimonios/Casos": el width:1254px inline las cortaba */
  .c1-cards { width: auto !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 28px !important; }
  .c1-cards .pc-card { min-height: 0 !important; padding: 18px 16px !important; }
  .c1-cards .pc-ic-img { width: 46px !important; height: 46px !important; margin-bottom: 12px !important; }
  .c1-cards .pc h3 { font-size: 16px !important; }
  .c1-cards .pc p { font-size: 13.5px !important; min-height: 0 !important; margin-top: 6px !important; }

  /* Nosotros · valores (.nos-adn): el h4 con white-space:nowrap ensanchaba la columna y cortaba */
  .nos-adn { min-width: 0 !important; padding: 22px 14px !important; }
  .nos-adn h4 { white-space: normal !important; font-size: 17px !important; margin-top: 14px !important; overflow-wrap: break-word; }
  .nos-adn p { font-size: 13.5px !important; }

  /* Soluciones · botón cerrar del detalle: solo la ✕, separado del header (93px) y SOBRE él */
  .sd__closebtn {
    font-size: 0 !important; gap: 0 !important;
    top: 105px !important; margin-top: 8px !important; margin-right: 0 !important;
    z-index: 101 !important;                /* por encima del header (100) para que no quede detrás al deslizar */
    width: 44px !important; height: 44px !important; padding: 0 !important;
    border-radius: 50% !important; justify-content: center !important;
  }
  .sd__closebtn svg { width: 20px !important; height: 20px !important; }

  /* ---- Soluciones · "Elige tu ruta": 3 sectores en una fila (filtro) + info debajo ---- */
  .sector-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .sec-card { aspect-ratio: 1 / 1 !important; min-height: 0 !important; padding: 10px 6px !important; text-align: center !important; align-items: center !important; justify-content: center !important; }
  .sec-card__icon { width: 42px !important; height: 42px !important; margin: 0 auto 8px !important; }
  .sec-card__icon svg { width: 22px !important; height: 22px !important; }
  .sec-card h3 { font-size: 13px !important; line-height: 1.12 !important; text-align: center !important; }
  .sec-card p, .sec-card__cue { display: none !important; }   /* descripción y CTA pasan al detalle de abajo */

  /* ---- Tags / chips: reducidos considerablemente en móvil ---- */
  .nos-hero__tag, .sol-tag, .tech-chips span, .sector-pain,
  .gal-legend__item, .art-meta__item, .placeholder-tag, .demo-type,
  .caso-hero__cat, .sec-card__count, .sd__chip {
    font-size: 13px !important; letter-spacing: 0.02em !important;
    padding: 7px 12px !important; gap: 6px !important;
  }
  .nos-hero__tag svg, .sector-pain svg, .gal-legend__item svg,
  .art-meta__item svg, .caso-hero__cat svg {
    width: 14px !important; height: 14px !important;
  }

  /* ============================================================
     3 · TARJETAS  →  carrusel con asomo + dots + flechas (decisión 3A)
     Activado por movil.js que añade .mvl-car y los controles.
     ============================================================ */
  .mvl-car {
    display: flex !important; grid-template-columns: none !important;
    flex-wrap: nowrap !important; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    width: auto !important; transform: none !important;
    margin: 28px -18px 0 -18px !important;
    padding: 6px 18px 8px !important;
    scrollbar-width: none;
  }
  .mvl-car::-webkit-scrollbar { display: none; }
  .mvl-car > * {
    flex: 0 0 82% !important; min-width: 0; scroll-snap-align: center;
    margin-top: 0 !important; /* anula escalonados desktop (c1-cards, etc.) */
  }
  .mvl-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
  .mvl-dots { display: flex; gap: 7px; align-items: center; }
  .mvl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ul-border-strong); border: 0; padding: 0; cursor: pointer; transition: width .2s var(--ease-out), background .2s; }
  .mvl-dot.on { width: 22px; border-radius: 99px; background: var(--ul-turquoise-dark); }
  .mvl-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ul-border); background: #fff; color: var(--ul-navy); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; transition: background .2s, color .2s, opacity .2s; }
  .mvl-arrow svg { width: 18px; height: 18px; }
  .mvl-arrow--prev svg { transform: rotate(180deg); }
  .mvl-arrow:disabled { opacity: .35; cursor: default; }

  /* Tarjeta de "problemas / diagnóstico" (.dx-card): texto y tamaño a escala móvil */
  .dx-card { min-height: 0 !important; }
  .dx-card__title { font-size: 21px !important; line-height: 1.18 !important; }
  .dx-card__desc { font-size: 16px !important; line-height: 1.55 !important; padding-right: 0 !important; }
  .dx-card__cat { font-size: 13px !important; letter-spacing: 0.08em !important; }
  .dx-card__panel { padding: 22px 18px 60px 34px !important; }

  /* ---- Recursos · Artículos: sin overflow a la derecha ---- */
  .res-arts .ul-wrap { margin: 0 auto !important; }          /* anula margin:-50px 89px inline */
  .res-arts__intro { white-space: normal !important; font-size: 16px !important; line-height: 1.55 !important; }
  .art-panel { min-height: 360px !important; }
  .art-panel__title { font-size: 21px !important; line-height: 1.12 !important; }
  .art-panel__num { font-size: 56px !important; }
  .art-panel__meta { font-size: 14px !important; }
  .art-panel__go { font-size: 15px !important; }

  /* ---- Artículo (cuerpo): la columna se estrangulaba por un margin:180px lateral inline ---- */
  .art-col { margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; }
  /* Botón cerrar: solo la ✕ (oculta el texto "Cerrar") */
  .art-close {
    font-size: 0 !important; gap: 0 !important;
    top: 116px !important;                 /* baja la ✕ para que no quede pegada al header */
    width: 44px !important; height: 44px !important; padding: 0 !important;
    border-radius: 50% !important; justify-content: center !important;
  }
  .art-close svg { width: 20px !important; height: 20px !important; }

  /* Infografía de síntomas (art. 1): de columna estrecha a 2 por fila (menos scroll) */
  .infographic { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .info-item { min-width: 0 !important; flex: 1 1 130px !important; max-width: none !important; }

  /* CTA del artículo: título a la escala de los CTA antes del footer */
  .art-cta--feature { height: auto !important; min-height: 0 !important; padding: 24px 20px !important; }
  .art-cta--feature .art-cta__in h3 { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.14 !important; }
  /* Título/párrafo cortados a los lados: el p tenía width:869px y el scrim 960px inline */
  .art-cta--feature .art-cta__in { margin-left: 0 !important; margin-right: 0 !important; }
  .art-cta--feature .art-cta__in p { width: auto !important; max-width: 100% !important; }
  .art-cta__scrim { width: 100% !important; max-width: 100% !important; height: 100% !important; inset: 0 !important; }
  .art-cta--feature .art-cta__bg { height: 100% !important; inset: 0 !important; }

  /* Moodle Manager: forma radial original (como en web), COMPLETA y sin deformar.
     Se renderiza a su tamaño real (860px) y se escala de forma uniforme para caber
     en el ancho del celular. El detalle se lee con "Toca para ampliar". */
  .mm-scroll { width: auto !important; margin: 16px 0 !important; overflow: visible !important; }
  .mm-scroll::before { content: "Toca para ampliar"; display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-body); letter-spacing: .04em; color: var(--ul-turquoise-dark); background: var(--ul-bg-tint); border: 1px solid var(--ul-border); padding: 7px 13px; border-radius: 999px; margin: 0 auto 12px; }
  .mm-scroll { text-align: center; }
  .mm-fit { position: relative; overflow: hidden; }
  .mm-diagram {
    grid-template-columns: 1fr auto 1fr !important;
    row-gap: 0 !important; justify-items: stretch !important;
    width: 860px !important; max-width: none !important;
    margin: 0 !important; padding: 30px !important; height: auto !important;
    transform-origin: top left;
  }
  .mm-diagram .mm-hub { order: 0 !important; }
  .mm-diagram .mm-col { max-width: 540px !important; }
  .mm-diagram .mm-col--right .mm-pod { flex-direction: row-reverse !important; }
  .mm-diagram .mm-col--left .mm-pod__text { text-align: right !important; }
  .mm-diagram .mm-col--right .mm-pod__text { text-align: left !important; }
  .mm-diagram .mm-pod { transform: none !important; opacity: 1 !important; }
  /* Ruta de automatización: el margin negativo inline subía la 1ª tarjeta y overflow:hidden la cortaba */
  .auto-flow__track { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Gráfico .fan: pista de que se puede ampliar (el diagrama Moodle Manager usa su propia etiqueta) */
  .mvl-zoomable { position: relative; cursor: zoom-in; }
  .fan.mvl-zoomable::after {
    content: "Toca para ampliar"; position: absolute; top: 6px; right: 6px; z-index: 6;
    font: 600 11px/1 var(--font-body); color: #fff; background: rgba(16,0,70,0.72);
    padding: 6px 11px; border-radius: 99px; pointer-events: none;
  }

  /* Hub de soluciones: el acordeón editorial pasa a carrusel deslizable */
  .sol-acc.mvl-car { flex-direction: row !important; }
  .sol-acc.mvl-car > .acc-panel { flex: 0 0 84% !important; min-height: 360px !important; margin-top: 0 !important; }

  /* ============================================================
     4 · CONFIANZA Y AUTORIDAD  →  sin overflow a la derecha (decisión 4A)
     ============================================================ */
  .ac-band { padding: 48px 0 46px !important; }
  .ao-wrap { padding: 0 18px !important; }
  .ac-band .au-orb { display: none; }            /* orbe 440px que empujaba a la derecha */
  .cc-top { gap: 28px !important; }
  .cc-intro { padding: 0 !important; }           /* anula el padding-left:72px inline */
  /* Logo: la placa de "años" se ancla como cinta inferior DENTRO del recuadro (no se corta) */
  .cc-logo { min-height: 0 !important; padding: 30px 18px 70px !important; }
  .cc-logo .brand-lockup { width: 62% !important; max-width: 200px !important; }
  .cc-badge {
    position: absolute !important;
    left: 12px !important; right: 12px !important; bottom: 12px !important; top: auto !important;
    width: auto !important; height: auto !important; margin: 0 !important; padding: 11px 16px !important;
    display: flex !important; align-items: center; justify-content: center; gap: 12px;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(14,239,218,0.32) !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .cc-badge small { width: auto !important; height: auto !important; margin: 0 !important; text-align: left !important; }
  /* Tarjetas de respaldo en 2 columnas (no apiladas una a una) */
  .c1-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .c1-cards .pc-card { margin-top: 0 !important; padding: 18px 16px !important; }
  .pc h3 { font-size: 17px !important; }
  .pc p { font-size: 14px !important; }
  /* Chips de tecnologías legibles (anula gap:0 y font 22px inline) */
  .cc-chips-bar--wide { padding: 18px !important; }
  .cc-chips { gap: 8px !important; }
  .cc-chips span { font-size: 13.5px !important; padding: 8px 13px !important; }
  /* Stats / valores legibles */
  .stat-row { gap: 12px !important; }
  .stat b { font-size: 30px !important; }
  .values { grid-template-columns: 1fr 1fr !important; }

  /* ============================================================
     6 · FOOTER  →  grid compacto 2 columnas (decisión 6B)
     ============================================================ */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 24px !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-brand p { padding-left: 0 !important; margin-left: 0 !important; font-size: 15px !important; max-width: none !important; }
  .footer-brand img { height: 46px !important; }
  .footer-col h4 { font-size: 15px !important; margin-bottom: 12px !important; }
  .footer-col a { font-size: 15px !important; padding: 6px 0 !important; }
  .footer-access { grid-column: 1 / -1 !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px !important; }

  /* ---- Modal: ancho cómodo y campos del formulario a 1 columna ---- */
  .modal__dialog { width: 94vw !important; }
  .form { grid-template-columns: 1fr !important; }
  .field input, .field select, .field textarea { font-size: 16px !important; }

  /* ---- Espaciados de sección un poco más compactos ---- */
  .section { padding: 56px 0; }

  /* ---- Routes/cards: que el icono y textos no se desborden ---- */
  .route-card h3, .res-card h3 { font-size: 20px !important; }

  /* ---- Cuerpo de texto UNIFORME en móvil: mismo tamaño suelto o en tarjeta ----
     Tu referencia ideal es el párrafo "El carácter…" (≈16px). Igualamos todo el cuerpo. */
  .route-card p, .res-card p, .sol-card p, .problem p, .pstep__card p,
  .res-cta__hint, .authority p.body, .sol-feature p,
  .nos-who p.body, .nos-adn p, .nos-mv p, .nos-step p, .nos-eco-card p,
  .nos-diff p, .nos-pillar p,
  .sector-intro__lead, .sec-card p, .caso-block p, .art-doc p, .ct-card p {
    font-size: 16px !important; line-height: 1.6 !important;
  }
}

/* ============================================================
   TABLET  761px – 1024px  (que no quede aire raro)
   ============================================================ */
@media (min-width: 761px) and (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr !important; gap: 36px !important; }
  .section-sub { font-size: 19px; }
}

/* ============================================================
   Overlay de zoom para gráficos (.fan) — solo se crea en móvil vía movil.js
   ============================================================ */
.mvl-zoom-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(7,0,32,0.93); }
.mvl-zoom-stage { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: flex-start; padding: 64px 16px; }
.mvl-zoom-stage > * { flex: 0 0 auto; background: #fff; border-radius: 14px; padding: 20px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
/* El .fan recupera su tamaño de escritorio (etiquetas sin montarse) y se puede desplazar */
.mvl-zoom-stage > .fan.mvl-zoomed { width: 1040px !important; max-width: none !important; left: auto !important; transform: none !important; margin: 0 !important; }
.mvl-zoom-stage .mvl-zoomable::after { display: none !important; }
/* Moodle Manager: recupera su layout radial de escritorio dentro del overlay */
.mvl-zoom-stage > .mm-diagram.mvl-zoomed {
  width: 1040px !important; max-width: none !important; margin: 0 !important; height: auto !important; zoom: 1 !important; transform: none !important;
  grid-template-columns: 1fr auto 1fr !important; row-gap: 0 !important; justify-items: stretch !important; padding: 44px !important;
}
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-hub { order: 0 !important; width: 300px !important; height: 300px !important; }
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-hub__inner { width: 216px !important; height: 216px !important; }
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-hub__inner span { font-size: 32px !important; }
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-col--right .mm-pod { flex-direction: row-reverse !important; }
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-col--left .mm-pod__text { text-align: right !important; }
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-col--right .mm-pod__text { text-align: left !important; }
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-pod,
.mvl-zoom-stage .mm-diagram.mvl-zoomed .mm-hub { opacity: 1 !important; animation: none !important; transform: none !important; }
.mvl-zoom-close { position: fixed; top: 14px; right: 14px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(16,0,70,0.72); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mvl-zoom-close svg { width: 22px; height: 22px; }