/* ══════════════════════════════════════════════════════════════════════
   BREMMAK — el sistema de `ordainit.com/wp-theme/sassty/home-04/`
   ══════════════════════════════════════════════════════════════════════
   Va DESPUÉS de `app.css` y sólo gobierna clases `sx-` y la clase `sx` 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, no copiado
   a ojo:

     titular ......... Montserrat 600 · 72 px · interlineado 1,1 · blanco
     cuerpo .......... Plus Jakarta Sans 400 · 16/19,2 · entradillas 18/27
     radios .......... 80 (píldora y pieza grande) · 30 (panel) · 10 (chica)
     medida .......... 1.320 px
     verde ........... #1FE290   (muestreado del botón y de la palabra)
     fondo oscuro .... #052324 → #0B483A, con barrido diagonal
     tarjeta oscura .. #143230
     panel teñido .... #F1F5FF
     titular claro ... #01103D
     cuerpo gris ..... #5F6168

   Lo único que NO se copia es la NAVEGACIÓN: la referencia la lleva en una
   píldora horizontal y aquí se queda LATERAL, que es la forma de esta casa
   y lo que el cliente pidió conservar. La traducción es directa: la barra
   oscura de la referencia, puesta de pie.

   La medida baja de 1.320 a 1.180 por la misma razón: el riel se come 252
   px y a 1.440 quedan 1.188 de columna útil.
   ══════════════════════════════════════════════════════════════════════ */

/* ── las tres caras, en casa y con nombre propio ──────────────────────────
   Se servían desde `fonts.googleapis.com`: una hoja de terceros que bloquea
   el pintado y sólo entonces destapa el woff2, dos viajes en cadena a otro
   dominio. Ahora son tres archivos del propio tema —el subconjunto LATINO,
   que es todo lo que piden el español y el inglés— y las dos que mandan van
   precargadas, así que la cara llega antes del primer pintado y el
   intercambio casi nunca se ve.

   El nombre lleva apellido. Con «Montserrat» a secas, una copia instalada
   en la máquina del visitante —o el `@font-face` de otro complemento con el
   mismo nombre— se cuela en el hueco y pinta con otras medidas: es lo que
   pasó aquí midiendo, y es lo que ya costó una vez con el Inter de
   WooCommerce. Con apellido no hay hueco que ocupar. */
@font-face{font-family:"Montserrat BK";
  src:url("../fonts/montserrat-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}
@font-face{font-family:"Jakarta BK";
  src:url("../fonts/jakarta-latin.woff2") format("woff2");
  font-weight:200 800;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}
@font-face{font-family:"Funnel BK";
  src:url("../fonts/funnel-latin.woff2") format("woff2");
  font-weight:300 800;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}

/* ══ LAS CARAS DE RESERVA, MEDIDAS ═══════════════════════════════════════
   El CLS móvil de la portada era 0,086 contra 0,006 en escritorio, y los
   dos saltos eran el intercambio de fuente: Montserrat aportaba 0,061 y
   Plus Jakarta Sans 0,025. La culpa no es de la cara que llega sino de la
   que espera: con `system-ui` de reserva el titular se pintaba 14,8 % más
   angosto que el Montserrat que venía en camino, el cuerpo 9,1 % más
   angosto que el Plus Jakarta y la marca 7,8 % que el Funnel. Al llegar la
   buena, todo se recolocaba.

   Se declara una reserva por familia Y POR PESO que ocupa lo mismo. No se
   calcula: se mide en el navegador contra los woff2 QUE SIRVE ESTE TEMA
   —los subconjuntos latinos de `assets/fonts/`, cargados bajo su nombre con
   apellido, porque con el nombre de la familia a secas se acaba midiendo la
   copia instalada en la máquina—. Y pedir una cara no la descarga: hay que
   USARLA, o `document.fonts.ready` resuelve en seco. Muestra: texto del
   propio sitio en los dos idiomas, 126 caracteres.

     cara              peso    ancho/em   base      size-adjust
     Montserrat        400      54,928    49,418      111,15 %
     Montserrat        500      55,650    49,418      112,61 %
     Montserrat        600      56,487    52,255      108,10 %
     Montserrat        700      57,383    52,255      109,81 %
     Plus Jakarta      400      50,811    49,418      102,82 %
     Plus Jakarta      500      51,368    49,418      103,95 %
     Plus Jakarta      600      51,925    52,255       99,37 %
     Plus Jakarta      700      52,483    52,255      100,44 %
     Funnel Display    400      51,928    49,418      105,08 %
     Funnel Display    800      53,443    52,255      102,27 %

   Los pesos gruesos se apoyan en el NEGRITA de verdad (`local("Arial
   Bold")`, base 52,255), no en el redondo (49,418). Dos razones: al
   declarar la cara con su peso el navegador ya no finge la negrita —la
   cara dice que lo es—, así que el redondo dejaba el texto 5,4 % angosto;
   y apoyada en el negrita la espera tampoco se ve más delgada de lo que va
   a quedar.

   Un peso por cara y no un rango ancho: entre Montserrat 500 y 600 hay 4,5
   puntos de size-adjust, y agruparlos deja 1,1 % de desvío en el titular,
   que es justo lo que se vino a quitar. Medido con las caras puestas, el
   desvío que queda es 0,00 % en los ocho pesos que el sitio pinta
   —Montserrat 500/600/700, Plus Jakarta 400/500/600/700 y Funnel 800—.
   Funnel 600 y 700 comparten cubeta con el 800 y quedan en 1,39 % y
   0,71 %: nada los pinta, y se parten el día que algo los pida.

   Si un navegador no entiende `size-adjust`, la cara se queda en Arial, que
   aun así se acerca más que `system-ui`: 2,8 % en el cuerpo contra 9,1 %. */

@font-face{font-family:"Montserrat Reserva";
  src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:100 400;font-style:normal;
  size-adjust:111.15%;ascent-override:87.27%;descent-override:22.49%;line-gap-override:0%}
@font-face{font-family:"Montserrat Reserva";
  src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:500;font-style:normal;
  size-adjust:112.61%;ascent-override:86.14%;descent-override:22.20%;line-gap-override:0%}
@font-face{font-family:"Montserrat Reserva";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:600;font-style:normal;
  size-adjust:108.10%;ascent-override:89.73%;descent-override:23.13%;line-gap-override:0%}
@font-face{font-family:"Montserrat Reserva";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:700 900;font-style:normal;
  size-adjust:109.81%;ascent-override:88.33%;descent-override:22.77%;line-gap-override:0%}

@font-face{font-family:"Jakarta Reserva";
  src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:100 400;font-style:normal;
  size-adjust:102.82%;ascent-override:101.15%;descent-override:21.40%;line-gap-override:0%}
@font-face{font-family:"Jakarta Reserva";
  src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:500;font-style:normal;
  size-adjust:103.95%;ascent-override:100.05%;descent-override:21.17%;line-gap-override:0%}
@font-face{font-family:"Jakarta Reserva";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:600;font-style:normal;
  size-adjust:99.37%;ascent-override:104.66%;descent-override:22.14%;line-gap-override:0%}
@font-face{font-family:"Jakarta Reserva";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:700 900;font-style:normal;
  size-adjust:100.44%;ascent-override:103.55%;descent-override:21.90%;line-gap-override:0%}

/* Funnel sólo pinta la marca —en la barra y en el pie—, pero la de la barra
   es un renglón que puede partirse: 7,8 % sobre «Bremmak» son 11 px a 24,
   bastante para que la acción salte al segundo renglón y la página entera
   baje. Lleva su reserva como las otras. */
@font-face{font-family:"Funnel Reserva";
  src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  font-weight:100 500;font-style:normal;
  size-adjust:105.08%;ascent-override:95.17%;descent-override:23.79%;line-gap-override:0%}
@font-face{font-family:"Funnel Reserva";
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold");
  font-weight:600 900;font-style:normal;
  size-adjust:102.27%;ascent-override:97.78%;descent-override:24.44%;line-gap-override:0%}

:root{
  --sx-verde:#1FE290;
  --sx-verde-2:#15C87C;
  --sx-verde-3:#0E3D30;     /* el verde al 12 %, para fondos sobre oscuro */
  --sx-tinta:#01103D;
  --sx-oscuro:#052324;
  --sx-oscuro-2:#0B483A;
  --sx-panel:#143230;
  --sx-tinte:#F1F5FF;
  --sx-tx:#5F6168;
  --sx-linea:#E4E8F2;
  --r80:80px; --r30:30px; --r10:10px;
  --sx-w:1180px;
  --sx-sombra:0 2px 4px rgba(1,16,61,.03),0 18px 44px -22px rgba(1,16,61,.16);
}

/* ── el lienzo ─────────────────────────────────────────────────────── */
body.sx{background:#fff;color:var(--sx-tx);
  font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-size:16px;line-height:1.2;letter-spacing:normal}
body.sx main{padding-bottom:clamp(2rem,4vw,3.5rem)}
.sx-w{width:min(var(--sx-w),100% - var(--gut)*2);margin-inline:auto}

/* ── tipografía ────────────────────────────────────────────────────── */
body.sx h1,body.sx h2,body.sx h3,body.sx h4,
.sx-h1,.sx-h2,.sx-h3{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  letter-spacing:normal;color:var(--sx-tinta)}
.sx-h1{font-size:clamp(2.4rem,1.3rem + 3.6vw,4.5rem);line-height:1.1;margin:0}
.sx-h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.25rem);line-height:1.12;margin:0}
.sx-h3{font-size:1.25rem;line-height:1.15;margin:0}
.sx-lead{font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;font-size:1.125rem;
  line-height:1.5;color:var(--sx-tx);margin:0;max-width:60ch}
