/* ══ Tokens y arranque ═════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   ALLOYSTONE — la casa de conversiones
   ══════════════════════════════════════════════════════════════
   Piedra de tono MEDIO-CLARO. Es el último hueco estructural del
   conjunto: seis hermanas oscuras (L 4–10), una de acero (L 21) y
   cinco claras (L 91–100). Ésta va en L78, sin vecinos.

   El acento oliva sale de los 49° libres entre el oro (46°) y el
   lima (95°); y va oscuro (L20) mientras esos dos van claros
   (L47 y L62), así que tampoco se confunden por valor.

   Un fondo intermedio estrecha el contraste por los dos lados: cada
   tono de apoyo se buscó por cálculo, tomando el MÁS CLARO que aún
   cumple su mínimo. Si se aclara cualquiera, reprueba.
   ══════════════════════════════════════════════════════════════ */
:root{--mini:14px;      /* el canto de las miniaturas */
  --redondo:99px;   /* la pieza redonda entera: numerales y pastillas */
  /* la escala de espaciado: los escalones que ya mandaban en la hoja */
  --e1:.4rem;
  --e2:.5rem;
  --e3:.6rem;
  --e4:.75rem;
  --e5:.9rem;
  --e6:1rem;
  --e7:1.25rem;
  --e8:1.5rem;
  --e9:2rem;
  --e10:2.5rem;
  --e11:3rem;
  --e12:4rem;
  --base:#CDC9C1;        /* piedra */
  --panel:#E0DDD7;
  --panel-2:#F0EEEB;
  --filete:#B6B0A5;
  --filete-2:#756E61;    /* borde de control: 3.06:1 */

  --tinta:#26231D;       /* 9.49:1 */
  --tinta-2:#3B3730;     /* 7.17:1 */
  --apoyo:#58544B;       /* 4.57:1 */

  --oliva:#4E5918;       /* 4.60:1 */
  --oliva-2:#E6E8D8;
  --oliva-ink:#F8F9F6;

  --ok:#3F6B2A;   --ok-2:#DCE8D4;
  --pausa:#7A5A12; --pausa-2:#F0E6CE;
  --alto:#8C2F26; --alto-2:#F2DCD9;

  --fd:"Host Grotesk","Epilogue",system-ui,sans-serif;
  --fs:"Epilogue",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ancho:1280px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --ctrl:0px;
  --arco:26px;           /* el arco: sólo en las piezas de conversión */
  --t:.17s;
  --paso:.32s;}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--tinta);
  font-family:var(--fs);font-size:1rem;line-height:1.62;font-synthesis-weight:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
/* ── fin de las franjas ── */
/* ── el editorial ──────────────────────────────────────────────────
   Medida ancha y composición asimétrica: el encabezado de cada zona
   rompe a la izquierda y el contenido corre en la columna derecha. */
:root{}
/* ── fin del panel ── */
/* ── el sistema de medidas ─────────────────────────────────────────
   El alto de los controles sale de un token, no del relleno: así el
   botón y el campo que van juntos miden lo mismo. Antes el mismo
   componente caía en alturas distintas según dónde estuviera. */
:root{--h-ctrl:46px;      /* botón y campo */
  --h-ctrl-lg:56px;   /* la variante grande */
  --h-ctrl-sm:34px;   /* la variante compacta */
  --e1:.35rem; --e2:.6rem; --e3:.9rem;
  --e4:1.25rem; --e5:1.75rem; --e6:2.5rem;}

/* ══ Base tipográfica ══════════════════════════════════════════════ */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:1.06;
  letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
h1{font-size:clamp(2.125rem,1.2rem + 3.2vw,3.625rem)}
h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.375rem)}
h3{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem)}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--oliva);outline-offset:2px}
::selection{background:var(--oliva);color:var(--oliva-ink)}
.as-barra__in{display:flex;align-items:center;gap:var(--e8);min-height:76px}
/* El logotipo va en 1.5rem. En 1.25rem era el más pequeño de las seis casas
   y sólo sacaba 5 px al menú; pasó por 1.375rem. La marca sube con él, que va
   en em: de 22,6 a 27,1 px de lado.
   Lo que cuesta, medido: la barra vuelve a una sola fila a partir de 1130 px
   en vez de los 1107 del tamaño original, o sea 23 px más de la franja de dos
   pisos que ya existía desde 904. Nada más se mueve: ni un solape ni un
   desbordamiento de 320 a 1600 px.
   El rótulo del pie no es su repetición pequeña sino una pieza grande de
   cierre, con su propio `clamp`, y no le afecta.
   El interlineado va en 1 porque un logotipo mide su propia caja, no la de un
   párrafo: la barra del teléfono BAJA de 87 a 80 px aunque la palabra crezca
   un 10 %. */
.as-logo{display:inline-flex;align-items:center;gap:.169em;font-family:var(--fd);
  font-weight:700;letter-spacing:-.03em;line-height:1;font-size:1.5rem;
  color:var(--tinta);text-decoration:none}
.as-nav{display:flex;gap:var(--e8);margin-left:auto;font-size:.9375rem}
.as-barra__acc{display:flex;align-items:center;gap:var(--e5);margin-left:auto}
.as-idioma{display:flex;gap:var(--e1);font-size:.8125rem;color:var(--apoyo)}
.as-enlace{font-size:.9375rem;text-decoration:underline;text-underline-offset:3px}
.as-b{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--fd);font-weight:600;font-size:.9375rem;line-height:1;
  padding:var(--e4) var(--e7);border-radius:var(--ctrl);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t)}
