/* ══════════════════════════════════════════════════════════════════════
   ZURMETA — el sistema de `brighthub.casethemes.net/ai-powered-copywriting/`
   ══════════════════════════════════════════════════════════════════════
   Va DESPUÉS de `app.css` y sólo gobierna clases `zx-` y la clase `zx` del
   cuerpo. Quitar la línea del encolado devuelve el sitio anterior sin tocar
   una regla.

   El sistema está MEDIDO en la propia página de la referencia:

     cara ............ Inter, una sola familia para todo
     titular ......... 80 px · interlínea 88 · tracking −4 px · peso 500
     rótulo tarjeta .. 20/24 · tracking −0,8 · peso 500
     entradilla ...... 18/24,3 · tracking −0,36 · peso 400 · gris #535862
     botón ........... alto 40 · radio 8 · relleno 9/16 · 16/500
     tinta ........... #181D27 · titular NEGRO puro · secundario #535862
     acento .......... #7A5AF8
     medida .......... 1.280 px

   Lo que NO se copia es el contenido: la casa despacha USDT, no escribe
   textos. Las piezas de la referencia se llenan con lo de esta casa —la
   orden en blanco, los cuatro tiempos, la tarifa en cero, los controles—.

   Contrastes medidos, ninguno por debajo de AA:
     #181D27/blanco 16,88 · #535862/blanco 7,14 · #7A5AF8/blanco 4,52
     blanco/#7A5AF8 4,52 · #6941C6 sobre lavanda 6,02
   `#A4A7AE` (2,41) NO pinta texto: es filete y adorno.
   El morado a secas NO vale como texto sobre la lavanda (4,11): ahí va
   `--zx-violeta-tx`.
   ══════════════════════════════════════════════════════════════════════ */

/* ── las caras, en casa y con apellido ─────────────────────────────────
   Con «Inter» a secas, una copia instalada en la máquina del visitante —o
   el `@font-face` de otro complemento— ocupa el hueco y pinta con otras
   medidas. Ya costó una vez con el Inter de WooCommerce. */
@font-face{font-family:"Inter ZM";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* La reserva OCUPA lo mismo, medida contra el woff2 que sirve Google y con
   los pesos gruesos apoyados en la negrita de verdad —con un rango 600-900
   el navegador ya no la finge, y el redondo dejaría el texto angosto—.
     Inter 400 133,517 / Arial 400 126,673 → 105,40 %
     Inter 500 134,832 / Arial 400        → 106,44 %
     Inter 600 136,146 / Arial Bold 134,749 → 101,04 %
     Inter 700 137,461 / Arial Bold        → 102,01 %  */
@font-face{font-family:"Inter Reserva";src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:400;size-adjust:105.40%;ascent-override:92.03%;descent-override:22.77%;line-gap-override:0%}
@font-face{font-family:"Inter Reserva";src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:500;size-adjust:106.44%;ascent-override:91.13%;descent-override:22.55%;line-gap-override:0%}
@font-face{font-family:"Inter Reserva";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:600;size-adjust:101.04%;ascent-override:96.00%;descent-override:23.75%;line-gap-override:0%}
@font-face{font-family:"Inter Reserva";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:700 900;size-adjust:102.01%;ascent-override:95.09%;descent-override:23.53%;line-gap-override:0%}

:root{
  --zx-negro:#000000;
  --zx-tinta:#181D27;
  --zx-tx:#535862;
  --zx-gris:#A4A7AE;      /* filete y adorno: NUNCA texto (2,41) */
  --zx-violeta:#7A5AF8;
  --zx-violeta-tx:#6941C6;/* el morado cuando hace de TEXTO */
  --zx-violeta-2:#6941C6;
  --zx-lav:#F4F3FF;
  --zx-lav-2:#EBE9FE;
  --zx-linea:#E9EAEB;
  --zx-papel:#FFFFFF;
  --zx-w:1280px;
  --r6:6px; --r8:8px; --r12:12px; --r16:16px; --r24:24px; --r99:999px;
  --zx-sombra:0 1px 2px rgba(16,24,40,.04),0 12px 32px -12px rgba(16,24,40,.10);
  --zx-fam:"Inter ZM","Inter Reserva",system-ui,sans-serif;
}

/* ── el lienzo ─────────────────────────────────────────────────────── */
body.zx{background:var(--zx-papel);color:var(--zx-tx);
  font-family:var(--zx-fam);font-size:16px;line-height:1.5;
  letter-spacing:-.011em;font-synthesis-weight:none}
body.zx main{padding-bottom:clamp(3rem,6vw,5rem)}
.zx-w{width:min(var(--zx-w),100% - var(--gut)*2);margin-inline:auto}

/* ── tipografía ────────────────────────────────────────────────────── */
body.zx h1,body.zx h2,body.zx h3,body.zx h4,
.zx-h1,.zx-h2,.zx-h3{font-family:var(--zx-fam);color:var(--zx-negro);
  font-weight:500;margin:0}
/* el tracking de la referencia es −4 px sobre 80: −0,05 em, y así escala */
.zx-h1{font-size:clamp(2.5rem,1.1rem + 4.6vw,5rem);line-height:1.1;letter-spacing:-.05em}
.zx-h2{font-size:clamp(2rem,1.2rem + 2.6vw,3rem);line-height:1.12;letter-spacing:-.04em}
.zx-h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.04em}
.zx-lead{font-size:1.125rem;line-height:1.35;letter-spacing:-.02em;
  color:var(--zx-tx);margin:0;max-width:62ch}
.zx-violeta{color:var(--zx-violeta-tx)}
/* la marca de la referencia: el trozo señalado va en morado sobre un bloque
   lavanda con un filete a la izquierda */
.zx-marcado{background:var(--zx-lav-2);color:var(--zx-violeta-tx);
  border-left:3px solid var(--zx-violeta);padding:0 .18em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ── el rótulo: pastilla lavanda ───────────────────────────────────── */
.zx-rotulo{display:inline-block;background:var(--zx-lav);color:var(--zx-violeta-tx);
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  padding:.4rem .85rem;border-radius:var(--r6);margin:0 0 1.25rem}

/* ── botones ───────────────────────────────────────────────────────── */
.zx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--zx-violeta);color:#fff;border:1px solid var(--zx-violeta);
  border-radius:var(--r8);padding:0 1.1rem;height:2.75rem;
  font-family:var(--zx-fam);font-weight:500;font-size:1rem;letter-spacing:-.02em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--t),border-color var(--t)}
