/* ══════════════════════════════════════════════════════════════════════
   ALLOYSTONE — el sistema de `brighthub.casethemes.net/fintech-saas/`
   ══════════════════════════════════════════════════════════════════════
   Va DESPUÉS de `app.css` y sólo gobierna clases `fx-` y la clase `fx` 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 —los colores
   muestreados del render, no leídos del CSS—:

     cara ........... Inter; el peso que manda es 500, titulares en 600
     titular ........ 64 px · interlínea 70,4 · tracking −3,2 (−0,05 em)
     botón .......... alto 58 · PÍLDORA · negro con tinta blanca
     barra .......... píldora NEGRA flotando, no una banda pegada al borde
     héroe .......... degradado vertical #FCFFF3 → #EAFFAF
     tarjetas ....... blancas, radio 20, sobre gris #F5F5F5
     destacada ...... lima #EAFFAE
     medida ......... 1.320 px

   Lo único que NO se copia es el verde: el de la referencia (#5D9F11) da
   3,26 sobre blanco y no puede llevar texto. La lima se queda para los
   RELLENOS y el texto verde va en el olivo de esta casa, #4E5918, que da
   7,59 sobre blanco y 7,02 sobre la lima. Así el sistema es el de la
   referencia y el tono sigue siendo el de alloystone.

   Contrastes medidos: negro/blanco 21 · negro/lima 19,42 · #181D27/gris
   15,49 · #535862/blanco 7,14 · olivo/blanco 7,59 · blanco/negro 21.
   ══════════════════════════════════════════════════════════════════════ */

/* ── la cara, 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 AS";
  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—. */
@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{
  --fx-negro:#000000;
  --fx-tinta:#181D27;
  --fx-tx:#535862;
  --fx-gris:#A4A7AE;      /* filete y adorno: NUNCA texto (2,41) */
  --fx-papel:#FFFFFF;
  --fx-hoja:#F5F5F5;      /* el gris de las secciones */
  --fx-lima:#EAFFAE;      /* el relleno de la tarjeta destacada */
  --fx-lima-2:#F4FFD6;
  --fx-alba:#FCFFF3;      /* el arranque del degradado del héroe */
  --fx-olivo:#4E5918;     /* el verde de ESTA casa, cuando hace de texto */
  --fx-linea:#E9EAEB;
  --fx-w:1320px;
  --p99:99px; --r12:12px; --r16:16px; --r20:20px;
  --fx-sombra:0 1px 2px rgba(16,24,40,.04),0 14px 34px -14px rgba(16,24,40,.12);
  --fx-fam:"Inter AS","Inter Reserva",system-ui,sans-serif;
}

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

/* la casa venía en versalitas con tracking positivo; la referencia es caja
   normal y tracking negativo. Se apaga de una vez y se reenciende sólo en
   los rótulos de columna del pie. */
body.fx *{text-transform:none}
body.fx .as-pie h2,body.fx .as-pie h3{text-transform:uppercase;letter-spacing:.04em}
body.fx{--fd:var(--fx-fam);--fs:var(--fx-fam)}

/* ── tipografía ────────────────────────────────────────────────────── */
body.fx h1,body.fx h2,body.fx h3,body.fx h4,
.fx-h1,.fx-h2,.fx-h3{font-family:var(--fx-fam);color:var(--fx-negro);
  font-weight:600;margin:0;letter-spacing:-.04em}
.fx-h1{font-size:clamp(2.4rem,1.2rem + 3.8vw,4rem);line-height:1.1;letter-spacing:-.05em}
.fx-h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.75rem);line-height:1.14;letter-spacing:-.04em}
.fx-h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.035em}
.fx-lead{font-size:1.125rem;line-height:1.45;letter-spacing:-.02em;
  color:var(--fx-tx);margin:0;max-width:62ch;font-weight:400}
.fx-olivo{color:var(--fx-olivo)}

/* ── el rótulo: la pastilla blanca con su marca y su flecha ────────── */
.fx-rotulo{display:inline-flex;align-items:center;gap:.55rem;background:#fff;
  border:1px solid var(--fx-linea);border-radius:var(--p99);
  color:var(--fx-tinta);font-size:.9375rem;font-weight:500;letter-spacing:-.015em;
  padding:.55rem 1.1rem;margin:0 0 1.5rem;box-shadow:var(--fx-sombra)}
.fx-rotulo svg{width:1rem;height:1rem;flex:none;fill:currentColor}
.fx-rotulo i{display:grid;place-items:center;width:1.15rem;height:1.15rem;flex:none;
  color:var(--fx-olivo)}

/* ── botones: píldora ──────────────────────────────────────────────── */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--fx-negro);color:#fff;border:1px solid var(--fx-negro);
  border-radius:var(--p99);padding:0 1.6rem;height:3.25rem;
  font-family:var(--fx-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),color var(--t)}