.as-b--oliva{background:var(--oliva);color:var(--oliva-ink);border-color:var(--oliva)}
.as-b--linea{background:transparent;color:var(--tinta);border-color:var(--filete-2)}
.as-b--grande{padding:var(--e5) 1.7rem;font-size:1rem}
.as-b--chico{padding:var(--e1) var(--e5);font-size:.8125rem}
.as-b--ancho{width:100%;margin-top:var(--e7)}
.as-eyebrow{font-family:var(--fd);font-weight:600;font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--oliva)}
.as-hero__d{margin-top:var(--e7);font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  color:var(--tinta-2);max-width:47ch}
.as-hero__acc{margin-top:var(--e9);display:flex;flex-wrap:wrap;gap:var(--e4)}
/* ── el paso a paso: dos columnas con el texto pegado al filete ─── */
.as-pasos{margin-top:var(--e9);display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.as-paso__n{font-family:var(--fd);font-weight:700;font-size:.75rem;letter-spacing:.14em;
  color:var(--oliva);font-variant-numeric:tabular-nums}
.as-equiv{margin-top:var(--e8);font-family:var(--fd);font-weight:600;
  font-size:clamp(1.375rem,1.05rem + 1.5vw,2.125rem);line-height:1.22;
  letter-spacing:-.02em;max-width:24ch}
.as-equiv__pie{margin-top:var(--e6);color:var(--tinta-2);max-width:52ch}
.as-campo{display:block;margin-bottom:var(--e7)}
.as-campo input,.as-campo select,.as-campo textarea, .as-acceso input[type=email],.as-acceso input[type=password], .as-acceso input[type=text],.as-acceso input[type=tel]{width:100%;font:inherit;color:var(--tinta);background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--ctrl);
  padding:var(--e4) var(--e5);transition:border-color var(--t),box-shadow var(--t)}
.as-campo input:focus,.as-campo select:focus,.as-campo textarea:focus, .as-acceso input:focus{outline:0;border-color:var(--oliva);
  box-shadow:inset 0 0 0 1px var(--oliva)}
.as-forma{margin-top:var(--e9);display:grid;gap:0 var(--e7);
  grid-template-columns:minmax(0,1fr)}
.as-nota{display:flex;align-items:flex-start;gap:var(--e3);padding:var(--e5) var(--e6);
  border:1px solid var(--filete-2);border-radius:var(--ctrl);margin-bottom:var(--e7);
  font-size:.9375rem}
.as-chip{display:inline-flex;align-items:center;padding:.2rem var(--e3);
  font-size:.75rem;font-weight:700;border:1px solid currentColor;border-radius:var(--ctrl)}
.as-pie{margin-top:clamp(2.5rem,6vw,4.5rem);border-top:1px solid var(--filete-2);
  padding-top:clamp(2rem,4vw,3rem);font-size:.9375rem}
.as-pie__in{display:grid;gap:var(--e9);grid-template-columns:minmax(0,1fr)}
.as-pie__d{color:var(--apoyo);max-width:34ch}
.as-pagos{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e6)}
.as-pie__cierre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e2);
  margin-top:var(--e9);padding:var(--e6) 0 var(--e8);border-top:1px solid var(--filete);
  font-size:.8125rem;color:var(--apoyo)}
.as-acceso__d{margin:var(--e3) 0 var(--e8);color:var(--apoyo);font-size:.9375rem}
.as-acceso__pie{margin-top:var(--e7);padding-top:var(--e7);border-top:1px solid var(--filete);
  font-size:.875rem;color:var(--apoyo)}
.as-casilla{display:flex;gap:var(--e3);align-items:flex-start;margin-top:var(--e6);font-size:.875rem}
.as-casilla--legal{color:var(--tinta-2)}
@media (max-width:900px){
.as-nav{display:none}
}
@media (max-width:520px){
.as-idioma{display:none}
}
/* ── la barra parte en dos cuando no cabe ────────────────────────────
   Logotipo, idioma, enlace de acceso, botón y un menú de cinco renglones
   no caben en una fila hasta los ~1180 px de ventana. Sin permiso para
   partirse, el flex apretaba: de 904 a 1150 px los renglones del menú se
   rompían en dos y tres líneas cada uno —«Paso a paso» medía 37 px de
   ancho por 84 de alto— y la caja del logotipo se encogía de 114 a 91,
   con la PALABRA saliéndose de ella hasta 22,6 px y montándose sobre el
   menú. A 904 px la fila desbordaba 42 px por la derecha. Y en el
   teléfono esa misma palabra se montaba 2,6 px sobre «Mi ingreso» ya a
   360, el ancho de casi cualquier Android.
   Nada de eso daba error: el que se sale es el texto, no la caja, así
   que el contenedor no acusa desbordamiento.
   Con permiso para partirse, el menú se queda arriba con la marca y las
   acciones bajan a su propia línea. Por encima de 1180 px la barra sigue
   siendo de una sola fila y de 77 px, como antes.

   El `flex:1 1 auto` de la franja es lo que la lleva a la derecha cuando
   queda sola en su fila. Con margen no se podía —de 641 a 900 px las
   acciones se apelotonaban contra la marca dejando 360 px vacíos a la
   derecha, porque `.as-nav + .as-barra__acc` sigue valiendo aunque el
   menú esté en `display:none` (sigue siendo hermano en el marcado) y le
   gana por especificidad al `margin-left:auto` escrito justo para eso—. */
.as-barra__in{flex-wrap:wrap;row-gap:.5rem}
.as-barra .as-logo{flex:none}
.as-barra__acc{flex:1 1 auto;justify-content:flex-end}
/* En el teléfono la franja se lleva la fila entera: así el corte no
   depende de cuánto mida el botón en cada idioma. */
@media (max-width:640px){
.as-barra__acc{width:100%;margin-left:0}
}
/* ══════════════════════════════════════════════════════════════
   PANTALLAS INTERNAS — mostrador, comprobante y autorizaciones
   ══════════════════════════════════════════════════════════════
   Mismo fondo que las hermanas y otra forma: aquí todo va en
   tarjetas redondeadas sobre papel de estraza, con el verde sólo
   en lo que se puede pulsar. Nada de filetes a hueso.
   ══════════════════════════════════════════════════════════════ */
