/*! MendozaGSM · Banner superior (v1.0, 2026-07-26)
 *
 * REGLAS QUE NO SE ROMPEN
 *
 * 1. TODO se cuelga de `.mgsm-tb`. Ni una sola regla toca un selector de
 *    elemento suelto, y las variables van scopeadas al contenedor — NO en
 *    `:root`. El banner anterior declaraba `--badge-w` en `:root`, o sea que
 *    inyectaba una variable en el scope global de un tema de DHRU que no
 *    controlamos.
 *
 * 2. `pointer-events: none` en el contenedor con `auto` en los interactivos.
 *    Se hereda del banner anterior y se conserva a propósito: huele a
 *    convivencia con el script de protección de copia de DHRU y funciona en
 *    producción. La regla general de abajo garantiza que ningún elemento
 *    clickeable nuevo quede muerto — un CTA inclickeable no tira ningún error,
 *    simplemente no factura.
 *
 * 3. Nada de imágenes externas. El banner anterior cargaba dos PNG con path
 *    RELATIVO (`images/gallery/…`): fuera de la home el navegador pedía
 *    `/orders/images/gallery/rayologo.png`, DHRU respondía con el HTML de la
 *    página por su catch-all, y el `<img>` fallaba — el rayo caía al emoji y el
 *    logo de Binance mostraba el glifo roto. Encima `rayologo.png` pesa 541 KB
 *    para dibujarse a 18×18. Ahora todo es SVG inline.
 *
 * 4. Sin Google Fonts. Oswald 800 en mayúsculas es ilegible en frases largas en
 *    español, y era una request bloqueante para decorar una línea de texto.
 *
 * 5. Nada anima `box-shadow`, `background-position` ni `filter` en loop. El
 *    banner anterior tenía tres animaciones infinitas (gradiente de 18s sobre
 *    un `background-size:800%`, pulso de sombra y shimmer) repintando en todas
 *    las páginas, todo el tiempo. Sólo se anima `opacity` y `transform`.
 *
 * ALTURA — el número que más importa
 * Este bloque está arriba de las 5 rutas logueadas: cada píxel se lo saca al
 * contenido real. Objetivo ~104px en desktop y ~118px en 360px, contra los
 * ~238px que ocupaba antes en un teléfono (más de un tercio del viewport
 * antes de que el cliente viera un solo servicio).
 */

.mgsm-tb {
  --tb-bg-top:    #0a2a5e;
  --tb-bg-bot:    #0d3c86;
  --tb-text:      #eef4ff;
  --tb-muted:     #a8bde0;
  --tb-line:      rgba(255, 255, 255, .12);
  --tb-chip:      rgba(255, 255, 255, .08);
  --tb-accent:    #f5a524;   /* ámbar: el CTA y sólo el CTA */
  --tb-ok:        #3ddc84;
  --tb-warn:      #ffb020;
  --tb-down:      #ff6a6a;

  position: relative;
  margin: 0 0 8px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tb-bg-top) 0%, var(--tb-bg-bot) 100%);
  color: var(--tb-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  pointer-events: none;

  /* v3 — UNA SOLA FILA QUE FLUYE, no tres filas fijas.
   *
   * Antes eran tres bloques apilados y en una pantalla de 2000px sobraba ancho
   * mientras el banner se comía ~190px de alto. Ahora es un único contenedor
   * flex con wrap: en escritorio ancho entra todo en una línea (~48px), y a
   * medida que la pantalla se angosta cada grupo se va a la línea siguiente
   * por su cuenta. Sin media queries que adivinen dónde cortar: el contenido
   * decide. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 7px 12px;
}

/* Red de seguridad: cualquier cosa clickeable recibe eventos, aunque quien la
 * agregue mañana no se acuerde del pointer-events del contenedor. */
.mgsm-tb a,
.mgsm-tb button,
.mgsm-tb [data-tap] { pointer-events: auto; }

.mgsm-tb *, .mgsm-tb *::before, .mgsm-tb *::after { box-sizing: border-box; }

/* ===========================================================================
   GRUPO 1 — estado + mensaje
   =========================================================================== */
.mgsm-tb__top {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  /* Crece para empujar el CTA a la derecha, pero puede encogerse hasta 240px
     antes de mandar al resto a la línea siguiente. */
  flex: 1 1 240px;
  min-width: 0;
}

/* El punto NO es decorativo: es el estado del servicio.
 *
 * Verde = todo normal · ámbar = aviso · rojo = incidencia. Lo cambia el JS
 * según el aviso activo, y es lo primero que mira alguien que entró porque
 * algo no le funcionó. Un semáforo que siempre está en verde no informa nada,
 * así que sólo se pinta verde cuando de verdad no hay nada que avisar. */
.mgsm-tb__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tb-ok);
  box-shadow: 0 0 0 3px rgba(61, 220, 132, .18);
}
.mgsm-tb[data-state="warn"] .mgsm-tb__dot {
  background: var(--tb-warn);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, .20);
}
.mgsm-tb[data-state="down"] .mgsm-tb__dot {
  background: var(--tb-down);
  box-shadow: 0 0 0 3px rgba(255, 106, 106, .22);
}
/* Un aviso serio tiñe la barra entera: si hay una caída, el banner no puede
   seguir pareciendo un cartel de promociones. */