.sx-verde{color:var(--sx-verde)}

/* el rótulo: en la referencia es una palabra mint, pequeña, sobre el
   titular. Sobre fondo oscuro va dentro de una píldora de contorno. */
.sx-rotulo{display:inline-block;font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-weight:600;font-size:1rem;color:var(--sx-verde);margin:0 0 .9rem}
.sx-rotulo--pastilla{border:1px solid rgba(31,226,144,.5);border-radius:var(--r80);
  padding:.6rem 1.4rem;margin-bottom:1.6rem}

/* ── botones ───────────────────────────────────────────────────────── */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--sx-verde);color:#04241A;border:0;border-radius:var(--r80);
  padding:1.05rem 2.1rem;font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap;
  transition:background var(--t),transform var(--t)}
.sx-btn:hover{background:var(--sx-verde-2)}
.sx-btn--linea{background:transparent;color:var(--sx-tinta);
  border:1px solid var(--sx-linea)}
.sx-btn--linea:hover{background:var(--sx-tinte)}
.sx-btn--claro{background:#fff;color:var(--sx-tinta)}
.sx-btn--claro:hover{background:var(--sx-tinte)}
/* la salida secundaria del héroe: un disco con el triángulo y el rótulo
   fuera, que es como la referencia pone «Watch Video» */
.sx-ver{display:inline-flex;align-items:center;gap:1rem;color:#fff;
  text-decoration:none;font-weight:500}
.sx-ver i{display:grid;place-items:center;width:3.4rem;height:3.4rem;flex:none;
  border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);transition:background var(--t)}