.as-word{display:inline-block}
.as-apagado{color:var(--apoyo)}
.as-marca-agua{font-family:var(--fd);font-weight:600;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oliva)}
.as-marca-agua--alto{color:var(--alto)}
.as-app__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e6);margin-bottom:var(--e9)}
.as-app__estado{display:flex;align-items:center;gap:var(--e2);font-size:.9375rem;color:var(--tinta-2)}
/* El asiento: los tres totales, en pastillas y no en celdas con filete. */
.as-cambio,.as-asiento{display:grid;gap:var(--e5);grid-template-columns:minmax(0,1fr);margin-bottom:var(--e9)}
/* El mostrador: la remesa nueva a la izquierda, lo enviado a la derecha. */
.as-escritorio{display:grid;gap:var(--e8);grid-template-columns:minmax(0,1fr);align-items:start}
.as-cuenta__cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e6);
  padding:var(--e5) var(--e7);background:var(--oliva);color:var(--oliva-ink)}
.as-cuenta__r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e6);
  padding:var(--e5) var(--e7);border-bottom:1px solid var(--filete)}
.as-cuenta__pie{padding:var(--e4) var(--e7);border-top:1px solid var(--filete);
  background:var(--panel);font-size:.75rem;color:var(--apoyo)}
.as-asiento-chico{margin:var(--e7) 0 0;border:1px solid var(--filete);
  border-radius:var(--ctrl);overflow:hidden;background:var(--panel)}
/* El monto: la moneda en pastilla, no pegada al campo. */
.as-monto{display:flex;align-items:stretch;border:1px solid var(--filete-2);
  border-radius:var(--ctrl);background:var(--panel-2);overflow:hidden}
.as-monto__m{display:flex;align-items:center;padding:0 var(--e5);background:var(--panel);
  border-right:1px solid var(--filete);font-family:var(--fd);font-weight:700;
  font-size:.8125rem;color:var(--apoyo)}
.as-monto input{flex:1;min-width:0;border:0;background:transparent;font:inherit;
  font-family:var(--fd);font-weight:700;font-size:1.375rem;padding:var(--e3) var(--e5);
  font-variant-numeric:tabular-nums}
.as-monto input:focus{outline:0}
[data-monto-msg]{display:block;margin-top:var(--e1);font-size:.8125rem;color:var(--apoyo)}
[data-billetera] input{width:100%;font:inherit;font-family:var(--fd);background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--ctrl);padding:var(--e4) var(--e5);
  overflow-wrap:anywhere}
[data-billetera] input:focus{outline:0;border-color:var(--oliva);box-shadow:0 0 0 3px var(--oliva-2)}
@keyframes as-gira{
to{transform:rotate(360deg)}
}
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), footer input:not([type=checkbox]):not([type=hidden]){min-height:var(--h-ctrl);box-sizing:border-box;padding-block:0}
/* el desplegable trae relleno propio del navegador y su alto natural se salta
   el mínimo: aquí va fijo, o queda de 2 a 7px más alto que el campo de al lado */
main select{height:var(--h-ctrl);min-height:var(--h-ctrl);box-sizing:border-box;padding-block:0}
main textarea{min-height:calc(var(--h-ctrl) * 2.8);box-sizing:border-box}

/* ══ Contenedor y zonas ════════════════════════════════════════════ */
.as-ancho{width:min(var(--ancho),100% - var(--gut)*2);margin-inline:auto}
.as-sec{padding:clamp(2.75rem,6vw,4.5rem) 0;border-top:1px solid var(--filete)}
.as-sec__cab{max-width:54ch}
.as-sec__cab p{margin-top:var(--e4);color:var(--tinta-2)}
@media (min-width:900px){
/* la rejilla cuelga del CONTENEDOR, no de la sección: disolverlo con
     display:contents dejaba el encabezado pegado al borde de la ventana */
section.as-sec > .as-ancho{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
    gap:clamp(2rem,5vw,4rem);align-items:start}
section.as-sec > .as-ancho > .as-sec__cab{grid-column:1;grid-row:1;max-width:none;
    position:sticky;top:1.5rem}
section.as-sec > .as-ancho > *:not(.as-sec__cab){grid-column:2}
.as-sec__cab h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.1}
}

/* ══ Cabecera ══════════════════════════════════════════════════════ */
.as-barra{background:var(--base);border-bottom:1px solid var(--filete);
  position:sticky;top:0;z-index:40}
.as-nav a{color:var(--tinta-2);text-decoration:none;padding-block:var(--e1);
  box-shadow:inset 0 -1px 0 transparent;transition:color var(--t),box-shadow var(--t)}
.as-nav a:hover,.as-nav a.is-aqui{color:var(--oliva);box-shadow:inset 0 -2px 0 var(--oliva)}
.as-nav + .as-barra__acc{margin-left:0}
.as-idioma a{text-decoration:none}
.as-idioma a[aria-current]{color:var(--oliva);font-weight:700}
@media (max-width:900px){
.as-barra__acc{margin-left:auto}
}
@media (max-width:520px){
.as-barra__in{gap:var(--e4)}
}
/* ── La marca en la barra ───────────────────────────────────────
   0.826 em = 1,18 mayúsculas de esta tipografía, que mide 0.700 em.
   El min-width:0 NO sobra: los hijos de un contenedor flexible nacen
   con min-width:auto y eso le pone un suelo de 1em a la insignia,
   ignorando el ancho en silencio. */
/* 1.13em sale del arte: la marca vale 1,199 veces el alto de la palabra, y
   «Alloystone» en Host Grotesk 700 mide .945em (con la descendente de la «y»).
   La marca es 1:1, pero el ancho va igualmente en auto: así, si algún día se
   cambia el dibujo por uno de otra proporción, no queda encajonado.
   El min-height:0 no sobra: Bricks trae `svg:not([height]){min-height:1em}` y
   le ponía suelo de 20 px, así que el 0.826em declarado NUNCA se aplicó. */
.as-marca{height:1.13em;width:auto;min-width:0;min-height:0;flex:none;display:block}