.zx-btn:hover{background:var(--zx-violeta-2);border-color:var(--zx-violeta-2)}
.zx-btn--linea{background:#fff;color:var(--zx-tinta);border-color:var(--zx-linea)}
.zx-btn--linea:hover{background:var(--zx-lav);border-color:var(--zx-lav-2)}
.zx-btn svg{width:1.05rem;height:1.05rem;flex:none}
/* la salida secundaria de la referencia es texto pelado, sin caja */
.zx-pelado{display:inline-flex;align-items:center;gap:.45rem;color:var(--zx-tinta);
  font-weight:500;letter-spacing:-.02em;text-decoration:none}
.zx-pelado:hover{color:var(--zx-violeta-tx)}
.zx-pelado svg{width:1rem;height:1rem}

/* ── el héroe ──────────────────────────────────────────────────────── */
.zx-hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);text-align:center}
.zx-hero .zx-lead{margin:1.5rem auto 0;max-width:56ch}
.zx-hero__acc{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;
  justify-content:center;margin-top:2.25rem}

/* ── la cabecera de sección: pastilla, titular y entradilla, centrados ── */
.zx-sec{padding:clamp(3rem,6vw,5.5rem) 0}
.zx-cab{text-align:center;max-width:46rem;margin-inline:auto}
.zx-cab .zx-lead{margin:1.1rem auto 0;max-width:52ch}
.zx-cab--izq{text-align:left;margin-inline:0}
.zx-cab--izq .zx-lead{margin-inline:0}

/* ── la rejilla de tarjetas, sobre su lavado lavanda ───────────────── */
.zx-lavado{background:
  radial-gradient(80% 120% at 50% 0%,var(--zx-lav) 0%,rgba(244,243,255,0) 70%);
  padding-top:clamp(2rem,4vw,3.5rem)}
.zx-rej{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);
  margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:700px){.zx-rej--2,.zx-rej--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .zx-rej--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zx-rej--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.zx-card{background:#fff;border:1px solid var(--zx-linea);border-radius:var(--r24);
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.65rem;
  box-shadow:var(--zx-sombra);min-width:0}
.zx-card h3{margin:0}
.zx-card p{margin:0;font-size:1rem;line-height:1.45;color:var(--zx-tx)}
/* el numeral de la referencia no es un disco de color: es la cifra en morado
   sobre la pastilla lavanda, del mismo tamaño que el rótulo */
.zx-card__n{display:inline-flex;align-items:center;justify-content:center;
  min-width:2rem;height:2rem;padding:0 .55rem;border-radius:var(--r8);
  background:var(--zx-lav);color:var(--zx-violeta-tx);
  font-weight:600;font-size:.875rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;align-self:flex-start;margin-bottom:.35rem}
.zx-card__i{display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:var(--r12);background:var(--zx-lav);color:var(--zx-violeta-tx);
  align-self:flex-start;margin-bottom:.35rem}
.zx-card__i svg{width:1.35rem;height:1.35rem}

/* ── la placa de la tarifa: una sola cifra, a cuerpo de titular ────── */
.zx-cifra{background:var(--zx-lav);border-radius:var(--r24);text-align:center;
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem);margin-top:clamp(2rem,4vw,3rem)}
.zx-cifra__v{font-family:var(--zx-fam);font-weight:500;color:var(--zx-negro);
  font-size:clamp(3.5rem,2rem + 6vw,7rem);line-height:1;letter-spacing:-.05em;
  margin:0;font-variant-numeric:tabular-nums}
.zx-cifra__d{margin:1.25rem auto 0;max-width:56ch;font-size:1.125rem;
  line-height:1.45;letter-spacing:-.02em;color:var(--zx-tx)}

/* ── la orden en blanco: la pieza propia de esta casa ──────────────── */
.zx-orden{background:#fff;border:1px solid var(--zx-linea);border-radius:var(--r24);
  box-shadow:var(--zx-sombra);max-width:34rem;margin:clamp(2.5rem,5vw,4rem) auto 0;
  overflow:hidden;text-align:left}
.zx-orden__t{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0;padding:1rem 1.4rem;border-bottom:1px solid var(--zx-linea);
  font-weight:500;color:var(--zx-tinta);letter-spacing:-.02em}
.zx-orden__t span{font-size:.8125rem;font-weight:500;color:var(--zx-violeta-tx);
  background:var(--zx-lav);border-radius:var(--r6);padding:.25rem .6rem;white-space:nowrap}
.zx-orden__c{display:grid;grid-template-columns:8rem minmax(0,1fr);align-items:center;
  gap:1rem;margin:0;padding:.95rem 1.4rem;border-bottom:1px solid var(--zx-linea)}
.zx-orden__c:last-child{border-bottom:0}
.zx-orden__c span{font-size:.9375rem;color:var(--zx-tx);letter-spacing:-.01em}
.zx-orden__c i{display:block;height:.5rem;border-radius:var(--r99);
  background:repeating-linear-gradient(90deg,var(--zx-linea) 0 10px,transparent 10px 18px)}

/* ── la lista con palomas ──────────────────────────────────────────── */
.zx-lista{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.8rem}
.zx-lista li{display:flex;align-items:flex-start;gap:.7rem;
  font-size:1rem;line-height:1.45;color:var(--zx-tinta);letter-spacing:-.015em}
.zx-lista i{display:grid;place-items:center;width:1.35rem;height:1.35rem;flex:none;
  border-radius:var(--r6);background:var(--zx-lav);color:var(--zx-violeta-tx);margin-top:.08rem}
.zx-lista i svg{width:.8rem;height:.8rem}