.sx-ver i b{display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:50%;background:#fff;color:var(--sx-oscuro)}
.sx-ver i svg{width:.95rem;height:.95rem}
.sx-ver:hover i{background:rgba(255,255,255,.16)}

/* ── el héroe ──────────────────────────────────────────────────────── */
.sx-hero{position:relative;overflow:hidden;border-radius:var(--r30);
  margin-top:clamp(1rem,2vw,1.75rem);
  padding:clamp(3rem,7vw,6rem) clamp(1.5rem,4vw,4rem) 0;
  background:
    linear-gradient(118deg,rgba(31,226,144,.14) 0%,rgba(31,226,144,0) 46%),
    linear-gradient(160deg,#052324 0%,#0A3C33 52%,#0B483A 100%);
  color:#fff;text-align:center}
.sx-hero .sx-h1{color:#fff;max-width:18ch;margin-inline:auto}
.sx-hero .sx-lead{color:rgba(255,255,255,.82);margin:1.5rem auto 0;max-width:64ch}
.sx-hero__acc{margin-top:2.4rem;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:1.6rem}
/* el barrido: la referencia cruza el fondo con una diagonal más clara */
.sx-hero::before{content:"";position:absolute;inset:-20% -10% auto -30%;height:130%;
  background:linear-gradient(101deg,rgba(255,255,255,.045) 0 42%,transparent 42.4%);
  pointer-events:none}
.sx-hero>*{position:relative}

/* ── la ruta, dentro del héroe ─────────────────────────────────────── */
.sx-ruta{margin:clamp(2.5rem,5vw,4rem) 0 0;display:grid;gap:.9rem;
  text-align:left;background:#fff;border-radius:var(--r30) var(--r30) 0 0;
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 -18px 50px -28px rgba(0,0,0,.5)}
@media (min-width:820px){
  .sx-ruta{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:stretch}
}
.sx-ruta__p{background:var(--sx-tinte);border-radius:var(--r10);
  padding:1.3rem 1.4rem;display:grid;gap:.9rem;align-content:start}
.sx-ruta__n{display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:50%;background:var(--sx-verde);color:#04241A;font-weight:700;
  font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-size:.9375rem}
/* Estas dos van acotadas al `div` de dentro, no a `.sx-ruta__p` a secas: el
   numeral también es un `span` hijo de la parada, y con el selector suelto
   le ganaba en especificidad —0,1,1 contra 0,1,0— y lo devolvía a
   `display:block`. El disco perdía su centrado y el dígito se salía por la
   esquina. */
.sx-ruta__p>div b{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  font-size:1.0625rem;color:var(--sx-tinta);display:block}
.sx-ruta__p>div span{font-size:.9375rem;color:var(--sx-tx);display:block;margin-top:.3rem}

/* ── zona a dos columnas ───────────────────────────────────────────── */
.sx-sec{padding:clamp(3rem,6vw,5.5rem) 0}
.sx-dos{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){
  .sx-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sx-dos--fig-izq .sx-dos__fig{order:-1}
}
.sx-dos .sx-lead{margin-top:1.2rem}

/* la lista con palomas mint, tal cual la referencia */
.sx-lista{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.9rem}
.sx-lista li{display:flex;align-items:flex-start;gap:.8rem;
  font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;font-size:1rem;
  color:var(--sx-tinta);line-height:1.35}
.sx-lista i{display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;
  border-radius:50%;background:var(--sx-verde);color:#04241A;margin-top:.05rem}
.sx-lista i svg{width:.8rem;height:.8rem}
.sx-dos__acc{margin-top:2.2rem}

/* ── la tarjeta oscura con su bloque mint detrás ───────────────────── */
.sx-fig{position:relative}
.sx-fig__c{position:relative;z-index:1;background:var(--sx-panel);
  border-radius:var(--r30);padding:clamp(1.2rem,2.4vw,1.8rem);
  display:grid;gap:1rem}
/* el bloque desplazado: es el gesto que más identifica a la referencia */
.sx-fig::after{content:"";position:absolute;z-index:0;
  right:-1.1rem;bottom:-1.1rem;width:min(72%,22rem);height:62%;
  border-radius:var(--r30);background:var(--sx-verde)}
@media (max-width:899px){.sx-fig::after{right:-.6rem;bottom:-.6rem}}

/* las piezas de dentro de la tarjeta: fragmentos de panel, blancos */
.sx-mini{background:#fff;border-radius:var(--r10);padding:1.1rem 1.2rem}
.sx-mini__k{font-size:.8125rem;color:var(--sx-tx);margin:0}
.sx-mini__v{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  font-size:1.6rem;color:var(--sx-tinta);margin:.35rem 0 0;line-height:1;
  font-variant-numeric:tabular-nums}
.sx-mini__r{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--sx-linea);
  font-size:.875rem;color:var(--sx-tx)}
.sx-mini__r:last-child{border-bottom:0}
.sx-mini__r b{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  color:var(--sx-tinta);font-variant-numeric:tabular-nums}
.sx-mini--verde{background:var(--sx-verde);color:#04241A}
.sx-mini--verde .sx-mini__k{color:#04241A;opacity:.75}
.sx-mini--verde .sx-mini__v{color:#04241A}
.sx-fig__pie{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.72);
  font-size:.875rem;padding:0 .3rem}
.sx-fig__pie i{display:grid;place-items:center;width:1.6rem;height:1.6rem;flex:none;
  border-radius:50%;background:var(--sx-verde);color:#04241A}
.sx-fig__pie i svg{width:.85rem;height:.85rem}

/* ── el panel teñido con su tira de pastillas ──────────────────────── */
.sx-tinte{background:var(--sx-tinte);border-radius:var(--r30);
  padding:clamp(2.5rem,5vw,4rem) 0;overflow:hidden}
.sx-tinte__cab{padding-inline:clamp(1.5rem,4vw,3.5rem);display:grid;
  gap:1.5rem;align-items:end}
@media (min-width:900px){
  .sx-tinte__cab{grid-template-columns:minmax(0,1fr) auto}
}
.sx-tira{margin-top:clamp(2rem,4vw,3rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sx-tira__p{display:flex;width:max-content;gap:1.1rem;animation:sx-rueda 38s linear infinite}
.sx-tira:hover .sx-tira__p{animation-play-state:paused}
@keyframes sx-rueda{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sx-tira__t{display:flex;gap:1.1rem}
.sx-chip{display:inline-flex;align-items:center;gap:.8rem;background:#fff;
  border-radius:var(--r80);padding:.7rem 1.6rem .7rem .7rem;white-space:nowrap;
  font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;font-size:1rem;
  color:var(--sx-tinta);box-shadow:var(--sx-sombra)}
.sx-chip i{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;
  border-radius:50%;background:var(--sx-tinte);color:var(--sx-tinta)}
.sx-chip i svg{width:1.2rem;height:1.2rem}
@media (prefers-reduced-motion:reduce){.sx-tira__p{animation:none}}

/* ── el cierre oscuro ──────────────────────────────────────────────── */
.sx-cierre{border-radius:var(--r30);background:
    linear-gradient(118deg,rgba(31,226,144,.14) 0%,rgba(31,226,144,0) 48%),
    linear-gradient(160deg,#052324 0%,#0A3C33 60%,#0B483A 100%);
  color:#fff;text-align:center;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3rem);
  display:grid;gap:1.6rem;justify-items:center}
.sx-cierre .sx-h2{color:#fff;max-width:20ch}
.sx-cierre .sx-lead{color:rgba(255,255,255,.8);text-align:center}

/* ══ EL RIEL ═══════════════════════════════════════════════════════════
   Se conserva lateral —es la forma de esta casa— y se traduce al sistema:
   la barra oscura de la referencia, puesta de pie. Por debajo de 1.000 px
   el tema ya la devuelve a una fila; ahí sólo cambian los colores. */
body.sx .bk-barra{background:var(--sx-oscuro);border-color:transparent;
  border-right:1px solid rgba(255,255,255,.08);border-bottom:0}
body.sx .bk-barra .bk-logo,body.sx .bk-barra a{color:#fff}
body.sx .bk-barra .bk-marca{filter:brightness(0) invert(1)}
body.sx .bk-nav a{color:rgba(255,255,255,.78);border-radius:var(--r80);
  font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;font-size:.9375rem}
body.sx .bk-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
body.sx .bk-nav a.is-aqui,body.sx .bk-nav a[aria-current]{
  color:#04241A;background:var(--sx-verde)}
body.sx .bk-idioma{color:rgba(255,255,255,.5);font-size:.8125rem}
body.sx .bk-idioma a{color:rgba(255,255,255,.5)}
body.sx .bk-idioma a[aria-current]{color:#fff;font-weight:600}
body.sx .bk-barra .bk-b--verde{background:var(--sx-verde);border-color:var(--sx-verde);
  color:#04241A;border-radius:var(--r80);font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-weight:600}
body.sx .bk-barra .bk-b--verde:hover{background:var(--sx-verde-2);border-color:var(--sx-verde-2)}
body.sx .bk-barra .bk-b--linea{border-radius:var(--r80);color:#fff;
  border-color:rgba(255,255,255,.28)}
body.sx .bk-menu{color:#fff}

/* ══ Las marcas de pago ════════════════════════════════════════════════
   Sólo Visa y Mastercard: es lo que la casa acepta. Antes salían las
   cuatro en pastillas de texto —con American Express y SPEI, que no se
   aceptan—. Los trazados son los fieles, con cada `viewBox` recortado a su
   dibujo, así que aquí se fija SÓLO el alto.

   La razón entre las dos es **0,828**, no 0,89: con la Mastercard EN COLOR
   la caja pasa a 48 x 30 y la cobertura baja del 80,2 al 68,7 %, así que
   por unidad de alto lleva menos tinta. Medido contando píxeles opacos.

   `min-height:0` y `min-width:0` no sobran: Bricks publica
   `svg:not([height]){min-height:1em}` y estos dos no llevan ese atributo. */
.bk-pay{display:inline-flex;align-items:center;gap:1rem}
.bk-pay__v,.bk-pay__m{width:auto;min-width:0;min-height:0;flex:none;display:block}
.bk-pay__v{height:18px}
.bk-pay--color .bk-pay__m{height:21.7px}
body.sx .bk-pagos{display:none}
/* Las marcas quedaban PEGADAS a la entradilla: `app.css` daba el aire con
   `.bk-pagos{margin-top:var(--e6)}` y esa lista está oculta; la pieza nueva
   nacía sin margen. Medido, el hueco era 0 px contra los 14,4 que separan
   el logotipo de su entradilla. Va en 20: son otra clase de cosa, no la
   continuación de la frase. */
body.sx .bk-pie .bk-pay{margin-top:1.25rem}

/* ══ El pie, en el sistema ═════════════════════════════════════════════ */
body.sx .bk-pie{background:#fff;border-top:1px solid var(--sx-linea);
  font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;margin-top:0}
body.sx .bk-pie__col h2,body.sx .bk-pie__col h3{font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-size:.8125rem;font-weight:600;color:var(--sx-tx);letter-spacing:.02em}
body.sx .bk-pie__col a,body.sx .bk-pie__d{color:var(--sx-tx);font-size:.9375rem}
body.sx .bk-pie__col a:hover{color:var(--sx-tinta)}
body.sx .bk-pie .bk-logo{color:var(--sx-tinta)}
body.sx .bk-pie__cierre{color:var(--sx-tx);border-top-color:var(--sx-linea);font-size:.8125rem}

/* El hueco entre el cierre y el pie eran ~300 px: la sección aporta su
   relleno inferior y el pie su margen superior. Sólo lo paga uno. */
body.sx main{padding-bottom:0}
body.sx main>.sx-w:last-child .sx-sec{padding-bottom:clamp(2.5rem,5vw,4.5rem)}

/* ⚠ El verde de la referencia es de FONDO, no de tinta. #1FE290 sobre
   blanco mide **1,70:1** y el rótulo de zona va a 16 px: pide 4,5. La
   referencia se lo permite —es una demo—; una casa de remesas no.

   Sobre claro el rótulo va en el verde de la propia casa, #1D6B4A, que da
   **6,47:1**. El mint se queda para lo que es: fondos, discos, palomas y el
   rótulo sobre el panel oscuro, donde mide 9,70. */
.sx-rotulo{color:#1D6B4A}
.sx-hero .sx-rotulo,.sx-cierre .sx-rotulo{color:var(--sx-verde)}

/* ── la maqueta del pie ───────────────────────────────────────────────
   Venía en UNA columna: `.bk-pie__in` declara `grid-template-columns:
   minmax(0,1fr)` y no hay regla que lo abra en ancho. Encima
   `.bk-pie__col` es un `flex` con `wrap` y el rótulo —un `<h2>`— no toma
   el ancho entero, así que quedaba en línea con el primer enlace y los
   demás caían uno por renglón. Los tres arreglos van juntos porque el
   defecto es uno: la columna nunca se abrió.

   La medida se iguala a la de la portada. `.bk-ancho` da 1.100 y `.sx-w`
   1.108 con el riel descontado: ocho píxeles de desalineación entre el
   borde del héroe y el del pie, que se ven porque están uno encima del
   otro. */
body.sx .bk-pie__in,body.sx .bk-pie__cierre{
  width:min(var(--sx-w),100% - var(--gut)*2)}
body.sx .bk-pie__col{display:block}
body.sx .bk-pie__col li{margin-bottom:.2rem}
/* Los enlaces medían 152 x 19 px: por debajo de los 24 de alto que pide un
   objetivo táctil. Es un defecto anterior al porte. */
body.sx .bk-pie__col a{display:inline-block;padding-block:.3rem;line-height:1.35}
@media (min-width:760px){
  body.sx .bk-pie__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem);align-items:start;justify-items:start;text-align:left}
  body.sx .bk-pie__marca{width:100%}
  body.sx .bk-pie__d{margin-inline:0}
}

/* La cara del logotipo NO cambia: el wordmark sigue en Funnel Display, que
   es la marca de la casa. Cuesta 17 kB y es lo único que la usa en esta
   página; cambiarla sería cambiar el logotipo, no la maqueta. */

/* ══ LAS INTERIORES ════════════════════════════════════════════════════
   Mismo sistema que la portada. La única diferencia deliberada es la
   escala: el masthead de una interior es más bajo y su titular más chico,
   para que no compita con el de la portada. */
.sx-mast{border-radius:var(--r30);margin-top:clamp(1rem,2vw,1.75rem);
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem);
  background:
    linear-gradient(118deg,rgba(31,226,144,.14) 0%,rgba(31,226,144,0) 48%),
    linear-gradient(160deg,#052324 0%,#0A3C33 58%,#0B483A 100%);
  color:#fff;text-align:center;position:relative;overflow:hidden}
.sx-mast::before{content:"";position:absolute;inset:-20% -10% auto -30%;height:140%;
  background:linear-gradient(101deg,rgba(255,255,255,.045) 0 42%,transparent 42.4%);
  pointer-events:none}
.sx-mast>*{position:relative}
.sx-mast .sx-h1{color:#fff;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);
  max-width:22ch;margin-inline:auto}
.sx-mast .sx-lead{color:rgba(255,255,255,.82);margin:1.3rem auto 0;max-width:62ch}
.sx-mast .sx-rotulo{color:var(--sx-verde)}
.sx-mast__acc{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}

/* el bloque de prosa de una interior */
.sx-bloque{max-width:62ch}
.sx-bloque .sx-lead{margin-top:1.2rem}

/* la rejilla de tarjetas claras */
.sx-rej{display:grid;gap:1.1rem;margin-top:clamp(2rem,4vw,3rem);list-style:none;padding:0}
@media (min-width:700px){.sx-rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.sx-rej--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sx-card{background:var(--sx-tinte);border-radius:var(--r30);
  padding:clamp(1.5rem,2.6vw,2rem);margin:0;display:grid;gap:.9rem;align-content:start}
.sx-card h3{margin:0;font-size:1.1875rem;line-height:1.2}
.sx-card p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--sx-tx)}
.sx-card__d{display:grid;place-items:center;width:2.8rem;height:2.8rem;flex:none;
  border-radius:50%;background:var(--sx-verde);color:#04241A;
  font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:700;font-size:1rem}
.sx-card__d svg{width:1.3rem;height:1.3rem}

/* el aviso */
.sx-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;
  align-items:start;background:var(--sx-tinte);border-radius:var(--r30);
  padding:clamp(1.5rem,2.6vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.sx-aviso h3{margin:0 0 .5rem;font-size:1.125rem}
.sx-aviso p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--sx-tx)}
.sx-aviso__d{display:grid;place-items:center;width:2.8rem;height:2.8rem;
  border-radius:50%;background:var(--sx-oscuro);color:var(--sx-verde)}
.sx-aviso__d svg{width:1.3rem;height:1.3rem}

/* la prosa de las legales */
.sx-prosa{max-width:68ch}
.sx-prosa h2{font-size:1.5rem;margin:2.4rem 0 .8rem}
.sx-prosa h3{font-size:1.1875rem;margin:1.8rem 0 .6rem}
.sx-prosa p,.sx-prosa li{font-size:1rem;line-height:1.65;color:var(--sx-tx)}
.sx-prosa p{margin:0 0 1rem}
.sx-prosa ul,.sx-prosa ol{margin:0 0 1.2rem;padding-left:1.3rem;display:grid;gap:.5rem}
.sx-prosa a{color:var(--sx-tinta);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:var(--sx-linea)}
.sx-prosa a:hover{text-decoration-color:currentColor}
.sx-fecha{font-size:.875rem;color:var(--sx-tx);margin:0 0 2rem}

/* ══ LAS PANTALLAS DE CUENTA Y EL PANEL ════════════════════════════════
   Acceso, alta, recuperar, clave nueva, mis remesas, confirmar y
   autorizaciones. 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. */
body.sx.bk-auth,body.sx.bk-app{background:#fff}
body.sx .bk-acceso{padding:clamp(2rem,5vw,4rem) var(--gut) clamp(3rem,6vw,5rem)}
/* ⚠ `app.css` desarma la tarjeta de acceso por encima de su corte:
   `.bk-acceso__caja:not(.bk-acceso__caja--ancha)` la deja en
   `background:transparent;border:0;padding:0;border-radius:0` —un formulario
   suelto sobre el fondo—. Esa regla lleva tres clases y le ganaba a la mía
   de dos: la tarjeta salía sin relleno lateral y los campos iban de canto a
   canto. Se iguala la especificidad y el relleno lo pagan los HIJOS, para
   que la franja de rótulo siga yendo a sangre. */
body.sx .bk-acceso .bk-acceso__caja:not(.bk-acceso__caja--ancha),
body.sx .bk-acceso .bk-acceso__caja--ancha{
  background:#fff;border:1px solid var(--sx-linea);border-radius:var(--r30);
  box-shadow:var(--sx-sombra);overflow:hidden;padding:0;margin-inline:auto}
body.sx .bk-acceso .bk-acceso__caja:not(.bk-acceso__caja--ancha){max-width:34rem}
body.sx .bk-acceso .bk-acceso__caja--ancha{max-width:48rem}
body.sx .bk-acceso__caja>*{padding-inline:clamp(1.5rem,4vw,2.4rem)}
body.sx .bk-acceso__caja>form{padding-bottom:1.6rem}

/* la franja de rótulo, en el verde profundo del sistema */
body.sx .bk-acceso .bk-marca-agua{background:var(--sx-oscuro);color:#fff;
  margin-top:0;
  font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;font-weight:600;
  font-size:.8125rem;letter-spacing:.02em;text-transform:none;padding-block:1rem;
  margin:0;display:flex;align-items:center;gap:.6rem}
body.sx .bk-acceso .bk-marca-agua::before{background:var(--sx-verde);width:20px;
  height:2px;content:"";flex:none}
body.sx .bk-acceso .bk-marca-agua::after{content:none}

body.sx .bk-acceso h1{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem);line-height:1.12;
  color:var(--sx-tinta);margin-top:1.6rem}
body.sx .bk-acceso__d{color:var(--sx-tx);font-size:.9375rem;margin:.7rem 0 1.6rem}

/* controles */
body.sx .bk-acceso input[type=email],body.sx .bk-acceso input[type=password],
body.sx .bk-acceso input[type=text],body.sx .bk-acceso input[type=tel],
body.sx .bk-acceso select,body.sx .bk-acceso textarea,
body.sx .bk-campo input,body.sx .bk-campo select,body.sx .bk-campo textarea{
  font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;font-size:.9375rem;
  color:var(--sx-tinta);background:#fff;border:1px solid var(--sx-linea);
  border-radius:var(--r10);padding:.85rem .95rem;box-shadow:none}
body.sx .bk-acceso input:focus,body.sx .bk-acceso select:focus,
body.sx .bk-acceso textarea:focus,body.sx .bk-campo :focus-visible{
  outline:2px solid var(--sx-verde);outline-offset:1px;
  border-color:var(--sx-verde);box-shadow:none}
body.sx .bk-campo span,body.sx .bk-casilla span{font-size:.875rem;color:var(--sx-tx)}

/* botones */
body.sx.bk-auth .bk-b--verde,body.sx.bk-app .bk-b--verde,
body.sx.bk-auth .bk-b--sobre,body.sx.bk-app .bk-b--sobre{
  background:var(--sx-verde);border-color:var(--sx-verde);color:#04241A;
  border-radius:var(--r80);font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-weight:600;box-shadow:none}
body.sx.bk-auth .bk-b--verde:hover,body.sx.bk-app .bk-b--verde:hover{
  background:var(--sx-verde-2);border-color:var(--sx-verde-2)}
body.sx.bk-auth .bk-b--linea,body.sx.bk-app .bk-b--linea{border-radius:var(--r80);
  border-color:var(--sx-linea);color:var(--sx-tinta);background:#fff;box-shadow:none}
body.sx.bk-app .bk-b--alto{background:#B42318;border-color:#B42318;border-radius:var(--r80)}

/* el pie de enlaces de la tarjeta */
body.sx .bk-acceso .bk-acceso__caja .bk-acceso__pie,
body.sx .bk-acceso .bk-acceso__caja--ancha .bk-acceso__pie{
  background:var(--sx-tinte);border-top:1px solid var(--sx-linea);
  padding-block:1.1rem;margin-top:1.8rem;font-size:.875rem;color:var(--sx-tx)}
body.sx .bk-acceso__pie a{color:var(--sx-tinta);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-color:var(--sx-linea)}

/* el alta: sólo color y cara, la maqueta del grupo no se toca —el numeral
   va en absoluto contra el relleno del fieldset y el `<legend>` se pinta
   montado sobre su borde— */
body.sx .bk-acceso legend{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  font-size:1rem;color:var(--sx-tinta)}
body.sx .bk-grupo__n{color:#0E7A4E;font-weight:700}
body.sx .bk-grupo{border-top-color:var(--sx-linea)}
body.sx .bk-grupo__d{font-size:.875rem;color:var(--sx-tx)}
body.sx .bk-ranura{border-color:var(--sx-linea);border-radius:var(--r10);background:#fff}
body.sx .bk-ranura__k{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  color:var(--sx-tinta)}

/* ── el panel ─────────────────────────────────────────────────────────── */
body.sx .bk-app__cab h1{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);color:var(--sx-tinta)}
body.sx .bk-app__cab .bk-marca-agua{font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-weight:600;font-size:.8125rem;letter-spacing:.02em;text-transform:none;
  color:var(--sx-tx);background:none;padding:0}
body.sx .bk-app__cab .bk-marca-agua::before{background:#0E7A4E;width:20px;height:2px}
body.sx .bk-app__estado,body.sx .bk-app__d{color:var(--sx-tx);font-size:.9375rem}

body.sx .bk-cuenta{background:#fff;border:1px solid var(--sx-linea);
  border-radius:var(--r30);box-shadow:var(--sx-sombra);overflow:hidden}
body.sx .bk-cuenta__cab{background:var(--sx-oscuro);color:#fff;padding:1.1rem 1.4rem;
  align-items:center}
body.sx .bk-cuenta__cab b{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  font-size:.9375rem;color:#fff}
body.sx .bk-cuenta__cab span{font-size:.75rem;letter-spacing:.06em;color:var(--sx-verde);
  text-transform:uppercase;opacity:1}
body.sx .bk-cuenta__cuerpo{padding:1.5rem 1.4rem}
body.sx .bk-cuenta__r{border-bottom-color:var(--sx-linea);padding-block:.8rem}
body.sx .bk-cuenta__r dt{font-size:.8125rem;color:var(--sx-tx)}
body.sx .bk-cuenta__r dd{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  color:var(--sx-tinta);font-variant-numeric:tabular-nums}
body.sx .bk-cuenta__r--fuerte{background:var(--sx-tinte)}
body.sx .bk-cuenta__r--fuerte dd{color:#0E7A4E}

body.sx .bk-monto{border:1px solid var(--sx-linea);border-radius:var(--r10);
  background:#fff;overflow:hidden}
body.sx .bk-monto__m{background:var(--sx-tinte);color:var(--sx-tx);font-weight:600;
  border-right:1px solid var(--sx-linea)}
body.sx .bk-monto input{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;color:var(--sx-tinta)}
body.sx .bk-monto:focus-within{outline:2px solid var(--sx-verde);outline-offset:1px;
  border-color:var(--sx-verde)}
body.sx .bk-rapidos .bk-b{border-radius:var(--r80);border-color:var(--sx-linea);
  background:#fff;color:var(--sx-tinta);box-shadow:none;font-weight:600}
body.sx .bk-rapidos .bk-b:hover{border-color:var(--sx-oscuro);background:var(--sx-tinte)}

body.sx .bk-tabla th{font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  color:var(--sx-tx);font-size:.75rem;text-transform:none;font-weight:600;
  border-bottom-color:var(--sx-linea)}
body.sx .bk-tabla td{border-bottom-color:var(--sx-linea);color:var(--sx-tx)}
body.sx .bk-chip{border-radius:var(--r80);font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  font-weight:600;font-size:.75rem;padding:.25rem .7rem}
body.sx .bk-vacio,body.sx .bk-vacio__d,body.sx .bk-pista{color:var(--sx-tx)}
body.sx .bk-nota{border-radius:var(--r10);border-color:var(--sx-linea);font-size:.875rem}
body.sx .bk-aviso-caja{background:#fff;border:1px solid var(--sx-linea);
  border-radius:var(--r30);box-shadow:var(--sx-sombra)}
body.sx .bk-aviso-caja h2{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  color:var(--sx-tinta)}
body.sx .bk-pestana{border-radius:var(--r80);font-weight:600;font-size:.875rem;
  border-color:var(--sx-linea);color:var(--sx-tx);background:#fff}
body.sx .bk-pestana[aria-current],body.sx .bk-pestana.is-activa{
  background:var(--sx-oscuro);border-color:var(--sx-oscuro);color:#fff}
body.sx .bk-dlg{border-radius:var(--r30);border:1px solid var(--sx-linea);background:#fff}
body.sx .bk-dlg__d{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  color:var(--sx-tinta)}
body.sx .bk-velo{background:rgba(5,35,36,.55)}
body.sx .bk-escritorio{margin-inline:auto}

/* El riel de pasos del alta: el disco mide 2.2rem y el `<legend>` sólo 1.2,
   así que el numeral asomaba 16 px por debajo del rótulo y la primera
   etiqueta arrancaba a 0 px de él. El rótulo se iguala al alto del disco
   —ya es `flex` centrado, así que el texto queda a su eje— y se le pone
   aire propio: el grupo no siempre trae descripción, que era quien lo daba. */
body.sx .bk-acceso__caja--ancha .bk-grupo legend{min-height:2.2rem;
  margin-bottom:.9rem}
body.sx .bk-acceso__caja--ancha .bk-grupo__n{border-color:#0E7A4E;
  background:var(--sx-tinte);color:#0E7A4E}
body.sx .bk-acceso__caja--ancha .bk-grupo::before{background:var(--sx-linea)}
body.sx .bk-acceso__caja--ancha .bk-grupo__d{margin-top:-.4rem}

/* ── el panel: lo que aún venía en el papel crema de la casa ──────────
   Estas superficies no llevan clase `sx-`: son de `app.css` y heredaban
   `--papel-3` y `--filete`, los dos cálidos. Quedaban tres islas beige
   sobre blanco. Se pasan al blanco, al teñido y al filete del sistema. */
body.sx .bk-cambio__c{background:#fff;border-color:var(--sx-linea);
  border-radius:var(--r30);box-shadow:var(--sx-sombra)}
body.sx .bk-cambio dt{color:var(--sx-tx);letter-spacing:.08em}
body.sx .bk-cambio dd{font-family:"Montserrat BK","Montserrat Reserva",system-ui,sans-serif;font-weight:600;
  color:var(--sx-tinta)}
body.sx .bk-cambio dd small{color:var(--sx-tx)}
body.sx .bk-asiento-chico{background:#fff;border-color:var(--sx-linea);
  border-radius:var(--r10)}
body.sx .bk-cuenta__pie{background:var(--sx-tinte);border-top-color:var(--sx-linea);
  color:var(--sx-tx)}
body.sx .bk-sec{border-top-color:var(--sx-linea)}

/* las tres notas de estado conservan su tono —dicen algo— pero salen del
   crema de la casa y entran en la familia fría del sistema */
body.sx .bk-nota--ok{background:#ECFBF3;border-color:#8FE3BC}
body.sx .bk-nota--wait{background:#FFF8E8;border-color:#EFCE8A}
body.sx .bk-nota--bad{background:#FEF3F2;border-color:#F3B5AE}
body.sx .bk-nota{color:var(--sx-tinta)}

/* la medida del panel y la del pie tienen que ser LA MISMA: el escritorio
   iba a 1.100 planos y el pie a `min(1.180, 100% − 2·gut)`, que a 1.440 da
   1.108. Ocho píxeles de diferencia, cuatro por lado, y las tarjetas no
   casaban con el pie de abajo. */
body.sx .bk-app__cab,body.sx .bk-escritorio,body.sx .bk-app .bk-ancho{
  width:min(var(--sx-w),100% - var(--gut)*2);max-width:none;margin-inline:auto}

/* ── los tokens de la casa, reapuntados ───────────────────────────────
   Ir clase por clase dejaba islas: `app.css` tiene superficies que no
   salen en ninguna pantalla que yo capture. El papel, el filete y las
   tres tintas son SEIS variables; reapuntarlas bajo `body.sx` barre todo
   lo cálido de una vez, incluido lo que no he visto. Los contrastes se
   midieron uno a uno y ninguno baja del actual:
     tinta   #1A140E 18,26 → #01103D 18,38
     tinta-2 #4A3F31 10,26 → #3A4151 10,22
     apoyo   #6E6252  5,95 → #5F6168  6,18
     filete-2 #94856E 3,60 → #7E8699  3,65  (borde de control, pide 3:1)
   `--verde` NO se toca: es el #1D6B4A de los anillos y los numerales, y
   la menta de la referencia da 1,70:1 sobre blanco. La menta llena, no
   dibuja. */
body.sx{
  --fd:"Funnel BK","Funnel Reserva",system-ui,sans-serif;
  --fs:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;
  --papel:#fff;
  --papel-2:var(--sx-tinte);
  --papel-3:#fff;
  --filete:var(--sx-linea);
  --filete-2:#7E8699;
  --tinta:var(--sx-tinta);
  --tinta-2:#3A4151;
  --apoyo:var(--sx-tx);
  --ok-2:#ECFBF3; --pausa:#8A5A00; --pausa-2:#FFF8E8; --alto-2:#FEF3F2;
}

/* el anillo de foco iba en menta: 1,70:1 sobre blanco, por debajo del 3:1
   que pide un indicador de foco. Pasa al verde profundo. */
body.sx .bk-acceso input:focus,body.sx .bk-acceso select:focus,
body.sx .bk-acceso textarea:focus,body.sx .bk-campo :focus-visible,
body.sx .bk-monto:focus-within{outline-color:#0E7A4E;border-color:#0E7A4E}
body.sx :focus-visible{outline-color:#0E7A4E}

/* La pestaña en curso lleva `is-on`, no `is-activa` ni `aria-current`: mi
   regla no mordía y, al empatar en especificidad con la de `app.css` y ir
   después, le quitaba el verde sin poner nada. La vista en curso quedaba
   igual que las otras cuatro. */
body.sx .bk-pestanas button.is-on{background:var(--sx-oscuro);
  border-color:var(--sx-oscuro);color:#fff}
body.sx .bk-pestanas button.is-on b{color:var(--sx-verde);opacity:1}
body.sx .bk-pestanas button b{color:var(--sx-tx)}

/* el rótulo del panel lleva el mismo filete de menta que el de la tarjeta
   de acceso y el de las interiores */
body.sx .bk-app__cab .bk-marca-agua{display:flex;align-items:center;gap:.6rem}
body.sx .bk-app__cab .bk-marca-agua::before{content:"";flex:none}

/* ── el formulario de «Cuéntanos» ──────────────────────────────────────
   Ficha blanca a la derecha del argumento, con la rejilla de dos y el
   mensaje a lo ancho. Los radios y el filete son los del sistema. */
.sx-dos--forma{align-items:start}
.sx-forma{background:#fff;border:1px solid var(--sx-linea);border-radius:var(--r30);
  box-shadow:var(--sx-sombra);padding:clamp(1.6rem,3vw,2.4rem)}
.sx-forma form{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.sx-forma form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sx-campo--ancho{grid-column:1/-1}
.sx-campo{display:grid;gap:.45rem;min-width:0}
.sx-campo span{font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;font-size:.875rem;
  font-weight:500;color:var(--sx-tinta)}
.sx-campo input,.sx-campo select,.sx-campo textarea{
  font-family:"Jakarta BK","Jakarta Reserva",system-ui,sans-serif;font-size:.9375rem;width:100%;
  color:var(--sx-tinta);background:#fff;border:1px solid var(--sx-linea);
  border-radius:var(--r10);padding:.85rem .95rem;box-shadow:none}
.sx-campo textarea{resize:vertical;min-height:7rem;line-height:1.5}
.sx-campo :focus-visible{outline:2px solid #0E7A4E;outline-offset:1px;border-color:#0E7A4E}
.sx-forma .bk-trampa{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0}
.sx-forma .bk-nota{margin-bottom:1.4rem;border-radius:var(--r10)}
.sx-forma .sx-btn{width:100%}
@media (min-width:560px){.sx-forma .sx-btn{width:auto}}

/* ── el alto de los controles, fijado ─────────────────────────────────
   Dos reglas ajenas se sumaban: `main select` de la casa fuerza
   `height:48px` con `box-sizing:border-box`, y la hoja de Bricks pone
   `line-height:40px` en todo input y select. Con mi relleno de 13,6 arriba
   y abajo el contenido pedía 67,2 px dentro de 48 y la opción se cortaba
   por abajo. El alto se declara aquí y el relleno vertical se va: ni una
   ni otra pueden volver a cortar el texto. */
.sx-campo input,.sx-campo select,
body.sx .bk-acceso input[type=email],body.sx .bk-acceso input[type=password],
body.sx .bk-acceso input[type=text],body.sx .bk-acceso input[type=tel],
body.sx .bk-acceso input[type=date],body.sx .bk-acceso select,
body.sx .bk-campo input,body.sx .bk-campo select{
  height:3rem;min-height:3rem;padding-block:0;line-height:normal}
.sx-campo textarea,body.sx .bk-acceso textarea,body.sx .bk-campo textarea{
  height:auto;min-height:7rem;line-height:1.5;padding-block:.85rem}

/* la casilla iba a 13 px al lado de controles de 48: se sube y toma el
   verde del sistema. El objetivo de pulsación es la etiqueta entera. */
body.sx input[type=checkbox],body.sx input[type=radio]{
  width:1.15rem;height:1.15rem;min-height:0;accent-color:#0E7A4E;flex:none}
body.sx .bk-casilla,body.sx .sx-casilla{align-items:center;gap:.7rem}

/* el párrafo del aviso corría los 1.180 de la medida: ~120 caracteres por
   línea. Se topa donde la prosa de las legales, en 68 */
.sx-aviso p{max-width:68ch}

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

   ── la medida, UNA sola vez ────────────────────────────────────────────
   La regla anterior ponía `min(1.180, 100% − 2·gut)` sobre `.bk-app__cab` y
   `.bk-escritorio`, que ya viven DENTRO de `.bk-ancho`. El canalón se
   cobraba dos veces: el rótulo y las tarjetas del escritorio entraban 40 px
   más que las pastillas de arriba a 390, y 80 px a 1.440. Se le pone al
   contenedor, que es de quien es, y todo lo de dentro la hereda. */
body.sx .bk-ancho{width:min(var(--sx-w),100% - var(--gut)*2);max-width:none;
  margin-inline:auto}
body.sx .bk-app__cab,body.sx .bk-escritorio{width:auto;max-width:none;margin-inline:0}

/* ── el valor no parte ──────────────────────────────────────────────────
   «$1 USD» caía en dos líneas y el rótulo de al lado en otras dos: los dos
   lados de la fila encogían a la vez. El valor lleva `nowrap` —es una
   cifra— y el rótulo suelo cero para que ceda él. */
body.sx .bk-cuenta__r dd,body.sx .bk-cambio dd{white-space:nowrap}
body.sx .bk-cuenta__r dt,body.sx .bk-cambio dt{min-width:0}
body.sx .bk-cuenta__r{gap:1rem}

/* ── la pista y su contador ─────────────────────────────────────────────
   En fila, la pista se partía en cuatro líneas contra un «0 caracteres»
   pegado a la derecha. Por debajo de 560 se apilan. */
@media (max-width:559px){
  body.sx .bk-pista{flex-direction:column;align-items:flex-start;gap:.35rem}
}

/* ── las tres pastillas del asiento ─────────────────────────────────────
   Apiladas ocupaban 366 px antes de la primera decisión. Por debajo de 560
   el rótulo y la cifra comparten línea: 366 → 174. */
@media (max-width:559px){
  body.sx .bk-cambio__c{display:flex;align-items:baseline;justify-content:space-between;
    gap:1rem;padding:.9rem 1.1rem}
  body.sx .bk-cambio__c dd{margin-top:0}
  body.sx .bk-cambio{gap:.6rem}
}

/* ══ EL RIEL, DE COSTADO ════════════════════════════════════════════════
   Por encima de 1.000 la navegación es la columna fija de la izquierda y
   nada de esto aplica. Por debajo, el mismo riel entra desde el costado en
   vez de desaparecer. */
.sx-menu-b{display:none}
.bk-idioma--hoja{display:none}

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

  /* la hoja: el riel, con su fondo y su tinta */
  body.sx .bk-barra .bk-nav{display:flex;flex-direction:column;align-items:stretch;
    gap:.15rem;position:fixed;inset:0 auto 0 0;width:min(19rem,84vw);z-index:62;
    background:var(--sx-oscuro);color:#fff;overflow-y:auto;
    padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    transform:translateX(-101%);transition:transform .26s ease;
    box-shadow:0 0 60px rgba(1,16,61,.35);margin:0}
  body.sx.sx-menu .bk-barra .bk-nav{transform:none}
  body.sx .bk-barra .bk-nav a{color:rgba(255,255,255,.86);width:100%;
    padding:.85rem 1rem;border-radius:var(--r10);font-size:1rem;font-weight:500}
  body.sx .bk-barra .bk-nav a:hover,body.sx .bk-barra .bk-nav a.is-aqui{
    color:var(--sx-verde);background:rgba(31,226,144,.1)}
  /* el idioma, al pie de la hoja */
  body.sx .bk-barra .bk-idioma--hoja{display:flex;justify-content:center;gap:.4rem;
    margin:auto 0 0;padding-top:1.5rem;font-size:.875rem;color:rgba(255,255,255,.6)}
  body.sx .bk-barra .bk-idioma--hoja a{width:auto;padding:.35rem .6rem;color:inherit}
  body.sx .bk-barra .bk-idioma--hoja a[aria-current]{color:var(--sx-verde);font-weight:700;
    background:none}

  body.sx .sx-velo-m{position:fixed;inset:0;z-index:61;background:rgba(5,35,36,.5);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.sx.sx-menu{overflow:hidden}

  /* El botón entra entre la marca y la acción. `nowrap` aquí empujaba la
     acción fuera de la ventana —164 px de desborde a 320—: la barra sigue
     pudiendo partirse en dos renglones, que es lo que hace la casa, y la
     hoja lee su alto REAL de `--sx-barra` en vez de dar por hechos 70 px. */
  body.sx .bk-barra__in{gap:.75rem;row-gap:.5rem}
  body.sx .bk-barra__acc{flex:1 1 auto;justify-content:flex-end;margin-left:0}
}
@media (max-width:999.98px) and (prefers-reduced-motion:reduce){
  body.sx .bk-barra .bk-nav{transition:none}
}

/* La hoja tapaba la barra y con ella el propio botón de cerrar: quedaba
   Escape, el velo o elegir un destino, pero la equis no se podía tocar. La
   barra sube por encima y la hoja arranca por debajo de sus 70 px —el
   `min-height` que le fija `app.css`—. */
@media (max-width:999.98px){
  body.sx.sx-menu .bk-barra{z-index:64}
  body.sx.sx-menu .bk-barra .bk-logo{position:relative;z-index:70}
  body.sx .sx-menu-b{position:relative;z-index:70}  /* la hoja es hija de la
     barra: su 62 se compara DENTRO del contexto de la barra, no contra el 64 */
  body.sx .bk-barra .bk-nav{padding-top:calc(var(--sx-barra,70px) + 1rem)}
  /* el filete de la barra venía del claro: sobre el verde profundo es una
     raya blanca */
  body.sx .bk-barra{border-color:rgba(255,255,255,.12)}
}

/* ── la tabla del cumplimiento en un teléfono ────────────────────────────
   Seis 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 525 px de la tabla, donde no se lee. */
@media (max-width:999.98px){
  body.sx .bk-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.sx .bk-tabla td[colspan] > *{position:sticky;left:0;
    width:min(100%,calc(100vw - var(--gut)*2 - 2px))}
  body.sx .bk-tabla th,body.sx .bk-tabla td{padding-inline:.9rem}
}

/* ── por debajo de 380: el teléfono chico ────────────────────────────────
   A 320 la ficha deja 236 px por dentro y el aviso los repartía así: 48 de
   relleno, 18 de icono y 12 de hueco, con lo que al texto le quedaban 158
   y la advertencia caía en ocho renglones. Se aprieta el chaflán, no el
   texto. Y el rótulo de la tarjeta deja de pelearse con su estado. */
@media (max-width:379.98px){
  body.sx .bk-cuenta__cuerpo{padding-inline:1rem}
  body.sx .bk-cuenta__cab{flex-direction:column;align-items:flex-start;gap:.3rem;
    padding-inline:1rem}
  body.sx .bk-nota{padding:.9rem 1rem;gap:.65rem}
  body.sx .bk-asiento-chico .bk-cuenta__r{padding-inline:.9rem}
  body.sx .bk-cuenta__pie{padding-inline:1rem}
}