/* ══ Botones ═══════════════════════════════════════════════════════ */
.as-b--oliva:hover{background:#3E4712;border-color:#3E4712}
.as-b--linea:hover{border-color:var(--oliva);color:var(--oliva)}
.as-b--alto{background:var(--alto);color:var(--oliva-ink);border-color:var(--alto)}
/* El botón que el guion del panel emite con el nombre de la casa. */
.as-b--sobre{background:var(--oliva);color:var(--oliva-ink);border-color:var(--oliva)}
.as-b--sobre:hover{background:#3E4712;border-color:#3E4712}
.as-b{min-height:var(--h-ctrl);padding-block:0;box-sizing:border-box}
.as-b--grande{min-height:var(--h-ctrl-lg);padding-block:0}
.as-b--chico{min-height:var(--h-ctrl-sm);padding-block:0}

/* ══ Campos y controles ════════════════════════════════════════════ */
.as-campo > span{display:block;font-size:.8125rem;font-weight:600;
  color:var(--tinta-2);margin-bottom:var(--e1)}
.as-campo textarea{min-height:8rem;resize:vertical}
.as-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.as-casilla input{margin-top:.2rem;flex:none;accent-color:var(--oliva)}
.as-casilla--legal a{color:var(--oliva);text-underline-offset:3px}
.as-grupo{border:0;margin:0 0 var(--e9);padding:var(--e7) 0 0;border-top:1px solid var(--filete)}
.as-grupo:first-of-type{border-top:0;padding-top:0}
.as-grupo legend{display:flex;align-items:center;gap:var(--e3);padding:0;
  font-family:var(--fd);font-weight:700;font-size:1rem}
.as-grupo__n{flex:none;width:1.65rem;height:1.65rem;border-radius:var(--redondo);
  background:var(--oliva-2);color:var(--oliva);display:grid;place-items:center;
  font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
.as-grupo__d{margin:var(--e4) 0 var(--e7);font-size:.875rem;color:var(--apoyo);max-width:54ch}
.as-par{display:grid;gap:0 var(--e7);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
.as-par{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.as-campo--sep{margin-top:var(--e7)}
.as-condiciones{margin:0 0 var(--e7);background:var(--panel);border:1px solid var(--filete);
  border-radius:var(--ctrl);padding:var(--e5) var(--e6)}
.as-condiciones li{position:relative;padding:var(--e1) 0 var(--e1) var(--e7);
  font-size:.8125rem;color:var(--tinta-2)}
.as-condiciones li::before{content:"";position:absolute;left:0;top:.95rem;
  width:6px;height:6px;border-radius:var(--redondo);background:var(--oliva)}
/* ── las dos caras: renglones con la vista previa a la DERECHA ──
   Las hermanas las ponen en dos columnas, apiladas con rótulo al
   costado, o en placas numeradas; aquí el rótulo va arriba y la
   miniatura al lado del campo. */
.as-ranura{display:grid;gap:var(--e3) var(--e7);padding:var(--e6) 0;
  border-bottom:1px solid var(--filete);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
.as-ranura{grid-template-columns:minmax(0,1fr) 8rem;align-items:start}
/* la segunda columna es de la miniatura: el rótulo y el campo van los dos
     en la primera. Sin esto el campo de archivo caía en los 8rem. */
.as-ranura__k,.as-ranura__v{grid-column:1}
}
.as-ranura:last-of-type{border-bottom:0}
.as-ranura__k{font-family:var(--fd);font-weight:700;font-size:.9375rem;margin-bottom:var(--e2)}
.as-ranura__k em{display:block;font-style:normal;font-weight:400;font-size:.75rem;color:var(--apoyo)}
.as-ranura__v input[type=file]{width:100%;font:inherit;font-size:.8125rem}
.as-ranura.is-puesta .as-ranura__k{color:var(--oliva)}
.as-ranura.is-mal .as-ranura__k{color:var(--alto)}
.as-ranura__img{width:100%;border-radius:var(--ctrl);border:1px solid var(--filete-2);
  grid-column:2;grid-row:1}
.as-ranura__pie{margin-top:var(--e2);font-size:.8125rem;color:var(--apoyo);overflow-wrap:anywhere}
.as-ranura__aviso{margin-top:var(--e5);padding:var(--e4) var(--e5);font-size:.875rem;color:var(--alto);
  background:var(--alto-2);border:1px solid var(--alto)}

/* ══ Contenedores de información ═══════════════════════════════════ */
.as-nota .as-i{flex:none;margin-top:.15rem}
.as-nota--ok{background:var(--ok-2);border-color:var(--ok)}
.as-nota--wait{background:var(--pausa-2);border-color:var(--pausa)}
.as-nota--bad{background:var(--alto-2);border-color:var(--alto)}
.as-chip--ok{color:var(--ok);background:var(--ok-2)}
.as-chip--wait{color:var(--pausa);background:var(--pausa-2)}
.as-chip--bad{color:var(--alto);background:var(--alto-2)}
.as-aviso-caja{background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);padding:clamp(1.5rem,4vw,2.4rem);max-width:44rem}
.as-aviso-caja h2{margin:var(--e4) 0;font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem)}
.as-aviso-caja p{color:var(--tinta-2);max-width:56ch}
.as-aviso-caja .as-b{margin-top:var(--e8)}
/* La tarjeta: cabecera en el color de la casa y cuerpo claro. */
.as-cuenta{background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);overflow:hidden}
.as-cuenta__cab b{font-family:var(--fd);font-weight:700;font-size:.9375rem}
.as-cuenta__cab span{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;opacity:.88}
.as-cuenta dl{margin:0}
.as-cuenta__r:last-of-type{border-bottom:0}
.as-cuenta__r--fuerte{background:var(--oliva-2)}
.as-cuenta__r--fuerte dd{color:var(--oliva)}
.as-cuenta dt{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--apoyo)}
.as-cuenta dd{margin:0;font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums}
.as-cuenta__cuerpo{padding:var(--e7)}
.as-cuenta--viva .as-cuenta__cab span{opacity:1}
.as-vacio{padding:var(--e10) var(--e8);text-align:center;color:var(--tinta-2)}
.as-vacio .as-i{margin:0 auto var(--e4);color:var(--filete-2)}
.as-vacio__d{margin-top:var(--e1);font-size:.875rem;color:var(--apoyo)}
/* ── el manifiesto de canjes: filas a filete, sin caja ──────────
   La hermana clara lo mete en una tarjeta con borde; aquí las
   filas van sueltas sobre el fondo, separadas por filete. */
.as-rueda{overflow-x:auto}
.as-tabla{width:100%;border-collapse:collapse;font-size:.875rem}
.as-tabla th{text-align:left;font-family:var(--fd);font-weight:600;font-size:.6875rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--oliva);
  padding:var(--e4) var(--e6);border-bottom:1px solid var(--filete-2);white-space:nowrap}