/* ── el aviso ──────────────────────────────────────────────────────── */
.zx-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;
  align-items:start;background:var(--zx-lav);border-radius:var(--r24);
  padding:clamp(1.5rem,2.6vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.zx-aviso h3{margin:0 0 .45rem;font-size:1.125rem}
.zx-aviso p{margin:0;font-size:1rem;line-height:1.5;color:var(--zx-tx);max-width:68ch}
.zx-aviso__d{display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:var(--r12);background:var(--zx-violeta);color:#fff}
.zx-aviso__d svg{width:1.2rem;height:1.2rem}

/* ── el cierre: la banda morada de la referencia ───────────────────── */
.zx-cierre{background:var(--zx-violeta);border-radius:var(--r24);color:#fff;
  text-align:center;padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,4vw,3rem)}
.zx-cierre .zx-h2{color:#fff}
.zx-cierre .zx-lead{color:rgba(255,255,255,.86);margin:1.1rem auto 0;max-width:52ch}
.zx-cierre .zx-btn{margin-top:2rem;background:#fff;color:var(--zx-violeta-tx);
  border-color:#fff}
.zx-cierre .zx-btn:hover{background:var(--zx-lav);border-color:var(--zx-lav)}

/* ── el carril punteado con sus topes, motivo de la referencia ─────── */
.zx-carril{position:relative;height:1px;background:
  repeating-linear-gradient(90deg,var(--zx-gris) 0 6px,transparent 6px 14px);
  opacity:.55;margin:clamp(2rem,4vw,3.5rem) 0}
.zx-carril::before,.zx-carril::after{content:"";position:absolute;top:50%;
  width:8px;height:8px;border-radius:50%;background:var(--zx-violeta);
  transform:translateY(-50%)}
.zx-carril::before{left:0}
.zx-carril::after{right:0}

/* ── la prosa de las legales ───────────────────────────────────────── */
.zx-prosa{max-width:68ch}
.zx-prosa h2{font-size:1.5rem;margin:2.4rem 0 .8rem}
.zx-prosa h3{font-size:1.1875rem;margin:1.8rem 0 .6rem}
.zx-prosa p,.zx-prosa li{font-size:1rem;line-height:1.65;color:var(--zx-tx)}
.zx-prosa a{color:var(--zx-violeta-tx)}
.zx-fecha{font-size:.875rem;color:var(--zx-tx);margin:0 0 2rem}

/* ── el formulario de «Escríbenos» ─────────────────────────────────── */
.zx-forma{background:#fff;border:1px solid var(--zx-linea);border-radius:var(--r24);
  box-shadow:var(--zx-sombra);padding:clamp(1.6rem,3vw,2.4rem)}
.zx-forma form{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.zx-forma form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zx-campo--ancho{grid-column:1/-1}
.zx-campo{display:grid;gap:.4rem;min-width:0}
.zx-campo span{font-size:.875rem;font-weight:500;color:var(--zx-tinta);letter-spacing:-.01em}
.zx-campo input,.zx-campo select,.zx-campo textarea{
  font-family:var(--zx-fam);font-size:1rem;width:100%;letter-spacing:-.011em;
  color:var(--zx-tinta);background:#fff;border:1px solid var(--zx-linea);
  border-radius:var(--r8);padding-inline:.85rem;height:2.75rem;min-height:2.75rem;
  padding-block:0;line-height:normal;box-shadow:none}
.zx-campo textarea{height:auto;min-height:7rem;line-height:1.5;padding-block:.8rem;resize:vertical}
.zx-campo :focus-visible{outline:2px solid var(--zx-violeta);outline-offset:1px;
  border-color:var(--zx-violeta)}
.zx-forma .zx-trampa{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0}
.zx-forma .zx-btn{width:100%}
@media (min-width:560px){.zx-forma .zx-btn{width:auto}}

/* ── la banda superior ─────────────────────────────────────────────── */
body.zx .zm-barra{background:#fff;border-bottom:1px solid var(--zx-linea)}
body.zx .zm-barra__in{min-height:4.5rem}
body.zx .zm-logo{color:var(--zx-tinta);font-family:var(--zx-fam);font-weight:600;
  letter-spacing:-.03em;font-size:1.375rem;gap:.55rem}
body.zx .zm-marca g{fill:var(--zx-violeta)}
body.zx .zm-nav a{color:var(--zx-tinta);font-size:1rem;font-weight:400;
  letter-spacing:-.02em;text-decoration:none}
body.zx .zm-nav a:hover{color:var(--zx-violeta-tx)}
body.zx .zm-idioma{color:var(--zx-tx);font-size:.875rem}
body.zx .zm-idioma a{color:inherit;text-decoration:none}
body.zx .zm-idioma a[aria-current]{color:var(--zx-violeta-tx);font-weight:600}
body.zx .zm-enlace{color:var(--zx-tinta);font-weight:500;letter-spacing:-.02em;
  text-decoration:none}
body.zx .zm-barra .zm-b--violeta{background:var(--zx-violeta);border-color:var(--zx-violeta);
  color:#fff;border-radius:var(--r8);height:2.5rem;padding:0 1rem;font-weight:500;
  font-family:var(--zx-fam);letter-spacing:-.02em}
body.zx .zm-barra .zm-b--linea{background:#fff;border-color:var(--zx-linea);
  color:var(--zx-tinta);border-radius:var(--r8);height:2.5rem;padding:0 1rem;
  font-weight:500;font-family:var(--zx-fam);letter-spacing:-.02em}

/* ── el pie ────────────────────────────────────────────────────────── */
body.zx .zm-pie{background:#fff;border-top:1px solid var(--zx-linea);color:var(--zx-tx)}
body.zx .zm-pie h2,body.zx .zm-pie h3{font-family:var(--zx-fam);font-size:.8125rem;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--zx-gris)}
body.zx .zm-pie a{color:var(--zx-tx);text-decoration:none}
body.zx .zm-pie a:hover{color:var(--zx-violeta-tx)}
body.zx .zm-pie__d{color:var(--zx-tx);font-size:.9375rem;line-height:1.5}
body.zx .zm-pie__cierre{border-top:1px solid var(--zx-linea);color:var(--zx-gris);
  font-size:.875rem}
body.zx .zm-pagos{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;
  margin:1.25rem 0 0}
body.zx .zm-pagos li{border:1px solid var(--zx-linea);border-radius:var(--r6);
  padding:.3rem .65rem;font-size:.8125rem;color:var(--zx-tx);letter-spacing:-.01em}

/* ── la casa gritaba ───────────────────────────────────────────────────
   El sistema anterior es un tablero de salidas: `app.css` pone
   `text-transform:uppercase` en veintitantas reglas —titulares, menú,
   botones, rótulos, encabezados de tabla— con tracking POSITIVO de hasta
   .2em. La referencia es exactamente lo contrario: caja normal y tracking
   negativo. Se apaga de una vez, y se vuelve a encender sólo donde el
   sistema nuevo sí lo quiere: los rótulos de columna del pie. */
body.zx *{text-transform:none}
body.zx .zm-pie h2,body.zx .zm-pie h3{text-transform:uppercase;letter-spacing:.04em}

/* el tracking positivo de la casa también se va de los titulares y del menú:
   la referencia los lleva en negativo y mezclarlos deja el texto suelto */
body.zx h1,body.zx h2,body.zx h3,body.zx h4,
body.zx .zm-logo,body.zx .zm-nav a,body.zx .zm-b,body.zx button,
body.zx legend,body.zx dt,body.zx th{letter-spacing:-.02em}
body.zx .zx-h1{letter-spacing:-.05em}
body.zx .zx-h2,body.zx .zx-h3,body.zx .zx-cifra__v{letter-spacing:-.04em}
body.zx .zx-cifra__v{letter-spacing:-.05em}

/* ── una sola familia, como la referencia ──────────────────────────────
   `app.css` reparte dos caras por tokens: `--fd` la condensada de titulares
   y `--fs` el cuerpo. Ya no se sirven —la hoja de Google se retiró— así que
   dejarlas apuntando ahí manda el menú y los rótulos a la cara por omisión
   del navegador. Se reapuntan las dos a la del sistema, que es una sola. */
body.zx{--fd:var(--zx-fam);--fs:var(--zx-fam)}

/* ── la rejilla, a la medida del castellano ────────────────────────────
   Cuatro tarjetas en fila dejan 238 px de columna de texto: unos 30 signos
   por renglón. Con el ligador de la casa —que ata las palabras de una y dos
   letras a la siguiente— eso parte los renglones antes de tiempo y el rag
   queda como una escalera. En dos por dos la columna sube a 564 y el
   párrafo cabe en dos renglones, que es como los lleva la referencia.
   La tarjeta se pone en fila —pieza a la izquierda, texto a la derecha—
   para que el ancho no la deje vacía. */
@media (min-width:700px){.zx-rej--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.zx-rej--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px){
  .zx-rej--4 .zx-card{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:1.25rem;row-gap:.4rem;align-items:start}
  .zx-rej--4 .zx-card__n,.zx-rej--4 .zx-card__i{grid-row:1/span 2;margin-bottom:0}
  .zx-rej--4 .zx-card h3{align-self:center}
  .zx-rej--4 .zx-card p{max-width:52ch}
}

/* `body.zx h3` es (0,1,2) y le gana a `.zx-aviso h3` (0,1,1): el rótulo del
   aviso se quedaba pegado a su párrafo. Se iguala el alcance. */
body.zx .zx-aviso h3{margin:0 0 .45rem}
body.zx .zx-prosa h2,body.zx .zx-prosa h3{margin-block:2.4rem .8rem;color:var(--zx-negro)}
body.zx .zx-prosa h3{margin-block:1.8rem .6rem}

/* ══ LAS PANTALLAS DE CUENTA Y EL PANEL ══════════════════════════════════
   Aquí NO se reescribe el marcado: esas plantillas llevan nonces, nombres de
   campo, `autocomplete` y ganchos de `panel.js`, y tocarlos por estética es
   cambiar algo que funciona. Cambian el color, la cara y la esquina.

   Y no se va clase por clase: `app.css` reparte el acero por TOKENS, así que
   se reapuntan los tokens bajo `body.zx` y con eso caen de una vez todas las
   superficies —incluidas las que no salen en ninguna captura—. Cada
   sustituto va medido:
     tinta   #F4F5F6 sobre acero → #181D27 sobre blanco  16,88
     tinta-2 #CDD1D6            → #3A4151                10,22
     apoyo   #A1A8AF            → #535862                 7,14
     filete-2 #7C858D (3,26)    → #7E8699                 3,65  (pide 3)
     ok #8FD694/#2C4430 → #1D6B4A sobre #ECFBF3           6,04
     pausa                → #8A5A00 sobre #FFF8E8         5,60
     alto                 → #A32A22 sobre #FEF3F2         6,63
     blanco sobre el morado                               4,52  */
body.zx{
  --base:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:var(--zx-lav);
  --filete:var(--zx-linea);
  --filete-2:#7E8699;
  --tinta:var(--zx-tinta);
  --tinta-2:#3A4151;
  --apoyo:var(--zx-tx);
  --violeta:var(--zx-violeta);
  --violeta-2:var(--zx-lav);
  --violeta-ink:#FFFFFF;
  --ok:#1D6B4A;   --ok-2:#ECFBF3;
  --pausa:#8A5A00; --pausa-2:#FFF8E8;
  --alto:#A32A22; --alto-2:#FEF3F2;
  --ctrl:8px;
  --ancho:1280px;
}
body.zx.zm-auth,body.zx.zm-app{background:#fff}

/* ── la tarjeta de acceso ──────────────────────────────────────────────
   `app.css` la desarma por encima de su corte: la deja sin fondo, sin borde
   y sin relleno —un formulario suelto—. Esa regla lleva dos clases; se
   iguala el alcance y el relleno lo pagan los HIJOS, para que la franja de
   rótulo siga yendo a sangre. */
body.zx .zm-acceso .zm-acceso__caja,
body.zx .zm-acceso .zm-acceso__caja--ancha{
  background:#fff;border:1px solid var(--zx-linea);border-radius:var(--r24);
  box-shadow:var(--zx-sombra);overflow:hidden;padding:0;margin-inline:auto}
body.zx .zm-acceso .zm-acceso__caja:not(.zm-acceso__caja--ancha){max-width:34rem}
body.zx .zm-acceso .zm-acceso__caja--ancha{max-width:48rem}
body.zx .zm-acceso__caja>*{padding-inline:clamp(1.5rem,4vw,2.4rem)}
body.zx .zm-acceso__caja>form{padding-bottom:1.6rem}

/* la franja de rótulo: la pastilla lavanda del sistema, a sangre */
body.zx .zm-acceso .zm-marca-agua{background:var(--zx-lav);color:var(--zx-violeta-tx);
  margin:0;padding-block:1rem;font-weight:500;font-size:.9375rem;letter-spacing:-.01em;
  display:flex;align-items:center;gap:.6rem}
body.zx .zm-acceso .zm-marca-agua::before{content:"";flex:none;width:20px;height:2px;
  background:var(--zx-violeta)}
body.zx .zm-acceso .zm-marca-agua::after{content:none}

body.zx .zm-acceso h1{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.4rem);line-height:1.12;
  letter-spacing:-.04em;color:var(--zx-negro);margin-top:1.6rem}
body.zx .zm-acceso__d{color:var(--zx-tx);font-size:1rem;margin:.7rem 0 1.6rem}

/* ── controles: alto fijado aquí, no heredado ──────────────────────────
   `main select` fuerza `height:var(--h-ctrl)` con `box-sizing:border-box` y
   la hoja de Bricks pone `line-height:40px` en todo input y select: si
   además se les pone relleno vertical, el contenido pide más de lo que cabe
   y la opción se corta por abajo. El alto se declara y el relleno se va. */
body.zx .zm-campo input,body.zx .zm-campo select,body.zx .zm-campo textarea,
body.zx .zm-acceso input[type=email],body.zx .zm-acceso input[type=password],
body.zx .zm-acceso input[type=text],body.zx .zm-acceso input[type=tel],
body.zx .zm-acceso input[type=date],body.zx .zm-acceso select{
  font-family:var(--zx-fam);font-size:1rem;letter-spacing:-.011em;
  color:var(--zx-tinta);background:#fff;border:1px solid var(--zx-linea);
  border-radius:var(--r8);padding-inline:.85rem;padding-block:0;
  height:2.75rem;min-height:2.75rem;line-height:normal;box-shadow:none}
body.zx .zm-campo textarea,body.zx .zm-acceso textarea{
  height:auto;min-height:7rem;line-height:1.5;padding-block:.8rem}
body.zx .zm-campo input:focus,body.zx .zm-campo select:focus,
body.zx .zm-campo textarea:focus,body.zx .zm-acceso input:focus,
body.zx .zm-campo :focus-visible{outline:2px solid var(--zx-violeta);outline-offset:1px;
  border-color:var(--zx-violeta)}
body.zx .zm-campo span,body.zx .zm-casilla span{font-size:.875rem;color:var(--zx-tinta);
  font-weight:500;letter-spacing:-.01em}
body.zx input[type=checkbox],body.zx input[type=radio]{
  width:1.15rem;height:1.15rem;min-height:0;accent-color:var(--zx-violeta);flex:none}

/* ── botones de las pantallas de cuenta ────────────────────────────────
   La referencia los lleva de 40 px; aquí el alto homologado de la casa es
   `--h-ctrl`, así que se respeta y sólo cambian esquina, cara y color. */
body.zx.zm-auth .zm-b,body.zx.zm-app .zm-b{border-radius:var(--r8);
  font-family:var(--zx-fam);font-weight:500;letter-spacing:-.02em;box-shadow:none}
body.zx.zm-auth .zm-b--violeta,body.zx.zm-app .zm-b--violeta{
  background:var(--zx-violeta);border-color:var(--zx-violeta);color:#fff}
body.zx.zm-auth .zm-b--violeta:hover,body.zx.zm-app .zm-b--violeta:hover{
  background:var(--zx-violeta-2);border-color:var(--zx-violeta-2)}
body.zx.zm-auth .zm-b--linea,body.zx.zm-app .zm-b--linea{
  background:#fff;border-color:var(--zx-linea);color:var(--zx-tinta)}
body.zx.zm-auth .zm-b--linea:hover,body.zx.zm-app .zm-b--linea:hover{
  background:var(--zx-lav);border-color:var(--zx-lav-2)}
body.zx.zm-app .zm-b--alto{background:#A32A22;border-color:#A32A22;color:#fff}

/* el pie de enlaces de la tarjeta */
body.zx .zm-acceso .zm-acceso__pie{background:var(--zx-lav);
  border-top:1px solid var(--zx-linea);padding-block:1.1rem;margin-top:1.8rem;
  font-size:.9375rem;color:var(--zx-tx)}
body.zx .zm-acceso__pie a{color:var(--zx-violeta-tx);text-decoration:underline;
  text-underline-offset:.22em}

/* ── el alta: el riel de pasos ─────────────────────────────────────────
   El disco del numeral mide más que el `<legend>` y asomaba por debajo del
   rótulo; el rótulo se iguala a su alto —ya es `flex` centrado— y se le da
   aire propio, que el grupo no siempre trae descripción. */
body.zx .zm-grupo{border-top-color:var(--zx-linea)}
body.zx .zm-grupo legend{font-family:var(--zx-fam);font-weight:500;font-size:1.125rem;
  color:var(--zx-negro);letter-spacing:-.03em;min-height:1.65rem;margin-bottom:.9rem}
body.zx .zm-grupo__n{background:var(--zx-lav);color:var(--zx-violeta-tx);
  border-color:var(--zx-lav-2);font-weight:600}
body.zx .zm-grupo__d{font-size:.9375rem;color:var(--zx-tx)}
body.zx .zm-ranura{border-color:var(--zx-linea);border-radius:var(--r12);background:#fff}
body.zx .zm-ranura__k{font-family:var(--zx-fam);font-weight:500;color:var(--zx-tinta)}

/* ── el panel ──────────────────────────────────────────────────────────
   La medida va en el CONTENEDOR, no en sus hijos: `.zm-app__cab` y
   `.zm-escritorio` viven dentro de `.zm-ancho`, y ponérsela otra vez cobra
   el canalón dos veces. */
body.zx .zm-app__cab h1{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  letter-spacing:-.04em;color:var(--zx-negro)}
body.zx .zm-app__cab .zm-marca-agua{background:none;padding:0;color:var(--zx-violeta-tx);
  font-weight:500;font-size:.9375rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem}
body.zx .zm-app__cab .zm-marca-agua::before{content:"";flex:none;width:20px;height:2px;
  background:var(--zx-violeta)}
body.zx .zm-app__estado,body.zx .zm-app__d{color:var(--zx-tx);font-size:1rem}

body.zx .zm-cuenta{background:#fff;border:1px solid var(--zx-linea);
  border-radius:var(--r24);box-shadow:var(--zx-sombra);overflow:hidden}
body.zx .zm-cuenta__cab{background:var(--zx-lav);color:var(--zx-tinta);
  padding:1.1rem 1.4rem;align-items:center;border-bottom:1px solid var(--zx-linea)}
body.zx .zm-cuenta__cab b{font-family:var(--zx-fam);font-weight:600;font-size:1rem;
  color:var(--zx-negro);letter-spacing:-.03em}
body.zx .zm-cuenta__cab span{font-size:.8125rem;color:var(--zx-violeta-tx);
  letter-spacing:-.01em;opacity:1}
body.zx .zm-cuenta__cuerpo{padding:1.5rem 1.4rem}
body.zx .zm-cuenta__r{border-bottom-color:var(--zx-linea);padding-block:.8rem;gap:1rem}
body.zx .zm-cuenta__r dt{font-size:.875rem;color:var(--zx-tx);min-width:0}
body.zx .zm-cuenta__r dd{font-family:var(--zx-fam);font-weight:600;color:var(--zx-negro);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
body.zx .zm-cuenta__r--fuerte{background:var(--zx-lav)}
body.zx .zm-cuenta__r--fuerte dd{color:var(--zx-violeta-tx)}
body.zx .zm-cuenta__pie{background:var(--zx-lav);border-top-color:var(--zx-linea);
  color:var(--zx-tx)}

body.zx .zm-cambio__c{background:#fff;border-color:var(--zx-linea);
  border-radius:var(--r16);box-shadow:var(--zx-sombra)}
body.zx .zm-cambio dt{color:var(--zx-tx);letter-spacing:.04em;min-width:0}
body.zx .zm-cambio dd{font-family:var(--zx-fam);font-weight:600;color:var(--zx-negro);
  white-space:nowrap;letter-spacing:-.03em}
body.zx .zm-cambio dd small{color:var(--zx-tx)}
body.zx .zm-asiento-chico{background:#fff;border-color:var(--zx-linea);border-radius:var(--r12)}

body.zx .zm-monto{border:1px solid var(--zx-linea);border-radius:var(--r8);
  background:#fff;overflow:hidden}
body.zx .zm-monto__m{background:var(--zx-lav);color:var(--zx-tx);font-weight:500;
  border-right:1px solid var(--zx-linea)}
body.zx .zm-monto input{font-family:var(--zx-fam);font-variant-numeric:tabular-nums;
  color:var(--zx-tinta)}
body.zx .zm-monto:focus-within{outline:2px solid var(--zx-violeta);outline-offset:1px;
  border-color:var(--zx-violeta)}
body.zx .zm-rapidos .zm-b{border-radius:var(--r8);border-color:var(--zx-linea);
  background:#fff;color:var(--zx-tinta);box-shadow:none;font-weight:500}
body.zx .zm-rapidos .zm-b:hover{border-color:var(--zx-violeta);background:var(--zx-lav)}

body.zx .zm-tabla th{font-family:var(--zx-fam);color:var(--zx-tx);font-size:.8125rem;
  font-weight:500;letter-spacing:-.01em;border-bottom-color:var(--zx-linea)}
body.zx .zm-tabla td{border-bottom-color:var(--zx-linea);color:var(--zx-tx)}
body.zx .zm-chip{border-radius:var(--r6);font-family:var(--zx-fam);font-weight:500;
  font-size:.8125rem;padding:.25rem .6rem}
body.zx .zm-vacio,body.zx .zm-vacio__d,body.zx .zm-pista{color:var(--zx-tx)}
body.zx .zm-nota{border-radius:var(--r12);font-size:.9375rem;color:var(--zx-tinta)}
body.zx .zm-nota--ok{background:#ECFBF3;border-color:#8FE3BC}
body.zx .zm-nota--wait{background:#FFF8E8;border-color:#EFCE8A}
body.zx .zm-nota--bad{background:#FEF3F2;border-color:#F3B5AE}
body.zx .zm-aviso-caja{background:#fff;border:1px solid var(--zx-linea);
  border-radius:var(--r24);box-shadow:var(--zx-sombra)}
body.zx .zm-aviso-caja h2{font-family:var(--zx-fam);font-weight:500;color:var(--zx-negro);
  letter-spacing:-.03em}

/* La pestaña en curso lleva `is-on`. Al empatar en alcance con la regla de
   `app.css` y ir después, una regla mía sin ese estado le quitaría el color
   sin poner nada: la vista en curso quedaría igual que las demás. */
body.zx .zm-pestanas{border-radius:var(--r8);border-color:var(--zx-linea);overflow:hidden}
body.zx .zm-pestanas button{font-family:var(--zx-fam);font-weight:500;font-size:.9375rem;
  color:var(--zx-tx);background:#fff;letter-spacing:-.02em}
body.zx .zm-pestanas button:hover{background:var(--zx-lav)}
body.zx .zm-pestanas button.is-on{background:var(--zx-violeta);color:#fff}
body.zx .zm-pestanas button.is-on b{color:#fff;opacity:.85}
body.zx .zm-pestanas button b{color:var(--zx-tx)}

body.zx .zm-dlg{border-radius:var(--r24);border:1px solid var(--zx-linea);background:#fff}
body.zx .zm-dlg__d{font-family:var(--zx-fam);font-weight:500;color:var(--zx-negro)}
body.zx .zm-dlg__d-l{border-color:var(--zx-linea);border-radius:var(--r12)}
body.zx .zm-velo{background:rgba(24,29,39,.5)}
body.zx .zm-cajon{background:#fff;border-left:1px solid var(--zx-linea)}
body.zx .zm-cajon__cab,body.zx .zm-cajon__pie{border-color:var(--zx-linea);background:#fff}
body.zx .zm-buscar{border-color:var(--zx-linea);border-radius:var(--r8);background:#fff}
body.zx .zm-buscar:focus-within{border-color:var(--zx-violeta)}
body.zx .zm-codigo input{border-color:var(--zx-linea);border-radius:var(--r8);background:#fff;
  color:var(--zx-negro)}
body.zx .zm-codigo input.is-puesta{background:var(--zx-lav);border-color:var(--zx-violeta)}
body.zx .zm-escritorio{margin-inline:auto}

/* ── el formulario de acceso, apilado ──────────────────────────────────
   Por encima de 640 px `app.css` lo pone en dos columnas —rótulo a la
   izquierda, campo a la derecha, unidos por un filete— y el campo pierde su
   caja: fondo transparente, sin borde lateral ni esquina. Es el idioma de la
   placa de acero; sobre la tarjeta blanca del sistema se lee como un
   accidente. La referencia apila rótulo y campo. */
@media (min-width:640px){
  body.zx .zm-acceso__caja:not(.zm-acceso__caja--ancha) form{
    display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;align-items:stretch}
  body.zx .zm-acceso__caja:not(.zm-acceso__caja--ancha) form>*{grid-column:1}
  body.zx .zm-acceso__caja:not(.zm-acceso__caja--ancha) form>.zm-campo{
    padding:0;border-top:0;margin-bottom:1.1rem}
  body.zx .zm-acceso__caja:not(.zm-acceso__caja--ancha) form>.zm-campo>span{
    margin-bottom:.4rem}
  body.zx .zm-acceso__caja:not(.zm-acceso__caja--ancha) form>.zm-campo+input{
    border:1px solid var(--zx-linea);border-radius:var(--r8);background:#fff;
    margin:0 0 1.1rem;padding-inline:.85rem}
}
body.zx .zm-campo>span{display:block;font-family:var(--zx-fam);font-size:.875rem;
  font-weight:500;letter-spacing:-.01em;color:var(--zx-tinta);margin-bottom:.4rem}
/* el alta: cada grupo era una placa de acero con borde de 2 px */
body.zx .zm-acceso__caja--ancha .zm-grupo{border:1px solid var(--zx-linea);
  border-radius:var(--r24);background:#fff;box-shadow:var(--zx-sombra)}

/* ── la banda del grupo en el alta ─────────────────────────────────────
   `.zm-acceso__caja--ancha .zm-grupo legend` lleva TRES clases: le gana al
   apagado general de mayúsculas y al mío de dos. Pintaba la banda con el
   filete de acero y el rótulo en versalitas con tracking positivo, que es lo
   contrario del sistema. Se iguala el alcance. */
body.zx .zm-acceso__caja--ancha .zm-grupo legend{
  background:var(--zx-lav);color:var(--zx-negro);text-transform:none;
  letter-spacing:-.03em;font-size:1.0625rem;font-weight:500;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--zx-linea)}
body.zx .zm-acceso__caja--ancha .zm-grupo__n{background:#fff;color:var(--zx-violeta-tx);
  border:1px solid var(--zx-lav-2);border-radius:var(--r6);
  padding:.12rem .45rem;font-weight:600;font-size:.8125rem}
body.zx .zm-acceso__caja--ancha .zm-grupo{padding-bottom:1.5rem}
/* la ficha ancha ya no necesita su propio marco: los grupos SON las fichas */
body.zx .zm-acceso .zm-acceso__caja--ancha{background:transparent;border:0;
  box-shadow:none;padding:0}
body.zx .zm-acceso__caja--ancha>*{padding-inline:0}

/* En la ficha ancha ya no hay tarjeta que contenga la franja: el rótulo
   vuelve a ser la pastilla suelta del sistema, como en las interiores. */
body.zx .zm-acceso .zm-acceso__caja--ancha .zm-marca-agua{
  background:none;padding:0;margin-bottom:1.25rem}

/* `--zx-gris` da 2,41 sobre blanco: la hoja lo declara como filete y adorno,
   y aquí acabó pintando los rótulos de columna del pie y la línea de cierre.
   Pasan al gris de texto, 7,14. */
body.zx .zm-pie h2,body.zx .zm-pie h3{color:var(--zx-tx)}
body.zx .zm-pie__cierre{color:var(--zx-tx)}

/* La entradilla del cierre iba en blanco al 86 %: compuesta sobre el morado
   da #ECE8FE contra #7A5AF8, 3,77 — por debajo de AA, y mi sonda no lo vio
   porque descartaba los colores con alfa en vez de componerlos. El blanco
   pleno sobre ese morado da 4,52 y no hay margen para rebajarlo. */
body.zx .zx-cierre .zx-lead{color:#fff}

/* ── las marcas de pago ────────────────────────────────────────────────
   Se dimensionan por TINTA, no por caja: la palabra VISA es tres veces más
   ancha que los discos, así que por unidad de alto lleva más tinta.
   La razón se MIDE en el render de esta casa, no se hereda: con Mastercard
   a 21,7, VISA a 18 daba 5.082 px² de tinta contra 4.769 —un 6,6 % de más—;
   a 17,4 quedan 4.720 contra 4.768, un 1 %. La razón aquí es 0,802. (En
   bremmak salió 0,828 y en monocromo sería 0,89, porque el trazo cubre
   menos que el disco lleno: cada pie tiene la suya.)
   El `viewBox` de cada una va recortado a su dibujo, así que aquí sólo se
   fija el ALTO y el ancho lo saca el navegador. */
.zm-pay{display:inline-flex;align-items:center;gap:1rem}
.zm-pay__v,.zm-pay__m{width:auto;min-width:0;min-height:0;flex:none;display:block}
.zm-pay__v{height:17.4px}
.zm-pay--color .zm-pay__m{height:21.7px}
body.zx .zm-pie .zm-pay{margin-top:1.25rem}

/* Misma trampa que en el aviso: `body.zx h2` es (0,1,2) y le gana a
   `.zm-pie h2`. Los rótulos de columna quedaban pegados a su lista. */
body.zx .zm-pie h2,body.zx .zm-pie h3{margin:0 0 .85rem}
body.zx .zm-pie__col ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}

/* ══ CUANDO LA BARRA NO DA PARA TODO ═════════════════════════════════════
   Por debajo de 900 px `app.css` esconde el menú y por debajo de 520 el
   idioma, sin poner nada en su lugar: en un teléfono no se llegaba a las
   cuatro secciones, ni al contacto, ni se podía cambiar de lengua. La
   referencia resuelve con una hamburguesa a la derecha; aquí la hoja entra
   desde ese mismo lado. Por encima de 900 nada de esto aplica. */
.zx-menu-b{display:none}
.zm-idioma--hoja{display:none}

@media (max-width:899.98px){
  body.zx .zx-menu-b{display:grid;place-items:center;width:2.75rem;height:2.75rem;
    margin-left:auto;flex:none;border:1px solid var(--zx-linea);border-radius:var(--r8);
    background:#fff;color:var(--zx-tinta);padding:0;cursor:pointer;position:relative;z-index:70}
  body.zx .zx-menu-b svg{display:block}
  body.zx .zx-menu-b .zx-menu-b__c{display:none}
  body.zx.zx-menu .zx-menu-b .zx-menu-b__a{display:none}
  body.zx.zx-menu .zx-menu-b .zx-menu-b__c{display:grid}
  body.zx .zx-menu-b:focus-visible{outline:2px solid var(--zx-violeta);outline-offset:2px}

  /* la hoja: papel blanco, la tinta del sistema, y entra desde la derecha */
  body.zx .zm-barra .zm-nav{display:flex;flex-direction:column;align-items:stretch;
    gap:.15rem;position:fixed;inset:0 0 0 auto;width:min(19rem,84vw);z-index:62;
    background:#fff;border-left:1px solid var(--zx-linea);overflow-y:auto;margin:0;
    padding:calc(var(--zx-barra,72px) + 1rem) 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    transform:translateX(101%);transition:transform .26s ease;
    box-shadow:0 0 60px rgba(24,29,39,.18)}
  body.zx.zx-menu .zm-barra .zm-nav{transform:none}
  body.zx .zm-barra .zm-nav a{color:var(--zx-tinta);width:100%;padding:.85rem .9rem;
    border-radius:var(--r8);font-size:1rem;font-weight:500;letter-spacing:-.02em}
  body.zx .zm-barra .zm-nav a:hover{color:var(--zx-violeta-tx);background:var(--zx-lav)}

  /* el idioma y las acciones, al pie de la hoja */
  body.zx .zm-barra .zm-idioma--hoja{display:flex;justify-content:center;gap:.4rem;
    margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--zx-linea);
    font-size:.9375rem;color:var(--zx-tx)}
  body.zx .zm-barra .zm-idioma--hoja a{width:auto;padding:.35rem .6rem;color:inherit}
  body.zx .zm-barra .zm-idioma--hoja a[aria-current]{color:var(--zx-violeta-tx);
    font-weight:600;background:none}
  body.zx .zm-barra .zx-menu__acc{margin-top:.6rem;width:100%}
  body.zx .zm-barra .zx-menu__acc:first-of-type{margin-top:1rem}

  body.zx .zx-velo-m{position:fixed;inset:0;z-index:61;background:rgba(24,29,39,.4);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.zx.zx-menu{overflow:hidden}
  body.zx.zx-menu .zm-barra{z-index:64}
  body.zx.zx-menu .zm-barra .zm-logo{position:relative;z-index:70}

  /* Las dos acciones se van a la hoja: la barra se queda en un renglón con
     la marca y la hamburguesa. Antes gastaba dos, con la marca sola arriba. */
  body.zx .zm-barra__acc{display:none}
  body.zx .zm-barra__in{gap:.75rem;flex-wrap:nowrap;align-items:center;min-height:4.5rem}
}
@media (max-width:899.98px) and (prefers-reduced-motion:reduce){
  body.zx .zm-barra .zm-nav{transition:none}
}

/* ══ LOS INTERIORES EN PANTALLA ESTRECHA ═════════════════════════════════
   ── el aviso, apilado ──────────────────────────────────────────────────
   Con el disco al lado, al texto le quedaban 250 px en un teléfono y el
   rótulo se partía en dos renglones contra el icono. Debajo de 560 se
   apilan: el disco arriba, el texto a todo el ancho. */
@media (max-width:559.98px){
  body.zx .zx-aviso{grid-template-columns:minmax(0,1fr);gap:.9rem}
}

/* ── las entradillas largas, alineadas a la izquierda ───────────────────
   Centrado, un párrafo de siete renglones a 320 px deja un rag en escalera
   —y el ligador de la casa, que ata las palabras de una y dos letras, lo
   empeora—. El titular sigue centrado; el texto corrido, no. */
@media (max-width:559.98px){
  body.zx .zx-cab .zx-lead,body.zx .zx-hero .zx-lead,body.zx .zx-cifra__d{
    text-align:left;margin-inline:0}
  body.zx .zx-cierre .zx-lead{text-align:left}
}

/* ── el aire del carril ─────────────────────────────────────────────────
   El filete punteado separa dos apartados; a 390 sus 3,5 rem por lado son
   siete centímetros de nada entre dos cosas que ya estaban separadas. */
@media (max-width:699.98px){
  body.zx .zx-carril{margin-block:1.75rem}
  body.zx .zx-hero{padding-top:clamp(2rem,6vw,3rem);padding-bottom:1.5rem}
  body.zx .zx-sec{padding-block:clamp(2.25rem,6vw,3rem)}
}

/* ── el teléfono chico ──────────────────────────────────────────────────
   A 320 la ficha deja 248 px por dentro: el chaflán se aprieta, no el
   texto. */
@media (max-width:379.98px){
  body.zx .zx-card{padding:1.15rem}
  body.zx .zx-aviso{padding:1.15rem}
  body.zx .zx-cifra{padding-inline:1.15rem}
  body.zx .zx-cierre{padding-inline:1.15rem}
  body.zx .zx-forma{padding:1.15rem}
}

/* Mi propia regla del menú —`body.zx .zm-barra .zm-nav a`, tres clases— le
   ganaba a `.zx-btn` y pintaba «Mi registro» con la tinta del sistema sobre
   el morado en vez de con blanco. Los botones de la hoja no son enlaces de
   menú: se les devuelve su color y su borde. */
@media (max-width:899.98px){
  body.zx .zm-barra .zm-nav a.zx-btn{color:#fff;border-color:var(--zx-violeta);
    justify-content:center;padding:0 1.1rem;height:2.75rem}
  body.zx .zm-barra .zm-nav a.zx-btn:hover{background:var(--zx-violeta-2);
    border-color:var(--zx-violeta-2);color:#fff}
  body.zx .zm-barra .zm-nav a.zx-btn--linea{color:var(--zx-tinta);background:#fff;
    border-color:var(--zx-linea)}
  body.zx .zm-barra .zm-nav a.zx-btn--linea:hover{background:var(--zx-lav);
    border-color:var(--zx-lav-2);color:var(--zx-tinta)}
}

/* Las acciones de la hoja viven en el menú, y el menú sólo existe por debajo
   del corte: por encima quedaban DUPLICADAS —una vez en la barra y otra
   dentro de la navegación—, que además ensanchaba la barra 105 px y sacaba
   la página 64 a 1.000. Se ocultan igual que el idioma de la hoja. */
.zx-menu__acc{display:none}
@media (max-width:899.98px){
  body.zx .zm-barra .zm-nav a.zx-menu__acc{display:inline-flex}
}

/* Los trazados de `zm_icon()` no traen `fill`, así que valen negro salvo que
   alguien les diga que tomen el color de su caja. `app.css` lo hace sólo
   para sus propias piezas; las `zx-` quedaban con la paloma en negro dentro
   del cuadro lavanda. */
.zx-card__i svg,.zx-card__i path,
.zx-aviso__d svg,.zx-aviso__d path,
.zx-lista i svg,.zx-lista i path,
.zx-btn svg,.zx-btn path,
.zx-pelado svg,.zx-pelado path,
.zx-menu-b svg,.zx-menu-b path{fill:currentColor}

/* ══ EL PANEL EN PANTALLA ESTRECHA ═══════════════════════════════════════

   ── las pestañas ───────────────────────────────────────────────────────
   Son cinco vistas con su cuenta, en un `inline-flex` que se parte: a 390
   caían 2-2-1, con los filetes de separación colgando entre renglones y la
   pestaña en curso ocupando media rejilla. Pasan a UN renglón que se
   desplaza —como la referencia pone sus filtros—, sin filetes y con hueco:
   así se lee cuál está activa y las otras se alcanzan deslizando. */
@media (max-width:699.98px){
  body.zx .zm-pestanas{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.4rem;
    border:0;border-radius:0;padding-bottom:.25rem;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 1.5rem),transparent)}
  body.zx .zm-pestanas::-webkit-scrollbar{display:none}
  body.zx .zm-pestanas button{flex:none;border:1px solid var(--zx-linea);
    border-radius:var(--r8);white-space:nowrap}
  body.zx .zm-pestanas button.is-on{border-color:var(--zx-violeta)}
}

/* ── el asiento: tres pastillas que ocupaban 417 px ─────────────────────
   Apiladas, cada una gastaba 139 px de alto para un rótulo y una cifra.
   Por debajo de 560 comparten renglón: 417 → 190. */
@media (max-width:559.98px){
  body.zx .zm-cambio__c{display:flex;align-items:baseline;justify-content:space-between;
    gap:1rem;padding:.9rem 1.1rem}
  body.zx .zm-cambio__c dt{min-width:0}
  body.zx .zm-cambio__c dd{margin-top:0;white-space:nowrap}
  body.zx .zm-cambio{gap:.6rem}
}

/* ── la cabecera del panel ──────────────────────────────────────────────
   El saludo y el estado de la cuenta iban con 40 px de hueco entre ellos en
   una columna de 350: se tocaban por poco, y a 320 se partían mal. */
@media (max-width:559.98px){
  body.zx .zm-app__cab{gap:.75rem 1rem}
  body.zx .zm-app__estado{width:100%}
}

/* ── la tabla del cumplimiento ──────────────────────────────────────────
   Sus columnas no caben en 390: la rueda las desplaza, que es lo correcto,
   pero sin aviso el encabezado sale cortado a media palabra y parece rota.
   Se le pone el desvanecido del borde —sobre blanco no se ve, sobre texto
   dice «sigue»— y el mensaje de vista vacía se queda pegado a la izquierda
   en vez de centrarse en los 725 px de la tabla, donde no se lee. */
@media (max-width:699.98px){
  body.zx .zm-rueda{position:relative;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent)}
  body.zx .zm-tabla td[colspan]>*{position:sticky;left:0;
    width:min(100%,calc(100vw - var(--gut)*2 - 2px))}
  body.zx .zm-tabla th,body.zx .zm-tabla td{padding-inline:.9rem}
}

/* ── el teléfono chico ──────────────────────────────────────────────────
   A 320 la ficha deja 248 px por dentro: se aprieta el chaflán. */
@media (max-width:379.98px){
  body.zx .zm-cuenta__cuerpo{padding-inline:1rem}
  body.zx .zm-cuenta__cab{padding-inline:1rem}
  body.zx .zm-cuenta__pie{padding-inline:1rem}
  body.zx .zm-cambio__c{padding-inline:.9rem}
}