.mgsm-tb[data-state="down"] {
  background: linear-gradient(180deg, #4a1220 0%, #6d1a2c 100%);
}
.mgsm-tb[data-state="warn"] {
  background: linear-gradient(180deg, #3d2b06 0%, #5c400b 100%);
}

/* El mensaje cambia de CONTENIDO en un lugar fijo; no se desplaza por la
 * pantalla como el <marquee> anterior. El lector controla el ritmo: puede
 * pausar con el mouse o con el foco de teclado, y no tiene que esperar a que
 * el texto "vuelva a pasar". */
.mgsm-tb__msg {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: .1px;
}
.mgsm-tb__msg.is-in { animation: mgsmTbIn .18s ease-out both; }
@keyframes mgsmTbIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.mgsm-tb__b { color: var(--tb-text); }
.mgsm-tb__e { color: var(--tb-muted); font-weight: 500; }
.mgsm-tb__note { color: var(--tb-accent); font-weight: 600; }
.mgsm-tb__note-link,
.mgsm-tb__msg-cta {
  color: var(--tb-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mgsm-tb__note-link:hover,
.mgsm-tb__msg-cta:hover { color: var(--tb-accent); }
.mgsm-tb__msg-cta { margin-left: 8px; }

/* ---------------------------------------------------------------------------
 * ANUNCIOS — cursiva monoespaciada, como una línea de consola
 *
 * En la misma barra conviven cosas de naturaleza distinta: una cotización que
 * cambia sola, una regla de negocio permanente y un anuncio de esta semana.
 * Sin marca visual, el cliente no puede saber cuál va a seguir estando mañana.
 *
 * La cursiva dice "esto es de ahora"; la monoespaciada y el prompt "›" lo
 * emparentan con una terminal, que en este rubro se lee como "mensaje del
 * sistema" y no como cartel publicitario — que es justamente lo que hace que
 * se lea en vez de saltearse.
 * ------------------------------------------------------------------------- */
.mgsm-tb__msg.is-alert {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: -.1px;
}
.mgsm-tb__msg.is-alert .mgsm-tb__b { color: #d8ffe8; font-weight: 600; }
.mgsm-tb__msg.is-alert .mgsm-tb__e { color: rgba(216, 255, 232, .62); }

/* El prompt hereda el color del estado: verde normal, ámbar aviso, rojo caída.
   Así el anuncio y el punto de estado cuentan lo mismo. */
.mgsm-tb__prompt {
  color: var(--tb-ok);
  font-weight: 700;
  font-style: normal;
}
.mgsm-tb[data-state="warn"] .mgsm-tb__prompt { color: var(--tb-warn); }
.mgsm-tb[data-state="down"] .mgsm-tb__prompt { color: var(--tb-down); }
.mgsm-tb[data-state="warn"] .mgsm-tb__msg.is-alert .mgsm-tb__b { color: #ffe9c2; }
.mgsm-tb[data-state="down"] .mgsm-tb__msg.is-alert .mgsm-tb__b { color: #ffd9d9; }

/* El único elemento lleno y con color de todo el banner. El color es el recurso
 * más escaso acá y se gasta entero en lo que factura: siete chips de colores
 * distintos compiten entre sí y ninguno gana.
 *
 * Dice "Cargar saldo automático", no "Cargar saldo 0%". El "0%" pegado al label
 * se leía como que la recarga cuesta cero —o como un descuento que no existe—
 * cuando en realidad era el precio del método más barato. La promesa que
 * importa acá no es el precio: es que el saldo entra solo, sin esperar a que
 * alguien lo apruebe. El precio ya vive en la tira de comisiones. */
/* "Recargar · al instante": dos palabras y una promesa, en vez de la frase
 * larga "Cargar saldo automático" que no entraba en una línea sin romper el
 * flujo. El peso visual lo lleva el verbo; el resto va en una cápsula. */
.mgsm-tb__cta {
  flex: 0 0 auto;
  margin-left: auto;   /* último del flex: se va al extremo derecho */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 13px;
  min-height: 34px;          /* target táctil real, sin ::before que el overflow recorta */
  border-radius: 999px;      /* pastilla: se lee como acción, no como caja */
  color: #1a1204;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1px;
  text-decoration: none;
  white-space: nowrap;

  /* Tratamiento "premium": un degradado corto sobre el ámbar, un borde claro
   * arriba que simula luz cenital y una sombra proyectada del mismo tono. Tres
   * capas baratas que separan el botón del fondo sin recurrir a animación. */
  background: linear-gradient(180deg, #ffc65c 0%, var(--tb-accent) 55%, #e08c0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 2px 10px -2px rgba(245, 165, 36, .55);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mgsm-tb__cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 5px 16px -3px rgba(245, 165, 36, .7);
}
.mgsm-tb__cta:active { transform: translateY(0); }
.mgsm-tb__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* El rayo: "automático" dicho en un glifo. Va en SVG, no en emoji — el emoji
   cambia de forma en cada sistema y en Windows se ve azul. */
.mgsm-tb__cta svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

/* La cápsula oscura: "al instante" es la promesa, y separada del verbo se lee
   como una etiqueta, no como parte del nombre del botón. */
.mgsm-tb__cta b {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(26, 18, 4, .82);
  color: #ffd88a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* En /addfunds el CTA sobra: el cliente ya está en la página de recarga. */
.mgsm-tb.is-funds .mgsm-tb__cta { display: none; }

/* ===========================================================================
   FILA 2 — comisiones, de más barata a más cara
   ===========================================================================
   El ORDEN de esta lista es un dato, no una decisión estética: poner Mercado
   Pago primero porque es el más conocido equivale a recomendar el método que
   cuesta 10%. Va ascendente y la celda de 0% es la única con acento.

   Los precios en pesos los pinta el JS desde `ars-credit-rate.php` — la misma
   fuente que usa el checkout. Sin JS quedan los porcentajes, que son estables.
   =========================================================================== */
.mgsm-tb__rates {
  display: flex;
  align-items: center;
  gap: 3px 12px;
  font-size: 11.5px;
  color: var(--tb-muted);
  min-width: 0;

  /* Toma la línea entera y NO envuelve.
   *
   * Con `flex: 0 1 auto` se encogía a su contenido, y como el ticker vive
   * adentro con `overflow: hidden`, terminaba midiendo 0px de ancho: no había
   * dónde desplazarse y la animación no tenía efecto visible. El ticker
   * necesita un viewport con ancho real para funcionar. */
  flex: 1 1 100%;
  flex-wrap: nowrap;
}
/* ---------------------------------------------------------------------------
 * TICKER — la cotización se desplaza de forma continua
 *
 * Se anima `transform`, nunca `left` ni `margin-left`: transform lo resuelve el
 * compositor sin recalcular layout ni repintar. El <marquee> del banner viejo
 * hacía lo contrario, y por eso costaba caro en una barra que está arriba de
 * TODAS las páginas de la tienda.
 *
 * El ciclo no salta porque el JS pinta el contenido dos veces y la animación
 * corre exactamente -50%: cuando la primera copia termina de salir, la segunda
 * está justo donde arrancó la primera.
 *
 * La duración la calcula el JS desde el ancho real medido, así la velocidad es
 * la misma con 3 monedas que con 7.
 * ------------------------------------------------------------------------- */
.mgsm-tb__ticker {
  flex: 1 1 220px;
  min-width: 0;
  overflow: hidden;
  /* Los bordes se desvanecen en vez de cortar el texto de golpe: una cifra
     partida al medio en el borde se lee como un error de render. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

.mgsm-tb__track {
  display: flex;
  align-items: center;
  gap: 0 18px;
  width: max-content;
  will-change: transform;
}
/* La animación arranca sólo cuando el JS midió el ancho y fijó la duración.
   Sin esta clase el track queda quieto — mejor estático que a velocidad
   equivocada, que es lo que pasaría con una duración por defecto. */
.mgsm-tb__track.is-running {
  animation-name: mgsmTbScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes mgsmTbScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Se frena para poder leer: al pasar el mouse por la barra y al enfocar con
   teclado. Un dato que se escapa mientras lo mirás es peor que uno quieto. */
.mgsm-tb:hover  .mgsm-tb__track,
.mgsm-tb:focus-within .mgsm-tb__track { animation-play-state: paused; }

/* Un ticker que se desplaza solo es exactamente lo que "reducir movimiento"
   pide evitar. Se queda quieto y, como el contenido puede no entrar, se deja
   desplazar con el dedo o la rueda. */
@media (prefers-reduced-motion: reduce) {
  .mgsm-tb__track.is-running { animation: none; }
  .mgsm-tb__ticker { overflow-x: auto; }
}

/* Etiqueta de la fila. Apagada: el dato son los números. */
.mgsm-tb__usdt-label {
  color: var(--tb-muted);
  font-weight: 600;
  white-space: nowrap;
}

.mgsm-tb__rate {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.mgsm-tb__flag { font-size: 12.5px; line-height: 1; }
.mgsm-tb__code { color: var(--tb-muted); font-weight: 600; letter-spacing: .2px; }
/* tabular-nums es lo que evita que los números "bailen" cuando la cotización
   se actualiza y cambia de ancho: 1.610 y 1.611 tienen que ocupar lo mismo. */
.mgsm-tb__val {
  color: var(--tb-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}

/* ---------------------------------------------------------------------------
 * Ticker: la celda avisa cuando el valor se movió
 *
 * Cada 90 s se vuelve a pedir la cotización sin recargar la página. Casi
 * siempre viene igual y no pasa nada; cuando cambia, la celda hace un flash y
 * queda con ▲ o ▼ unos segundos.
 *
 * La comparación es contra lo último que vio ESTE usuario (guardado en
 * sessionStorage), no contra una variación del día: lo que comunica es "esto
 * se está moviendo ahora", que es lo que hace que el número se sienta vivo.
 *
 * La marca se apaga sola. Fija dejaría de significar "acaba de moverse" y se
 * leería como parte del número.
 * ------------------------------------------------------------------------- */
.mgsm-tb__trend {
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  margin-left: 1px;
}
.mgsm-tb__rate.is-up   .mgsm-tb__val,
.mgsm-tb__rate.is-up   .mgsm-tb__trend { color: #4ae08a; }
.mgsm-tb__rate.is-down .mgsm-tb__val,
.mgsm-tb__rate.is-down .mgsm-tb__trend { color: #ff8f8f; }

.mgsm-tb__rate.is-up   .mgsm-tb__val { animation: mgsmTbFlashUp   .9s ease-out 1; }
.mgsm-tb__rate.is-down .mgsm-tb__val { animation: mgsmTbFlashDown .9s ease-out 1; }

/* Sólo se anima `color`: nada de fondos ni sombras que fuercen repaint en una
   barra que está arriba de todas las páginas. */
@keyframes mgsmTbFlashUp {
  0%   { color: #eafff2; }
  100% { color: #4ae08a; }
}
@keyframes mgsmTbFlashDown {
  0%   { color: #ffeaea; }
  100% { color: #ff8f8f; }
}

/* Un ticker que parpadea es exactamente lo que "reducir movimiento" pide
   evitar: el dato se actualiza igual, sin el flash ni la flecha. */
@media (prefers-reduced-motion: reduce) {
  .mgsm-tb__rate.is-up   .mgsm-tb__val,
  .mgsm-tb__rate.is-down .mgsm-tb__val { animation: none; }
  .mgsm-tb__trend { display: none; }
}

.mgsm-tb__all {
  color: var(--tb-muted);
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
}
.mgsm-tb__all:hover { color: var(--tb-text); text-decoration: underline; }

/* ===========================================================================
   GRUPO 3 — contactos
   =========================================================================== */
.mgsm-tb__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.mgsm-tb__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  min-height: 32px;
  border: 1px solid var(--tb-line);
  border-radius: 8px;
  background: var(--tb-chip);
  color: var(--tb-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mgsm-tb__chip:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); }
.mgsm-tb__chip:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.mgsm-tb__chip svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; opacity: .9; }

/* ---------------------------------------------------------------------------
 * Color por plataforma
 *
 * Cada canal usa el color con el que el cliente ya lo reconoce: verde WhatsApp,
 * azul Telegram. A las 2 de la mañana nadie lee la etiqueta — busca el verde.
 *
 * El color va en el ÍCONO y en el BORDE, no en un fondo lleno. Con siete chips
 * de fondo saturado el banner vuelve al arcoíris de la versión vieja, donde
 * todos gritaban y ninguno se distinguía; y el CTA ámbar, que es lo que
 * factura, dejaría de ser el único elemento lleno de la barra.
 * ------------------------------------------------------------------------- */
.mgsm-tb__chip--wa {
  border-color: rgba(37, 211, 102, .45);
  background: rgba(37, 211, 102, .10);
}
.mgsm-tb__chip--wa svg { color: #4ae08a; opacity: 1; }
.mgsm-tb__chip--wa:hover { background: rgba(37, 211, 102, .18); border-color: rgba(37, 211, 102, .7); }

.mgsm-tb__chip--tg {
  border-color: rgba(56, 168, 227, .45);
  background: rgba(56, 168, 227, .10);
}
.mgsm-tb__chip--tg svg { color: #56b9ef; opacity: 1; }
.mgsm-tb__chip--tg:hover { background: rgba(56, 168, 227, .18); border-color: rgba(56, 168, 227, .7); }

/* Asistentes con IA: violeta. No es el color de ninguna plataforma existente,
   y justamente por eso se lee como "esto es otra cosa". */
.mgsm-tb__chip--ia {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(167, 139, 250, .10);
}
.mgsm-tb__chip--ia svg { color: #b9a5fd; opacity: 1; }
.mgsm-tb__chip--ia:hover { background: rgba(167, 139, 250, .18); border-color: rgba(167, 139, 250, .7); }

/* Los que todavía no tienen destino. Borde punteado y la palabra "pronto"
 * VISIBLE: `title=` no existe en un teléfono, y un chip apagado que no explica
 * nada se lee como sitio roto. Son <button> de verdad porque hacen algo de
 * verdad —decir a dónde escribir mientras tanto— y por eso NO llevan
 * aria-disabled: el nombre accesible ya dice "pronto".
 *
 * Conservan el color de su plataforma, apagado: un "Telegram Bot · pronto"
 * tiene que verse hermano del Telegram que ya funciona, no un botón muerto. */
.mgsm-tb__chip--soon {
  border-style: dashed;
  opacity: .68;
  font-weight: 500;
}
.mgsm-tb__chip--soon:hover { opacity: .95; }

/* Checks: resalta aunque todavía no exista.
 *
 * Es el único "pronto" que se anuncia en vez de disculparse — el addon es un
 * servicio nuevo y conviene que el cliente lo espere. Borde SÓLIDO (no
 * punteado), opacidad plena y una etiqueta ámbar en vez de gris. Sigue sin ser
 * un link: al tocarlo explica que por ahora los checks se piden por WhatsApp. */
.mgsm-tb__chip--checks {
  border-style: solid;
  border-color: rgba(245, 165, 36, .55);
  background: linear-gradient(180deg, rgba(245, 165, 36, .18), rgba(245, 165, 36, .07));
  opacity: 1;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(245, 165, 36, .10), 0 2px 10px -4px rgba(245, 165, 36, .5);
}
.mgsm-tb__chip--checks svg { color: var(--tb-accent); opacity: 1; }
.mgsm-tb__chip--checks:hover {
  background: linear-gradient(180deg, rgba(245, 165, 36, .28), rgba(245, 165, 36, .12));
  border-color: var(--tb-accent);
}
.mgsm-tb__chip--checks .mgsm-tb__soon {
  background: rgba(245, 165, 36, .28);
  color: #ffd88a;
}
.mgsm-tb__soon {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* Sólo para lectores de pantalla: declara las comisiones una vez, sin obligar
 * a esperar la rotación completa. */
.mgsm-tb__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Responsive
   =========================================================================== */

/* Etiqueta corta de los chips: OCULTA POR DEFECTO, la muestra el media query.
 *
 * Esta regla tiene que ir ANTES del @media, no después. Con la misma
 * especificidad gana la última declarada, así que puesta al final anulaba el
 * `display:inline` del breakpoint y en móvil los chips quedaban SIN NINGUNA
 * etiqueta — sólo el ícono, los cinco iguales. No lo detectó ningún assert:
 * apareció al mirar el render en 360px. */
.mgsm-tb__short { display: none; }

/* La extensión del mensaje sólo desde 560px: en 360px quedan ~239px útiles
   después del punto y el CTA, y un texto largo se cortaría en la mitad de una
   palabra sin decir nada. */
@media (max-width: 559px) {
  .mgsm-tb__e { display: none; }
}

@media (max-width: 560px) {
  .mgsm-tb { font-size: 12.5px; border-radius: 10px; }
  .mgsm-tb__top { padding: 7px 10px; gap: 8px; }

  /* CTA compacto: en 360px "Cargar saldo 0%" se llevaba casi la mitad de la
     fila y el mensaje quedaba cortado en "Cripto por red: 0% de…", que no dice
     nada. El label largo se esconde y queda "Cargar 0%" — el dato que importa
     sigue estando y el mensaje recupera ~60px para leerse. */
  .mgsm-tb__cta { padding: 8px 10px; font-size: 12px; gap: 5px; }

  .mgsm-tb__rates { padding: 6px 10px; gap: 3px 9px; font-size: 11px; }
  /* La tira de precios NO se oculta en móvil. Es donde el cliente mira menos
     tiempo y donde más importa que el precio esté a la vista. Lo que sí se
     acorta son las etiquetas: "cripto por red" → "cripto". Los porcentajes y
     los precios, que son el dato, quedan intactos. */
  .mgsm-tb__all { font-size: 10.5px; }

  /* Grilla de 3×2 con los cinco chips visibles. Se descartó el riel con scroll
     horizontal: deja botones sin descubrir, que es justo lo contrario de para
     qué están. */
  .mgsm-tb__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px 10px;
  }
  .mgsm-tb__chip {
    justify-content: center;
    padding: 7px 5px;
    min-height: 36px;          /* pulgar, no mouse — 36 es el piso cómodo */
    font-size: 11.5px;
    gap: 5px;
  }
  /* El CTA ocupa la línea entera: es la acción del banner y en 380px un botón
     colgado a la derecha se pierde. */
  .mgsm-tb__cta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .mgsm-tb__chip svg { width: 14px; height: 14px; }
  .mgsm-tb__soon { display: none; }   /* el borde punteado ya lo comunica */

  /* Etiqueta corta en pantallas chicas, sin tocar el DOM ni escuchar resize. */
  .mgsm-tb__long  { display: none; }
  .mgsm-tb__short { display: inline; }
}

@media (max-width: 360px) {
  .mgsm-tb__rates { font-size: 10.5px; gap: 3px 8px; }
  .mgsm-tb__all   { display: none; }   /* lo primero que sobra */
}

/* Menos movimiento no es menos información: se corta el crossfade, pero los
   mensajes se siguen turnando. */
@media (prefers-reduced-motion: reduce) {
  .mgsm-tb__msg.is-in { animation: none; }
  .mgsm-tb__cta { transition: none; }
  .mgsm-tb__cta:hover { transform: none; }
}