.as-tabla td{padding:var(--e4) var(--e6);border-bottom:1px solid var(--filete);vertical-align:middle}
.as-tabla tr:last-child td{border-bottom:0}
.as-tabla .n{font-family:var(--fd);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.as-rueda{overflow-x:auto}
.as-tabla{width:100%;border-collapse:collapse;font-size:.875rem}
.as-tabla th{text-align:left;font-family:var(--fd);font-weight:700;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--oliva);
  padding:var(--e4) var(--e6);border-bottom:2px solid var(--filete);white-space:nowrap}
.as-tabla td{padding:var(--e4) var(--e6);border-bottom:1px solid var(--filete);vertical-align:middle}
.as-tabla tr:last-child td{border-bottom:0}
.as-tabla .n{font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ══ Portada ═══════════════════════════════════════════════════════ */
.as-hero{position:relative;isolation:isolate;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.as-hero h1{margin-top:var(--e5);max-width:17ch}
/* El arco: la conversión dibujada como un paso de una cifra a otra.
   Es la pieza de esta casa; el arco no aparece en ninguna otra zona. */
.as-arco{margin-top:clamp(2.25rem,5vw,3.25rem);background:var(--panel);
  border:1px solid var(--filete);border-radius:var(--arco);
  padding:clamp(1.4rem,3.5vw,2rem);display:grid;gap:var(--e6);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:660px){
.as-arco{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
}
.as-arco__k{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--apoyo)}
.as-arco__v{margin-top:var(--e1);font-family:var(--fd);font-weight:700;
  font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.as-arco__p{display:grid;place-items:center;color:var(--oliva)}
.as-arco__p svg{width:34px;height:34px}
.as-arco__d{margin-top:var(--e1);font-size:.8125rem;color:var(--apoyo)}
@media (min-width:820px){
.as-pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--e11)}
}
.as-paso{padding:var(--e7) 0;border-top:1px solid var(--filete)}
.as-paso h3{margin:var(--e3) 0 var(--e1)}
.as-paso p{color:var(--tinta-2)}
.as-equiv b{color:var(--oliva);font-weight:700}
.as-resguardos{margin-top:var(--e9);display:grid;gap:0 var(--e11);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){
.as-resguardos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.as-resguardo{padding:var(--e7) 0;border-top:1px solid var(--filete)}
.as-resguardo h3{margin-bottom:var(--e1)}
.as-resguardo p{color:var(--tinta-2)}
.as-resguardo .as-i{color:var(--oliva);margin-bottom:var(--e4)}
@media (min-width:720px){
.as-forma{grid-template-columns:repeat(2,minmax(0,1fr))}
.as-forma__ancho{grid-column:1/-1}
.as-cambio,.as-asiento{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.as-cambio__c{background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);padding:var(--e7) 0 0}
.as-cambio dt{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--apoyo)}
.as-cambio dd{margin:var(--e1) 0 0;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);font-variant-numeric:tabular-nums}
.as-cambio dd small{font-size:.6875rem;font-weight:600;color:var(--apoyo);margin-left:var(--e1)}
.as-pestanas{display:flex;flex-wrap:wrap;gap:var(--e1);margin-bottom:var(--e6)}
.as-pestanas button b{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--apoyo)}
.as-pestanas{gap:var(--e8);border-bottom:1px solid var(--filete);margin-bottom:var(--e7)}
.as-pestanas button{display:inline-flex;align-items:center;gap:var(--e1);font:inherit;
  font-family:var(--fd);font-weight:600;font-size:.9375rem;cursor:pointer;
  background:transparent;color:var(--apoyo);border:0;border-radius:0;
  padding:var(--e3) 0 var(--e3);position:relative;transition:color var(--t)}
.as-pestanas button::before{content:"";width:6px;height:6px;border-radius:var(--redondo);
  background:var(--filete);transition:background var(--t)}
.as-pestanas button b{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--filete-2)}
.as-pestanas button:hover{color:var(--tinta-2)}
.as-pestanas button.is-on{color:var(--oliva)}
.as-pestanas button.is-on::before{background:var(--oliva)}
.as-pestanas button.is-on b{color:var(--oliva)}
/* ── La calculadora del hero ────────────────────────────────────
   Aquí había dos paneles con rótulo y cifra, la misma pieza que en
   las cinco hermanas. Ahora se escribe y se ve: es la única zona
   interactiva del conjunto, y el arco de la casa hace de paso. */
.as-calc{margin-top:clamp(2.25rem,5vw,3.25rem);background:var(--panel);
  border:1px solid var(--filete);border-radius:var(--arco);
  padding:clamp(1.3rem,3.5vw,1.9rem);display:grid;gap:var(--e6);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:680px){
.as-calc{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
}
.as-calc__e > span:first-child{display:block;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--apoyo);margin-bottom:var(--e3)}
.as-calc__campo{display:flex;align-items:center;gap:var(--e1);background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--mini);padding:var(--e2) var(--e5)}
.as-calc__campo:focus-within{border-color:var(--oliva);box-shadow:inset 0 0 0 1px var(--oliva)}
.as-calc__campo i{font-style:normal;font-family:var(--fd);font-weight:700;
  font-size:1.375rem;color:var(--apoyo)}
.as-calc__campo input{flex:1;min-width:0;border:0;background:transparent;font:inherit;
  font-family:var(--fd);font-weight:700;font-size:1.625rem;padding:.15rem 0;
  color:var(--tinta);font-variant-numeric:tabular-nums}