.fx-btn:hover{background:#292A30;border-color:#292A30}
.fx-btn--claro{background:#fff;color:var(--fx-tinta);border-color:var(--fx-linea)}
.fx-btn--claro:hover{background:var(--fx-hoja);border-color:var(--fx-linea);color:var(--fx-tinta)}
.fx-btn--lima{background:var(--fx-lima);color:var(--fx-negro);border-color:var(--fx-lima)}
.fx-btn--lima:hover{background:#DFFB96;border-color:#DFFB96;color:var(--fx-negro)}
.fx-btn svg{width:1.05rem;height:1.05rem;flex:none;fill:currentColor}
.fx-pelado{display:inline-flex;align-items:center;gap:.5rem;color:var(--fx-tinta);
  font-weight:500;letter-spacing:-.02em;text-decoration:none}
.fx-pelado:hover{color:var(--fx-olivo)}
.fx-pelado svg{width:1rem;height:1rem;fill:currentColor}

/* ── el héroe: el degradado que arranca casi blanco y acaba en lima ── */
.fx-hero{background:linear-gradient(180deg,var(--fx-alba) 0%,var(--fx-lima) 100%);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);text-align:center}
.fx-hero .fx-lead{margin:1.5rem auto 0;max-width:56ch}
.fx-hero__acc{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;
  justify-content:center;margin-top:2.25rem}

/* ── la cabecera de sección ────────────────────────────────────────── */
.fx-sec{padding:clamp(3rem,6vw,5.5rem) 0}
.fx-hoja{background:var(--fx-hoja)}
.fx-cab{text-align:center;max-width:48rem;margin-inline:auto}
.fx-cab .fx-lead{margin:1.1rem auto 0;max-width:54ch}

/* ── rejilla y tarjetas ────────────────────────────────────────────── */
.fx-rej{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);
  margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:700px){.fx-rej--2,.fx-rej--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.fx-rej--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fx-card{background:#fff;border:1px solid var(--fx-linea);border-radius:var(--r20);
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.55rem;
  min-width:0}
.fx-card h3{margin:0}
.fx-card p{margin:0;font-size:1rem;line-height:1.5;color:var(--fx-tx)}
.fx-card--lima{background:var(--fx-lima);border-color:var(--fx-lima)}
.fx-card--lima p{color:#2C3A0C}
.fx-card__n{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.25rem;height:2.25rem;padding:0 .6rem;border-radius:var(--p99);
  background:var(--fx-negro);color:#fff;font-weight:600;font-size:.875rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;align-self:flex-start;
  margin-bottom:.4rem}
.fx-card--lima .fx-card__n{background:var(--fx-olivo)}
.fx-card__k{font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fx-olivo);margin:0 0 .35rem}
body.fx .fx-card__k{text-transform:uppercase}

/* ── la línea de la equivalencia: una sola frase, a cuerpo grande ──── */
.fx-frase{background:var(--fx-lima);border-radius:var(--r20);text-align:center;
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem);margin-top:clamp(2rem,4vw,3rem)}
.fx-frase__v{font-family:var(--fx-fam);font-weight:600;color:var(--fx-negro);
  font-size:clamp(1.75rem,1rem + 3vw,3rem);line-height:1.15;letter-spacing:-.04em;
  margin:0;font-variant-numeric:tabular-nums}
.fx-frase__v b{font-weight:600}
.fx-frase__d{margin:1.25rem auto 0;max-width:60ch;font-size:1.0625rem;
  line-height:1.5;letter-spacing:-.015em;color:#2C3A0C}

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

/* ── el cierre: la banda negra de la referencia ────────────────────── */
.fx-cierre{background:var(--fx-negro);border-radius:var(--r20);color:#fff;
  text-align:center;padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,4vw,3rem)}
body.fx .fx-cierre .fx-h2{color:#fff}
.fx-cierre .fx-lead{color:#fff;margin:1.1rem auto 0;max-width:54ch}
.fx-cierre .fx-btn{margin-top:2rem;background:var(--fx-lima);color:var(--fx-negro);
  border-color:var(--fx-lima)}
.fx-cierre .fx-btn:hover{background:#DFFB96;border-color:#DFFB96}

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

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

/* ══ LA BARRA: UNA PÍLDORA NEGRA QUE FLOTA ═══════════════════════════════
   No es una banda pegada al borde: la referencia la separa del filo y le da
   la esquina entera. El menú y la marca van en blanco dentro, y la acción
   es una píldora blanca. */
body.fx .as-barra{background:transparent;border:0;padding-top:1.25rem;
  padding-bottom:.25rem;position:relative;z-index:40}
body.fx .as-barra__in{background:var(--fx-negro);border-radius:var(--p99);
  min-height:4.5rem;padding-inline:clamp(1.25rem,2.5vw,2rem);gap:1.5rem}
body.fx .as-logo{color:#fff;font-family:var(--fx-fam);font-weight:600;
  letter-spacing:-.03em;font-size:1.3125rem;gap:.55rem}
body.fx .as-logo svg,body.fx .as-logo path{fill:currentColor}
body.fx .as-nav a{color:rgba(255,255,255,.88);font-size:1rem;font-weight:400;
  letter-spacing:-.02em;text-decoration:none}
body.fx .as-nav a:hover{color:var(--fx-lima)}
body.fx .as-idioma{color:rgba(255,255,255,.7);font-size:.875rem}
body.fx .as-idioma a{color:inherit;text-decoration:none}
body.fx .as-idioma a[aria-current]{color:var(--fx-lima);font-weight:600}
body.fx .as-enlace{color:#fff;font-weight:500;letter-spacing:-.02em;text-decoration:none}
body.fx .as-barra .as-b--oliva{background:#fff;border-color:#fff;color:var(--fx-negro);
  border-radius:var(--p99);height:2.75rem;padding:0 1.25rem;font-weight:500;
  font-family:var(--fx-fam);letter-spacing:-.02em}
body.fx .as-barra .as-b--oliva:hover{background:var(--fx-lima);border-color:var(--fx-lima)}
body.fx .as-barra .as-b--linea{background:transparent;border-color:rgba(255,255,255,.3);
  color:#fff;border-radius:var(--p99);height:2.75rem;padding:0 1.25rem;font-weight:500;
  font-family:var(--fx-fam);letter-spacing:-.02em}
body.fx .as-barra .as-b--linea:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── el pie ────────────────────────────────────────────────────────── */
body.fx .as-pie{background:var(--fx-hoja);border-top:1px solid var(--fx-linea);
  color:var(--fx-tx)}
body.fx .as-pie h2,body.fx .as-pie h3{font-family:var(--fx-fam);font-size:.8125rem;
  font-weight:600;color:var(--fx-tx);margin:0 0 .85rem}
body.fx .as-pie a{color:var(--fx-tx);text-decoration:none}
body.fx .as-pie a:hover{color:var(--fx-olivo)}
body.fx .as-pie__col ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
body.fx .as-pie__d{color:var(--fx-tx);font-size:.9375rem;line-height:1.55}
body.fx .as-pie__cierre{border-top:1px solid var(--fx-linea);color:var(--fx-tx);
  font-size:.875rem}
body.fx .as-logo{color:var(--fx-tinta)}
body.fx .as-barra .as-logo{color:#fff}

/* ── las marcas de pago ────────────────────────────────────────────────
   Sólo Visa y Mastercard, que es lo que la casa acepta, y con sus
   logotipos. 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.

   Medido en el render de ESTE pie —que es gris #F5F5F5, no blanco—:
   VISA 4.712 px² contra Mastercard 4.761, un 1 % de diferencia, con
   h_visa = 0,802 · h_mc. (En bremmak salió 0,828 y en monocromo sería 0,89:
   cada pie tiene la suya, y aquí la de zurmeta resultó servir igual.)

   ⚠ La sonda de tinta daba «100 % de cobertura» en las dos: daba el papel
   por BLANCO y el gris del pie es 245,245,245, así que contaba cada píxel
   como tinta. El papel se toma del píxel de al lado de la caja, no se
   supone. */
.as-pay{display:inline-flex;align-items:center;gap:1rem}
.as-pay__v,.as-pay__m{width:auto;min-width:0;min-height:0;flex:none;display:block}
.as-pay__v{height:17.4px}
.as-pay--color .as-pay__m{height:21.7px}
body.fx .as-pie .as-pay{margin-top:1.25rem}

/* ── la calculadora viva ───────────────────────────────────────────────
   La pieza propia de esta casa: se escribe una cifra y se ve la otra. Va en
   la ficha blanca del sistema, encima del degradado, donde la referencia
   pone la captura de su producto. Los ganchos `data-calc` son de `app.js` y
   no se tocan: aquí sólo cambia la forma. */
.fx-calc{display:grid;gap:1rem;align-items:center;background:#fff;
  border:1px solid var(--fx-linea);border-radius:var(--r20);box-shadow:var(--fx-sombra);
  padding:clamp(1.25rem,2.6vw,1.75rem);max-width:44rem;
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;text-align:left}
@media (min-width:640px){
  .fx-calc{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
}
.fx-calc__e{display:grid;gap:.45rem;min-width:0}
.fx-calc__e>span:first-child{font-size:.875rem;font-weight:500;color:var(--fx-tx);
  letter-spacing:-.01em}
.fx-calc__campo{display:flex;align-items:center;gap:.5rem;border:1px solid var(--fx-linea);
  border-radius:var(--r12);background:#fff;padding-inline:1rem;height:3.25rem}
.fx-calc__campo:focus-within{outline:2px solid var(--fx-olivo);outline-offset:1px;
  border-color:var(--fx-olivo)}
.fx-calc__campo i{font-style:normal;color:var(--fx-tx);font-weight:500;flex:none}
.fx-calc__campo input{flex:1;min-width:0;border:0;background:transparent;padding:0;
  font-family:var(--fx-fam);font-size:1.25rem;font-weight:600;letter-spacing:-.03em;
  color:var(--fx-negro);font-variant-numeric:tabular-nums;height:100%}
.fx-calc__campo input:focus{outline:0}
.fx-calc__campo b{flex:none;font-size:.8125rem;font-weight:600;color:var(--fx-tx);
  letter-spacing:.04em}
body.fx .fx-calc__campo b{text-transform:uppercase}
.fx-calc__p{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;
  border-radius:50%;background:var(--fx-lima);color:var(--fx-olivo);justify-self:center}
.fx-calc__p svg{width:1.2rem;height:1.2rem}
@media (max-width:639.98px){.fx-calc__p{transform:rotate(90deg)}}
.fx-calc__s{display:grid;gap:.45rem;margin:0;min-width:0}
.fx-calc__k{font-size:.875rem;font-weight:500;color:var(--fx-tx);letter-spacing:-.01em}
.fx-calc__v{font-family:var(--fx-fam);font-size:1.75rem;font-weight:600;
  letter-spacing:-.04em;color:var(--fx-negro);font-variant-numeric:tabular-nums;
  line-height:1.15;overflow-wrap:anywhere}
.fx-calc__nota{max-width:44rem;margin:1rem auto 0;font-size:.9375rem;line-height:1.5;
  color:#2C3A0C;text-align:center}

/* ══ 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. La hoja entra desde la derecha, que es
   de donde cuelga la hamburguesa; sobre negro, como la barra. */
.fx-menu-b{display:none}
.as-idioma--hoja{display:none}
.fx-menu__acc{display:none}

@media (max-width:899.98px){
  body.fx .fx-menu-b{display:grid;place-items:center;width:2.75rem;height:2.75rem;
    margin-left:auto;flex:none;border:1px solid rgba(255,255,255,.28);
    border-radius:var(--p99);background:transparent;color:#fff;padding:0;cursor:pointer;
    position:relative;z-index:70}
  body.fx .fx-menu-b svg,body.fx .fx-menu-b path{display:block;fill:currentColor}
  body.fx .fx-menu-b .fx-menu-b__c{display:none}
  body.fx.fx-menu .fx-menu-b .fx-menu-b__a{display:none}
  body.fx.fx-menu .fx-menu-b .fx-menu-b__c{display:grid}
  body.fx .fx-menu-b:focus-visible{outline:2px solid var(--fx-lima);outline-offset:2px}

  body.fx .as-barra .as-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:var(--fx-negro);color:#fff;overflow-y:auto;margin:0;
    padding:calc(var(--fx-barra,88px) + 1rem) 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    transform:translateX(101%);transition:transform .26s ease;
    box-shadow:0 0 60px rgba(0,0,0,.35)}
  body.fx.fx-menu .as-barra .as-nav{transform:none}
  body.fx .as-barra .as-nav a{color:rgba(255,255,255,.88);width:100%;padding:.85rem .9rem;
    border-radius:var(--r12);font-size:1rem;font-weight:500;letter-spacing:-.02em}
  body.fx .as-barra .as-nav a:hover{color:var(--fx-lima);background:rgba(255,255,255,.08)}

  body.fx .as-barra .as-idioma--hoja{display:flex;justify-content:center;gap:.4rem;
    margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.16);
    font-size:.9375rem;color:rgba(255,255,255,.7)}
  body.fx .as-barra .as-idioma--hoja a{width:auto;padding:.35rem .6rem;color:inherit}
  body.fx .as-barra .as-idioma--hoja a[aria-current]{color:var(--fx-lima);font-weight:600;
    background:none}
  body.fx .as-barra .as-nav a.fx-menu__acc{display:inline-flex;justify-content:center;
    margin-top:.6rem;width:100%;height:2.75rem;padding:0 1.1rem;border-radius:var(--p99);
    background:var(--fx-lima);color:var(--fx-negro);border:1px solid var(--fx-lima)}
  body.fx .as-barra .as-nav a.fx-menu__acc:first-of-type{margin-top:1rem}
  body.fx .as-barra .as-nav a.fx-btn--claro{background:transparent;color:#fff;
    border-color:rgba(255,255,255,.3)}
  body.fx .as-barra .as-nav a.fx-btn--claro:hover{background:rgba(255,255,255,.1);
    border-color:#fff;color:#fff}

  body.fx .fx-velo-m{position:fixed;inset:0;z-index:61;background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.fx.fx-menu{overflow:hidden}
  body.fx.fx-menu .as-barra{z-index:64}
  body.fx.fx-menu .as-barra .as-logo{position:relative;z-index:70}

  /* las acciones se van a la hoja: la barra queda con la marca y el botón */
  body.fx .as-barra__acc{display:none}
  body.fx .as-barra__in{gap:.75rem;flex-wrap:nowrap;align-items:center}
}
@media (max-width:899.98px) and (prefers-reduced-motion:reduce){
  body.fx .as-barra .as-nav{transition:none}
}

/* ══ LOS INTERIORES EN PANTALLA ESTRECHA ═════════════════════════════════ */
@media (max-width:559.98px){
  body.fx .fx-aviso{grid-template-columns:minmax(0,1fr);gap:.9rem}
  body.fx .fx-cab .fx-lead,body.fx .fx-hero .fx-lead,body.fx .fx-frase__d,
  body.fx .fx-cierre .fx-lead{text-align:left;margin-inline:0}
}
@media (max-width:699.98px){
  body.fx .fx-hero{padding-top:clamp(2rem,6vw,3rem);padding-bottom:2rem}
  body.fx .fx-sec{padding-block:clamp(2.25rem,6vw,3rem)}
}
@media (max-width:379.98px){
  body.fx .fx-card,body.fx .fx-aviso,body.fx .fx-forma,body.fx .fx-calc{padding:1.15rem}
  body.fx .fx-frase,body.fx .fx-cierre{padding-inline:1.15rem}
}

/* ══ LAS PANTALLAS DE CUENTA Y EL PANEL ══════════════════════════════════
   Aquí NO se reescribe el marcado: esas plantillas llevan nonces, nombres de
   campo, `autocomplete` y ganchos de `app.js` y `panel.js`. Cambian el
   color, la cara y la esquina.

   Y no se va clase por clase: `app.css` reparte la piedra por TOKENS, así
   que se reapuntan los tokens bajo `body.fx` y con eso caen de una vez
   todas las superficies. Cada sustituto va medido:
     tinta   #26231D 9,49  → #181D27 16,88
     tinta-2 #3B3730 7,17  → #3A4151 10,22
     apoyo   #58544B 4,57  → #535862  7,14
     filete-2 #756E61 3,06 → #7E8699  3,65  (pide 3)
   El OLIVO se queda: es el tono de esta casa y da 7,59 sobre blanco y 7,59
   con blanco encima. La lima sólo rellena; el texto verde va en olivo. */
body.fx{
  --base:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:var(--fx-hoja);
  --filete:var(--fx-linea);
  --filete-2:#7E8699;
  --tinta:var(--fx-tinta);
  --tinta-2:#3A4151;
  --apoyo:var(--fx-tx);
  --oliva:#4E5918;
  --oliva-2:var(--fx-lima-2);
  --oliva-ink:#FFFFFF;
  --ok:#1D6B4A;   --ok-2:#ECFBF3;
  --pausa:#8A5A00; --pausa-2:#FFF8E8;
  --alto:#A32A22; --alto-2:#FEF3F2;
  --ctrl:12px;
  --arco:20px;
  --ancho:1320px;
}
body.fx.as-auth,body.fx.as-app{background:#fff}

/* ── la pantalla de acceso ─────────────────────────────────────────────
   Esta casa NO centra un formulario solo: por encima de su corte reparte la
   pantalla en dos —el argumento a la izquierda, los campos a la derecha—, y
   eso es lo que pide el canon: si el formulario no llena el ancho, la
   columna que sobra lleva algo que sirva. Se conserva la anatomía y cambia
   el sistema; ponerle mi tarjeta encima recortaba el titular a 130 px. */
body.fx .as-acceso .as-acceso__caja:not(.as-acceso__caja--ancha){
  background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;
  overflow:visible}
body.fx .as-acceso__caja:not(.as-acceso__caja--ancha)>form{
  background:#fff;border:1px solid var(--fx-linea);border-radius:var(--r20);
  box-shadow:var(--fx-sombra);padding:clamp(1.5rem,3vw,2rem)}
body.fx .as-acceso__caja:not(.as-acceso__caja--ancha)>.as-acceso__pie{
  background:transparent;border-top:1px solid var(--fx-linea);padding:1.1rem 0 0;
  margin-top:1.4rem}
/* por debajo del corte vuelve a ser una columna: ahí sí es una ficha */
@media (max-width:959.98px){
  body.fx .as-acceso .as-acceso__caja:not(.as-acceso__caja--ancha){
    background:#fff;border:1px solid var(--fx-linea);border-radius:var(--r20);
    box-shadow:var(--fx-sombra);padding:clamp(1.5rem,4vw,2rem);max-width:34rem;
    margin-inline:auto}
  body.fx .as-acceso__caja:not(.as-acceso__caja--ancha)>form{
    background:transparent;border:0;box-shadow:none;padding:0}
}
body.fx .as-acceso .as-acceso__caja--ancha{background:transparent;border:0;
  box-shadow:none;padding:0;max-width:48rem;margin-inline:auto}

/* el rótulo: la pastilla del sistema, en lima y sin sangrar la caja */
body.fx .as-acceso .as-marca-agua{display:inline-flex;align-items:center;gap:.55rem;
  background:var(--fx-lima);color:#2C3A0C;border-radius:var(--p99);
  margin:0 0 1.25rem;padding:.5rem 1rem;font-weight:600;font-size:.9375rem;
  letter-spacing:-.01em;width:auto;align-self:flex-start;justify-self:start}
body.fx .as-acceso .as-marca-agua::before{content:"";flex:none;width:18px;height:2px;
  background:var(--fx-olivo)}
body.fx .as-acceso .as-marca-agua::after{content:none}

body.fx .as-acceso h1{letter-spacing:-.04em;color:var(--fx-negro)}
body.fx .as-acceso__d{color:var(--fx-tx);font-size:1rem;margin:.7rem 0 1.6rem}

/* ── controles ────────────────────────────────────────────────────────
   El alto se declara aquí: `main select` lo fuerza con `box-sizing:border-box`
   y la hoja de Bricks pone `line-height:40px`, y si además se les da relleno
   vertical el contenido pide más de lo que cabe y la opción se corta. */
body.fx .as-campo input,body.fx .as-campo select,body.fx .as-campo textarea,
body.fx .as-acceso input[type=email],body.fx .as-acceso input[type=password],
body.fx .as-acceso input[type=text],body.fx .as-acceso input[type=tel],
body.fx .as-acceso input[type=date],body.fx .as-acceso select{
  font-family:var(--fx-fam);font-size:1rem;letter-spacing:-.011em;
  color:var(--fx-tinta);background:#fff;border:1px solid var(--fx-linea);
  border-radius:var(--r12);padding-inline:1rem;padding-block:0;
  height:3.25rem;min-height:3.25rem;line-height:normal;box-shadow:none}
body.fx .as-campo textarea,body.fx .as-acceso textarea{
  height:auto;min-height:7rem;line-height:1.55;padding-block:.9rem}
body.fx .as-campo input:focus,body.fx .as-campo select:focus,
body.fx .as-campo textarea:focus,body.fx .as-acceso input:focus,
body.fx .as-campo :focus-visible{outline:2px solid var(--fx-olivo);outline-offset:1px;
  border-color:var(--fx-olivo)}
body.fx .as-campo>span,body.fx .as-casilla span{display:block;font-family:var(--fx-fam);
  font-size:.875rem;font-weight:500;color:var(--fx-tinta);letter-spacing:-.01em;
  margin-bottom:.4rem}
body.fx input[type=checkbox],body.fx input[type=radio]{
  width:1.15rem;height:1.15rem;min-height:0;accent-color:var(--fx-olivo);flex:none}

/* ── botones de cuenta: píldora, como en la portada ───────────────────── */
body.fx.as-auth .as-b,body.fx.as-app .as-b{border-radius:var(--p99);
  font-family:var(--fx-fam);font-weight:500;letter-spacing:-.02em;box-shadow:none}
body.fx.as-auth .as-b--oliva,body.fx.as-app .as-b--oliva{
  background:var(--fx-negro);border-color:var(--fx-negro);color:#fff}
body.fx.as-auth .as-b--oliva:hover,body.fx.as-app .as-b--oliva:hover{
  background:#292A30;border-color:#292A30}
body.fx.as-auth .as-b--linea,body.fx.as-app .as-b--linea{
  background:#fff;border-color:var(--fx-linea);color:var(--fx-tinta)}
body.fx.as-auth .as-b--linea:hover,body.fx.as-app .as-b--linea:hover{
  background:var(--fx-hoja)}
body.fx.as-app .as-b--alto{background:#A32A22;border-color:#A32A22;color:#fff}

body.fx .as-acceso .as-acceso__pie{background:var(--fx-hoja);
  border-top:1px solid var(--fx-linea);padding-block:1.1rem;margin-top:1.8rem;
  font-size:.9375rem;color:var(--fx-tx)}
body.fx .as-acceso__pie a{color:var(--fx-olivo);text-decoration:underline;
  text-underline-offset:.22em}

/* ── el alta ──────────────────────────────────────────────────────────── */
body.fx .as-grupo{border-top-color:var(--fx-linea)}
body.fx .as-acceso__caja--ancha .as-grupo{border:1px solid var(--fx-linea);
  border-radius:var(--r20);background:#fff;box-shadow:var(--fx-sombra);
  padding-bottom:1.5rem}
body.fx .as-acceso__caja--ancha .as-grupo legend{background:var(--fx-lima);
  color:var(--fx-negro);text-transform:none;letter-spacing:-.03em;
  font-size:1.0625rem;font-weight:600;padding:.9rem 1.25rem;
  border-bottom:1px solid var(--fx-linea)}
body.fx .as-acceso__caja--ancha .as-grupo__n{background:#fff;color:var(--fx-olivo);
  border:1px solid var(--fx-olivo);border-radius:var(--p99);padding:.12rem .5rem;
  font-weight:600;font-size:.8125rem;width:auto;height:auto}
body.fx .as-grupo__d{font-size:.9375rem;color:var(--fx-tx)}
body.fx .as-ranura{border-color:var(--fx-linea);border-radius:var(--r12);background:#fff}
body.fx .as-ranura__k{font-family:var(--fx-fam);font-weight:500;color:var(--fx-tinta)}

/* ── el panel ─────────────────────────────────────────────────────────── */
body.fx .as-app__cab h1{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  letter-spacing:-.04em;color:var(--fx-negro)}
body.fx .as-app__cab .as-marca-agua{background:none;padding:0;color:var(--fx-olivo);
  font-weight:600;font-size:.9375rem;letter-spacing:-.01em;display:flex;
  align-items:center;gap:.6rem}
body.fx .as-app__cab .as-marca-agua::before{content:"";flex:none;width:20px;height:2px;
  background:var(--fx-olivo)}
body.fx .as-app__estado,body.fx .as-app__d{color:var(--fx-tx);font-size:1rem}

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

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

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

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

/* ── las pestañas ──────────────────────────────────────────────────────
   Esta casa no las pinta como fichas con borde: son un punto y una palabra,
   separados 24 px. Es su idioma y funciona; lo que cambiaba era el color.
   Ponerles encima un rectángulo negro —como en las hermanas— rompía el
   patrón, así que el estado en curso se dice con el punto y el peso, no con
   un relleno. */
body.fx .as-pestanas button{font-family:var(--fx-fam);font-weight:500;
  font-size:.9375rem;color:var(--fx-tx);background:transparent;letter-spacing:-.02em}
body.fx .as-pestanas button::before{background:var(--fx-linea)}
body.fx .as-pestanas button:hover{color:var(--fx-tinta);background:transparent}
body.fx .as-pestanas button.is-on{background:transparent;color:var(--fx-negro);
  font-weight:600}
body.fx .as-pestanas button.is-on::before{background:var(--fx-olivo)}
body.fx .as-pestanas button.is-on b{color:var(--fx-olivo);opacity:1}
body.fx .as-pestanas button b{color:var(--fx-tx)}

body.fx .as-dlg{border-radius:var(--r20);border:1px solid var(--fx-linea);background:#fff}
body.fx .as-dlg__d{font-family:var(--fx-fam);font-weight:600;color:var(--fx-negro)}
body.fx .as-dlg__d-l{border-color:var(--fx-linea);border-radius:var(--r12)}
body.fx .as-velo{background:rgba(0,0,0,.5)}
body.fx .as-cajon{background:#fff;border-left:1px solid var(--fx-linea)}
body.fx .as-cajon__cab,body.fx .as-cajon__pie{border-color:var(--fx-linea);background:#fff}
body.fx .as-buscar{border-color:var(--fx-linea);border-radius:var(--r12);background:#fff}
body.fx .as-buscar:focus-within{border-color:var(--fx-olivo)}
body.fx .as-codigo input{border-color:var(--fx-linea);border-radius:var(--r12);
  background:#fff;color:var(--fx-negro)}
body.fx .as-codigo input.is-puesta{background:var(--fx-lima-2);border-color:var(--fx-olivo)}
body.fx .as-escritorio{margin-inline:auto}

/* ── el panel en pantalla estrecha ────────────────────────────────────── */
@media (max-width:699.98px){
  body.fx .as-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.fx .as-pestanas::-webkit-scrollbar{display:none}
  body.fx .as-pestanas button{flex:none;white-space:nowrap}
  body.fx .as-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.fx .as-tabla td[colspan]>*{position:sticky;left:0;
    width:min(100%,calc(100vw - var(--gut)*2 - 2px))}
  body.fx .as-tabla th,body.fx .as-tabla td{padding-inline:.9rem}
}
@media (max-width:559.98px){
  body.fx .as-cambio__c{display:flex;align-items:baseline;justify-content:space-between;
    gap:1rem;padding:.9rem 1.1rem}
  body.fx .as-cambio__c dt{min-width:0}
  body.fx .as-cambio__c dd{margin-top:0;white-space:nowrap}
  body.fx .as-cambio{gap:.6rem}
  body.fx .as-app__cab{gap:.75rem 1rem}
  body.fx .as-app__estado{width:100%}
}

/* El botón principal de las pantallas de cuenta es `--sobre`, no `--oliva`:
   nombrar sólo el segundo dejaba el olivo de la casa anterior sobre el
   sistema nuevo, que lleva la píldora negra. */
body.fx.as-auth .as-b--sobre,body.fx.as-app .as-b--sobre,
body.fx .as-forma .as-b--sobre{
  background:var(--fx-negro);border-color:var(--fx-negro);color:#fff}
body.fx.as-auth .as-b--sobre:hover,body.fx.as-app .as-b--sobre:hover{
  background:#292A30;border-color:#292A30}

/* ── la pieza de la tarjeta de puntos ──────────────────────────────────
   `pagina.php` marca los puntos con `.fx-card__i`, que nunca llegué a
   declarar: la paloma salía suelta y en negro, sin su cuadro. */
.fx-card__i{display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:var(--r12);background:var(--fx-lima);color:var(--fx-olivo);
  align-self:flex-start;margin-bottom:.4rem}
.fx-card__i svg,.fx-card__i path{width:1.25rem;height:1.25rem;fill:currentColor}
.fx-card--lima .fx-card__i{background:#fff;color:var(--fx-olivo)}

/* El aviso se pinta con el gris de las secciones, así que cuando cae EN una
   sección gris desaparece en el fondo y deja de leerse como apartado. */
.fx-hoja .fx-aviso{background:#fff;border:1px solid var(--fx-linea)}

/* ── el cierre en pantalla estrecha ────────────────────────────────────
   Centrado, el titular del cierre caía en cuatro renglones con una palabra
   sola al final —«digitales»—, que es justo lo que el canon no admite. A
   la izquierda el rag se endereza y la huérfana desaparece. */
@media (max-width:559.98px){
  body.fx .fx-cierre{text-align:left}
  body.fx .fx-cierre .fx-lead{margin-inline:0}
  body.fx .fx-cierre .fx-btn{width:100%}
}

/* ── el rag de los titulares ───────────────────────────────────────────
   El titular del cierre caía «No te prometemos / que los activos /
   digitales / no tengan riesgo.»: una palabra sola en el tercer renglón.
   `text-wrap:balance` reparte los renglones en vez de llenarlos, que es lo
   que el canon pide —ni rag escalonado ni huérfanas—, y el cierre baja un
   escalón de cuerpo porque es una llamada, no el título de la página. */
.fx-h1,.fx-h2,.fx-h3,.fx-frase__v{text-wrap:balance}
@media (max-width:559.98px){
  body.fx .fx-cierre .fx-h2{font-size:clamp(1.6rem,1.1rem + 2vw,2rem)}
}

/* Para los párrafos el reparto no es `balance` —que iguala renglones y en un
   texto largo se nota raro— sino `pretty`, que sólo evita que el último
   quede con una palabra suelta. */
.fx-lead,.fx-card p,.fx-aviso p,.fx-frase__d,.fx-prosa p,.fx-calc__nota{text-wrap:pretty}

/* Con la hoja abierta, la píldora negra de la barra quedaba cortada por
   debajo de ella y dejaba un muñón asomando a la izquierda. La barra entera
   sube por encima: como las dos son negras, la costura desaparece y la
   equis queda donde el dedo la busca. */
@media (max-width:899.98px){
  body.fx.fx-menu .as-barra__in{position:relative;z-index:66}
}

/* ── el escritorio en pantalla estrecha ────────────────────────────────
   La pista de la billetera y su contador van en fila con 40 px de hueco:
   en una columna de 303 eso deja 185 px para la pista —cuatro renglones—
   contra un contador de una línea. Debajo de 560 se apilan. */
@media (max-width:559.98px){
  body.fx .as-pista{flex-direction:column;align-items:flex-start;gap:.35rem}
}

/* La nota de aviso lleva 40 px de relleno lateral: en esa misma columna al
   texto le quedaban 189 px, unos 24 signos por renglón. Se aprieta el
   chaflán, no el texto. */
@media (max-width:699.98px){
  body.fx .as-nota{padding:1.1rem 1.15rem;gap:.7rem}
}