.as-calc__campo input:focus{outline:0}
.as-calc__campo b{font-family:var(--fd);font-weight:600;font-size:.8125rem;color:var(--apoyo)}
.as-calc__p{display:grid;place-items:center;color:var(--oliva)}
.as-calc__p svg{width:32px;height:32px}
.as-calc__k{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--apoyo);margin-bottom:var(--e3)}
.as-calc__v{display:block;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);line-height:1.15;
  color:var(--oliva);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.as-calc__nota{margin-top:var(--e6);font-size:.875rem;color:var(--apoyo);max-width:52ch}
/* ── el fondo de la casa ───────────────────────────────────────────
   Vive a la derecha de la columna de texto, en el hueco que dejan el
   titular y la entradilla —medido, no supuesto—. Debajo de 900 px no
   hay hueco y se retira.

   El corte NO es un número a ojo: es el techo de la columna de texto
   —el mayor de los topes del titular y de la entradilla, 663px— más 40 de
   respiro. Si se ensancha alguno de esos dos topes, este número sube con él. */
.as-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B6B0A5%27%20stroke-width%3D%273%27%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%27212%27%20height%3D%27212%27%20rx%3D%2752%27%2F%3E%3Crect%20x%3D%2744%27%20y%3D%2744%27%20width%3D%27152%27%20height%3D%27152%27%20rx%3D%2738%27%2F%3E%3Crect%20x%3D%2774%27%20y%3D%2774%27%20width%3D%2792%27%20height%3D%2792%27%20rx%3D%2746%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat right -52px top -46px/min(52%,470px) auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0 calc(max(var(--gut),(100% - var(--ancho))/2) + 703px),#000 calc(max(var(--gut),(100% - var(--ancho))/2) + 823px));mask-image:linear-gradient(to right,transparent 0 calc(max(var(--gut),(100% - var(--ancho))/2) + 703px),#000 calc(max(var(--gut),(100% - var(--ancho))/2) + 823px))}
@media (max-width:899px){
.as-hero::before{display:none}
}
/* ── fin del fondo ── */
/* ── las franjas ───────────────────────────────────────────────────
   Los resguardos van en bandas a todo el ancho, alternando papel, con
   la clave a la izquierda. Sin caja y sin icono: la rejilla de tarjetas
   la estaban usando cuatro casas a la vez. */
.as-franjas{margin-top:clamp(1.75rem,4vw,2.5rem);border-block:1px solid var(--filete)}
.as-franja{display:grid;gap:var(--e2);padding:1.5rem clamp(1rem,3vw,1.75rem);
  grid-template-columns:minmax(0,1fr)}
.as-franja + .as-franja{border-top:1px solid var(--filete)}
.as-franja:nth-child(odd){background:var(--panel-2)}
@media (min-width:760px){
.as-franja{grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:0 clamp(1.5rem,4vw,3rem);align-items:baseline}
}
.as-franja__k{font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--oliva);font-family:var(--fd);font-weight:600}
.as-franja__c h3{font-size:1.0625rem}
.as-franja__c p{margin-top:var(--e1);color:var(--tinta-2);max-width:62ch}
@media (min-width:960px){
.as-hero > .as-ancho{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,27rem);
    gap:0 clamp(2.5rem,6vw,4.5rem);align-items:start}
.as-hero > .as-ancho > .as-eyebrow{grid-column:1 / -1}
/* el titular se topa a 17ch: con 24ch llegaba al borde del contenedor y
     se comía la columna donde vive el dibujo del fondo, que a 6 % de techo
     no puede pasar por debajo de ningún texto */
.as-hero > .as-ancho > h1{grid-column:1 / -1;max-width:17ch;
    font-size:clamp(2.25rem,1.4rem + 2.8vw,3.75rem)}
.as-hero > .as-ancho > .as-hero__d{grid-column:1}
.as-hero > .as-ancho > .as-hero__acc{grid-column:1}
.as-hero > .as-ancho > .as-calc{grid-column:2;grid-row:3 / span 2;margin-top:var(--e7)}
/* la nota baja a la columna del texto: en la derecha llegaba al borde del
     contenedor y se metía debajo del dibujo, que a 6 % de techo no lo admite */
.as-hero > .as-ancho > .as-calc__nota{grid-column:1;max-width:46ch}
}
.as-cambio{background:transparent;border:0;border-top:2px solid var(--oliva);
  gap:0 clamp(1.5rem,4vw,3rem)}
.as-cambio__c{border-bottom:0;}
/* .gv-pregunta era rejilla sin columnas declaradas: la pista se
   dimensionaba por contenido y se salía 14px del panel. Las demás
   piezas SÍ declaran las suyas y no se tocan. */
.as-pregunta{grid-template-columns:minmax(0,1fr)}

/* ══ Acceso y alta ═════════════════════════════════════════════════ */
/* ── caja de acceso: la única con el arco, como el hero ────────── */
.as-acceso{padding:clamp(2.5rem,6vw,4.5rem) var(--gut)}
.as-acceso__caja{max-width:452px;margin-inline:auto;background:var(--panel);
  border:1px solid var(--filete);border-radius:var(--arco);
  padding:clamp(1.7rem,4vw,2.5rem)}
.as-acceso__caja--ancha{max-width:720px}
.as-acceso h1{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.as-acceso__pie a{color:var(--oliva);text-underline-offset:3px}
/* El layout va bajo [open]: un display suelto ABRE un <dialog> cerrado. */
.as-dlg{border:1px solid var(--filete);border-radius:var(--ctrl);background:var(--panel-2);
  color:var(--tinta);padding:clamp(1.3rem,3vw,1.8rem);max-width:30rem;width:calc(100% - 2rem)}
.as-dlg[open]{display:block}
.as-dlg::backdrop{background:rgba(38,35,29,.5)}
.as-dlg h2{font-size:1.25rem}
.as-dlg__d{margin:var(--e4) 0 var(--e7);color:var(--tinta-2);font-size:.9375rem}
.as-dlg__d-l{margin:0 0 var(--e8);border:1px solid var(--filete);border-radius:var(--ctrl);
  overflow:hidden}
.as-dlg__d-l > div{display:flex;justify-content:space-between;gap:var(--e6);
  padding:var(--e4) var(--e5);border-bottom:1px solid var(--filete)}
.as-dlg__d-l > div:last-child{border-bottom:0}
.as-dlg__d-l dt{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--apoyo)}
.as-dlg__d-l dd{margin:0;font-family:var(--fd);font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.as-dlg__f{display:flex;gap:var(--e3);justify-content:flex-end;flex-wrap:wrap}
.as-cerrar{flex:none;background:transparent;border:0;color:var(--tinta-2);cursor:pointer;padding:.2rem}
.as-cerrar:hover{color:var(--tinta)}
/* ── fin del hero editorial ── */
/* ── el acceso: a dos columnas ─────────────────────────────────────
   El encabezado a la izquierda y el formulario a la derecha, sin caja,
   igual que se componen las zonas de esta casa. */
.as-acceso{display:block;width:min(var(--ancho),100% - var(--gut)*2);margin-inline:auto;
  padding-block:clamp(3rem,8vw,5.5rem)}
.as-acceso__caja:not(.as-acceso__caja--ancha){max-width:none;margin:0;background:transparent;border:0;padding:0;border-radius:0}
@media (min-width:860px){
.as-acceso__caja:not(.as-acceso__caja--ancha){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
    gap:.4rem clamp(2.5rem,6vw,5rem);align-items:start}
.as-acceso__caja:not(.as-acceso__caja--ancha) > *{grid-column:2}
.as-acceso__caja:not(.as-acceso__caja--ancha) > .as-marca-agua, .as-acceso__caja:not(.as-acceso__caja--ancha) > h1, .as-acceso__caja:not(.as-acceso__caja--ancha) > .as-acceso__d{grid-column:1}
.as-acceso__caja:not(.as-acceso__caja--ancha) > h1{font-size:clamp(1.875rem,1.3rem + 2vw,2.75rem);line-height:1.1}
.as-acceso__caja:not(.as-acceso__caja--ancha) > form{grid-row:1 / span 4}
}
/* ── fin del acceso ── */
/* ── el alta: leyenda grande, sin círculo ──────────────────────────
   El grupo se anuncia con tipografía y un filete grueso, no con una
   pastilla numerada. */
.as-acceso__caja--ancha .as-grupo{border-top:0;padding-top:clamp(1.75rem,4vw,2.5rem);
  margin-bottom:var(--e8)}
.as-acceso__caja--ancha .as-grupo legend{width:100%;align-items:baseline;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);line-height:1.15;
  padding-bottom:var(--e4);border-bottom:3px solid var(--oliva);margin-bottom:var(--e7)}
.as-acceso__caja--ancha .as-grupo__n{background:transparent;color:var(--apoyo);
  border-radius:0;width:auto;height:auto;font-size:.75rem;letter-spacing:.14em;
  display:inline}

/* ══ Panel con sesion ══════════════════════════════════════════════ */
.as-app__cab--centro{justify-content:center;text-align:center}
.as-app__cab h1{margin-top:var(--e3)}
.as-app__d{margin-top:var(--e4);color:var(--tinta-2);max-width:58ch}
.as-app__pie{margin-top:var(--e5);text-align:center;font-size:.8125rem;color:var(--apoyo)}
.as-app__acc{display:grid;gap:var(--e4);grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:var(--e8);padding-top:var(--e8);border-top:1px solid var(--filete)}
@media (min-width:1000px){
.as-escritorio{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.as-monto:focus-within{border-color:var(--oliva);box-shadow:0 0 0 3px var(--oliva-2)}
.as-rapidos{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e3)}
.as-pista{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e6);
  margin-top:var(--e1);font-size:.8125rem;color:var(--apoyo)}
.as-pista b{font-variant-numeric:tabular-nums;font-weight:700;flex:none}
[data-billetera].is-ok input{border-color:var(--ok)}
[data-billetera].is-ok .as-pista{color:var(--ok)}
[data-billetera].is-warn input{border-color:var(--pausa)}
[data-billetera].is-warn .as-pista{color:var(--pausa)}
[data-billetera].is-mal input{border-color:var(--alto)}
[data-billetera].is-mal .as-pista{color:var(--alto)}
.as-cargando{padding:var(--e9);text-align:center;color:var(--apoyo);font-size:.875rem}
.as-codigo{display:flex;gap:var(--e2);justify-content:center;margin-bottom:var(--e7)}
.as-codigo input:focus{outline:0;border-color:var(--oliva);box-shadow:0 0 0 3px var(--oliva-2)}
.as-codigo input{width:2.9rem;height:3.4rem;text-align:center;font-family:var(--fd);
  font-weight:700;font-size:1.5rem;color:var(--tinta);background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--mini);
  font-variant-numeric:tabular-nums;transition:border-color var(--t),box-shadow var(--t)}
.as-codigo input:focus{outline:0;border-color:var(--oliva);box-shadow:inset 0 0 0 1px var(--oliva)}
.as-codigo input.is-puesta{border-color:var(--oliva);background:var(--oliva-2)}
@media (min-width:1000px){
.as-escritorio > :first-child{grid-column:1 / 3;order:2}
.as-escritorio > :nth-child(2){grid-column:1 / -1;order:1}
}

/* ══ Paginas legales y prosa ═══════════════════════════════════════ */
.as-doc{display:block;padding:var(--e3) var(--e4);background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);font-size:.8125rem;color:var(--oliva);text-decoration:none}
.as-doc:hover{border-color:var(--oliva)}
.as-legal__in{max-width:68ch}
.as-legal__fecha{margin:var(--e3) 0 var(--e9);font-size:.875rem;color:var(--apoyo)}
.as-prosa h2{margin:2.2rem 0 var(--e3);font-size:1.375rem}
.as-prosa h3{margin:var(--e8) 0 var(--e2);font-size:1.0625rem}
.as-prosa p,.as-prosa li{color:var(--tinta-2);margin-bottom:var(--e5)}
.as-prosa ul,.as-prosa ol{margin:0 0 var(--e7) var(--e7);list-style:disc}
.as-prosa ol{list-style:decimal}
.as-prosa a{color:var(--oliva);text-underline-offset:3px}
.as-prosa table{width:100%;border-collapse:collapse;margin-bottom:var(--e7)}
.as-prosa th,.as-prosa td{border:1px solid var(--filete);padding:var(--e3) var(--e4);text-align:left}

/* ══ Tienda ════════════════════════════════════════════════════════ */
.as-woo a{color:var(--oliva)}
.as-woo .button{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-weight:600;background:var(--oliva);color:var(--oliva-ink);
  border:1px solid var(--oliva);border-radius:var(--ctrl);padding:var(--e4) var(--e7);text-decoration:none}
.as-woo input,.as-woo select,.as-woo textarea{font:inherit;background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--ctrl);padding:var(--e4) var(--e5)}

/* ══ Pie ═══════════════════════════════════════════════════════════ */
@media (min-width:820px){
.as-pie__in{grid-template-columns:1.6fr 1fr 1fr}
}
/* El tamaño lo fija más abajo el `clamp`: el rótulo del pie es una pieza
   grande de cierre, no la repetición pequeña del de la barra. Aquí queda
   sólo el margen; declarar un `font-size` que nunca gana confunde a quien
   venga a cambiarlo. */
.as-pie__marca .as-logo{margin-bottom:var(--e3)}
.as-pagos li{font-size:.75rem;color:var(--apoyo);border:1px solid var(--filete);
  padding:var(--e1) var(--e3)}
.as-pie__col h2{font-family:var(--fd);font-size:.8125rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oliva);margin-bottom:var(--e4)}
.as-pie__col li{margin-bottom:var(--e1)}
.as-pie__col a{color:var(--tinta-2);text-decoration:none}
.as-pie__col a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.as-pie__cierre p{margin:0}
/* el pie termina con el nombre en grande */
/* Aquí el pie SÍ va por encima de la cabecera, y a propósito: no es la
   repetición pequeña de la marca sino un rótulo grande de cierre, la única
   de las seis casas que lo hace así. Sube un escalón con la misma forma de
   rampa que traía —del mínimo al máximo entre 426 y 1226 px de ventana—:
   de 32-56 px a 36-64. Medido: la pieza pasa de 318,6 a 364,1 px y el punto
   más justo sigue siendo 1024 px, donde quedan 67 px libres en su columna. */
.as-pie__marca .as-logo{font-size:clamp(2.25rem,1.32rem + 3.5vw,4rem)}

/* ══ Resto ═════════════════════════════════════════════════════════ */
.as-angosto{max-width:38rem}
[data-monto-msg].is-mal{color:var(--alto)}
.as-sobre-rotulo{text-align:center;font-family:var(--fd);font-weight:600;
  font-size:.8125rem;margin-bottom:var(--e4)}
.as-sobre-chip{margin-left:auto;font-family:var(--fd);font-weight:700;font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--oliva);
  background:var(--oliva-2);border-radius:var(--redondo);padding:var(--e1) var(--e4)}
.as-herramientas{display:flex;flex-wrap:wrap;gap:var(--e3);margin-bottom:var(--e6)}
.as-buscar{display:flex;align-items:center;gap:var(--e2);flex:1;min-width:14rem;
  background:var(--panel-2);border:1px solid var(--filete-2);border-radius:var(--ctrl);padding:0 var(--e5)}
.as-buscar .as-i{flex:none;color:var(--apoyo)}
.as-buscar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;padding:var(--e3) 0}
.as-buscar input:focus{outline:0}
.as-buscar:focus-within{border-color:var(--oliva)}
.as-paginador{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e3);padding:var(--e5) var(--e7);border-top:1px solid var(--filete);
  font-size:.8125rem;color:var(--apoyo)}
.as-paginador > div{display:flex;gap:var(--e2)}
.as-velo{position:fixed;inset:0;background:rgba(38,35,29,.45);opacity:0;visibility:hidden;
  transition:opacity var(--paso),visibility var(--paso);z-index:60}
.as-velo.is-on{opacity:1;visibility:visible}
.as-cajon{position:fixed;top:0;right:0;bottom:0;width:min(34rem,100%);z-index:61;
  background:var(--base);border-left:1px solid var(--filete-2);display:flex;
  flex-direction:column;transform:translateX(100%);transition:transform var(--paso) ease;overflow:hidden}
.as-cajon.is-on{transform:none}
.as-cajon__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e6);
  padding:var(--e7) var(--e7);border-bottom:1px solid var(--filete);background:var(--panel-2)}
.as-cajon__cab h2{font-size:1.125rem}
.as-cajon__cab p{margin-top:.2rem;font-size:.875rem;color:var(--apoyo)}
.as-cajon__cuerpo{flex:1;overflow-y:auto;padding:var(--e7)}
.as-cajon__pie{padding:var(--e6) var(--e7);border-top:1px solid var(--filete);background:var(--panel-2);
  display:flex;flex-wrap:wrap;gap:var(--e2)}
.as-block{margin-bottom:var(--e8)}
.as-block h3{font-family:var(--fd);font-size:.75rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--oliva);margin-bottom:var(--e3)}
.as-docs{display:grid;gap:var(--e2);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.as-qa > div{display:flex;justify-content:space-between;gap:var(--e6);padding:var(--e3) 0;
  border-bottom:1px solid var(--filete);font-size:.875rem}
.as-qa dt{color:var(--apoyo)}
.as-qa dd{margin:0;text-align:right}
.as-log{font-size:.8125rem;color:var(--tinta-2)}
.as-log li{padding:var(--e1) 0;border-bottom:1px solid var(--filete)}
.as-decision{padding:var(--e3) var(--e5);font-size:.875rem;border:1px solid var(--filete);
  border-radius:var(--ctrl);background:var(--panel-2)}
.as-decision--wait{border-color:var(--pausa);background:var(--pausa-2)}
.as-spin{display:inline-block;width:1rem;height:1rem;border:2px solid var(--filete);
  border-top-color:var(--oliva);border-radius:50%;animation:as-gira .7s linear infinite}
.as-ranuras{border-top:1px solid var(--filete-2);padding-top:var(--e1)}