/* =========================================================
   Anhelo — Members y cuenta

   Dos pantallas que hasta ahora no se parecían a nada: la página del programa
   para alguien que todavía no tiene cuenta, y el formulario de iniciar sesión.

   La de iniciar sesión estaba suelta en una página en blanco, sin fondo, sin
   marco y sin decir adónde se entra. La de Members le mostraba a un visitante
   las mismas tablas que a un socio —puntos por cada mil pesos, envíos por año,
   la letra chica entera— y no le daba ningún motivo para crear la cuenta.

   Acá las dos entran en el mismo material que el resto del sitio: vidrio sobre
   el papel con degradado, esquina redondeada, el brillo de 1px arriba.

   Lo que se le muestra a un visitante, y por qué: la tarjeta que todavía no es
   suya, cuatro promesas grandes y los nombres de los niveles. Lo que se le
   esconde es el detalle operativo, que no vende y se lee después. Los canjes
   NO se esconden: si no ve qué se lleva, no tiene motivo para registrarse.

   Esta hoja carga solo en la página de Members y en las de cuenta.
   ========================================================= */

/* Las variables cuelgan de las clases que el marcado usa de verdad.

   En la v1 estaban en `.an-mem`, una clase que no existe en ninguna parte: la
   seccion es `.an-members` y la de cuenta `.an-login`. Resultado medido el 14
   de octubre de 2026: `background: var(--mem-ink)` con la variable sin definir
   es una declaracion invalida, asi que las tarjetas de las promesas y el
   cartel del candado quedaron sin fondo y sin borde. Se veia el texto suelto
   sobre el papel. */
.an-members,
.an-login,
.an-mem-bg {
  --mem-paper:   #f8f5f6;
  --mem-paper-2: #f2edef;
  --mem-ink:     #111111;
  --mem-text:    #595959;
  --mem-mute:    #8c8588;
  --mem-line:    rgba(17, 17, 17, .10);
  --mem-pill:    rgba(17, 17, 17, .07);
  --mem-ease:    cubic-bezier(.22, 1, .36, 1);
}

/* Los cinco metales. Cada nivel trae su fondo y el color de texto que se lee
   encima: bronce, oro y black son oscuros y piden blanco; plata y diamante son
   claros y piden tinta. */
.an-mem-t0 { --metal: linear-gradient(142deg, #a9724e 0%, #7a4a30 38%, #5d3824 62%, #9c6845 100%); --on: #fff; --on-soft: rgba(255,255,255,.62); --swatch: #8c5a3c; }
.an-mem-t1 { --metal: linear-gradient(142deg, #e2e4e6 0%, #a8acb1 38%, #8b8f95 62%, #cfd2d5 100%); --on: #1a1c1e; --on-soft: rgba(26,28,30,.58); --swatch: #adb1b6; }
.an-mem-t2 { --metal: linear-gradient(142deg, #e8ca63 0%, #b8922a 38%, #8f6d13 62%, #dcb947 100%); --on: #2a2208; --on-soft: rgba(42,34,8,.58); --swatch: #c9a227; }
.an-mem-t3 { --metal: linear-gradient(142deg, #eef5f8 0%, #b6cbd8 36%, #8fa9bb 62%, #dde9ef 100%); --on: #16222a; --on-soft: rgba(22,34,42,.56); --swatch: #b6cbd8; }
.an-mem-t4 { --metal: linear-gradient(142deg, #34383a 0%, #15181a 40%, #0a0c0d 64%, #26292b 100%); --on: #fff; --on-soft: rgba(255,255,255,.58); --swatch: #1b1e20; }

/* El fondo con degradado va en el CUERPO, no en la sección.

   Lo tenía colgado de `.an-mem-bg`, que es la sección del programa, y esa
   sección tiene un ancho máximo de 1340px centrado. Resultado en una pantalla
   más ancha: el degradado terminaba a los 1340px y a los costados quedaba el
   blanco del tema, una franja a cada lado. Medido el 14 de octubre de 2026.

   Esta hoja carga únicamente en Members y en las páginas de cuenta, así que
   pintar el cuerpo entero acá no toca ninguna otra página del sitio.

   `fixed` deja el degradado quieto mientras se scrollea: el fondo es el
   ambiente de la página, no una pieza que se desplaza con el contenido. */
body {
  background:
    radial-gradient(90% 60% at 12% 0%, #fdfbfc 0%, transparent 60%),
    radial-gradient(70% 50% at 100% 18%, #f0eaec 0%, transparent 65%),
    linear-gradient(170deg, #f8f5f6 0%, #f2edef 58%, #f8f5f6 100%);
  background-attachment: fixed;
}

/* La clase queda en el marcado porque es la que lleva las variables de color.
   El fondo ya no se dibuja acá. */
.an-mem-bg { background: none; }

/* ── La pieza de vidrio ───────────────────────────────────────────────── */

.an-mem-card {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 10px rgba(17, 17, 17, .05);
}

.an-mem-eyebrow {
  margin: 0 0 4px;
  color: var(--mem-mute);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ═════════════════════════════════════════════════════════════════════
   LA TARJETA QUE TODAVÍA NO ES SUYA
   ═════════════════════════════════════════════════════════════════════

   Es la pieza que hace el trabajo. Una tarjeta con la proporción de una
   tarjeta real, en negro apagado, con el candado en el medio, los puntos en
   guiones y "TU NOMBRE" donde iría el del titular. Dice "esto existe y no es
   tuyo" sin escribirlo. */

.an-mem-wallet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

@media (min-width: 840px) {
  .an-mem-wallet { grid-template-columns: minmax(0, 400px) 1fr; gap: 28px; }
}

.an-mem-plastic {
  position: relative;
  aspect-ratio: 1.586 / 1;          /* la proporción de una tarjeta real */
  padding: clamp(18px, 3.2vw, 24px);
  border-radius: 16px;
  background: var(--metal, linear-gradient(142deg, #3a3e40 0%, #191d1e 42%, #0d0f10 66%, #2b2f31 100%));
  color: var(--on, #fff);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 36px rgba(17, 17, 17, .26);
}

/* El brillo diagonal. Es lo que separa "rectángulo de color" de "metal". */
.an-mem-plastic::after {
  content: "";
  position: absolute;
  inset: -45% -20% auto -40%;
  height: 190%;
  background: linear-gradient(104deg, transparent 32%, rgba(255, 255, 255, .34) 48%, transparent 62%);
  pointer-events: none;
}

.an-mem-plastic__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.an-mem-plastic__brand { margin: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.an-mem-plastic__tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* El chip. Sin él la pieza es un rectángulo oscuro; con él, una tarjeta. */
.an-mem-chip {
  width: 34px; height: 26px;
  margin: clamp(10px, 2vw, 16px) 0 0;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.25));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.an-mem-chip span {
  display: block; height: 100%; border-radius: 5px;
  background:
    linear-gradient(to right, transparent 32%, rgba(0,0,0,.16) 32%, rgba(0,0,0,.16) 34%, transparent 34%),
    linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.16) 32%, transparent 32%, transparent 64%, rgba(0,0,0,.16) 64%, rgba(0,0,0,.16) 66%, transparent 66%);
}

.an-mem-plastic__lock {
  position: absolute; top: 50%; left: 50%;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%);
}
.an-mem-plastic__lock svg { width: 18px; height: 18px; color: rgba(255, 255, 255, .8); }

.an-mem-plastic__pts { position: absolute; right: clamp(18px,3.2vw,24px); bottom: clamp(52px,8vw,62px); left: clamp(18px,3.2vw,24px); }
.an-mem-plastic__pts b {
  display: block;
  font-family: inherit;
  font-size: clamp(27px, 5.6vw, 38px); font-weight: 700;
  letter-spacing: .01em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.an-mem-plastic__pts span { display: block; margin-top: 4px; color: var(--on-soft, rgba(255,255,255,.5)); font-size: 8.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.an-mem-plastic__foot { position: absolute; right: clamp(18px,3.2vw,24px); bottom: clamp(16px,2.6vw,20px); left: clamp(18px,3.2vw,24px); display: flex; justify-content: space-between; gap: 12px; }
.an-mem-plastic__foot span { display: block; color: var(--on-soft, rgba(255,255,255,.5)); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.an-mem-plastic__foot b { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }

/* Sin dueño: los puntos en guiones y un gris sin brillo. */
.an-mem-plastic--vacia .an-mem-plastic__pts b { color: rgba(255, 255, 255, .3); }

/* El costado. Es donde va lo que la tarjeta no puede decir sin dejar de
   parecer una tarjeta: el titular, la promesa y los dos botones. */
/* El selector lleva el padre adelante porque perdia contra mi propia regla de
   parrafos de dos lineas mas abajo: `.an-mem-pitchside p` pesa mas que
   `.an-mem-h1`, asi que el titular de la vista del visitante salia a 13,5px
   —el cuerpo del texto— en una tipografia de titular. Medido el 14 de octubre
   de 2026. */
.an-members .an-mem-pitchside p.an-mem-h1,
.an-login__aside .an-mem-h1,
.an-mem-h1 {
  margin: 0 0 8px;
  color: var(--mem-ink);
  font-family: inherit;
  max-width: 18ch;
  font-size: clamp(25px, 4.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-transform: none;
}
.an-mem-pitchside p { margin: 0 0 18px; max-width: 40ch; color: var(--mem-text); font-size: 13.5px; line-height: 1.5; }
.an-mem-pitchside p b { color: var(--mem-ink); }

.an-mem-cta { display: flex; flex-wrap: wrap; gap: 9px; }

.an-mem-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px;
  border: 1px solid var(--mem-ink); border-radius: 999px;
  background: var(--mem-ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: opacity .2s var(--mem-ease), background .2s var(--mem-ease), color .2s var(--mem-ease);
}
.an-mem-btn:hover { color: #fff; opacity: .85; }
.an-mem-btn--ghost { background: transparent; color: var(--mem-ink); }
.an-mem-btn--ghost:hover { background: var(--mem-pill); color: var(--mem-ink); opacity: 1; }
.an-mem-btn--block { width: 100%; }

/* El aire entre bloques.

   La seccion es un `display: block` del tema y sus hijos no traen margenes
   propios: en la maqueta esto era una columna flex con `gap`, aca hay que
   escribirlo. Sin esto la tarjeta, las promesas y los niveles quedaban pegados
   uno contra otro. */
.an-members > .an-mem-wallet,
.an-members > .an-mem-pitch,
.an-members > .an-mem-locked { margin-bottom: clamp(26px, 4vw, 44px); }

.an-members > .an-mem-wallet { margin-bottom: clamp(30px, 4.5vw, 50px); }

/* ── Las cuatro promesas ──────────────────────────────────────────────── */

.an-mem-pitch { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.an-mem-pitch div { padding: 16px 17px; border: 1px solid var(--mem-line); border-radius: 15px; background: rgba(255, 255, 255, .5); }
.an-mem-pitch b {
  display: block;
  font-family: inherit;
  font-size: 23px; font-weight: 700;
  color: var(--mem-ink); line-height: 1; letter-spacing: -.01em;
}
.an-mem-pitch p { margin: 8px 0 0; color: var(--mem-text); font-size: 12.5px; line-height: 1.45; }

/* ── Los niveles, a la vista pero cerrados ────────────────────────────── */

.an-mem-locked { position: relative; }

/* El desenfoque es el argumento: se ve que hay algo y no se ve qué. Con la
   tabla completa a la vista, crear la cuenta no agrega nada. */
.an-mem-locked .an-members__perks,
.an-mem-locked .an-members__tier-rate {
  filter: blur(4px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

.an-mem-locked__over { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.an-mem-locked__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--mem-ink); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .22);
}
.an-mem-locked__chip svg { flex: 0 0 auto; width: 13px; height: 13px; }

/* ═════════════════════════════════════════════════════════════════════
   INICIAR SESIÓN
   ═════════════════════════════════════════════════════════════════════

   El formulario del tema no se toca: sus campos, su validación y sus avisos
   siguen siendo los mismos. Lo que cambia es el marco —entra en una pieza de
   vidrio— y lo que hay al lado, que es lo que faltaba: decir adónde se entra.

   El orden en celular lo decide el DOM, así que el texto va primero en el
   marcado y la columna del formulario después. En escritorio se invierten con
   grid, porque ahí el formulario pide estar a la derecha. */

.an-login { padding: clamp(26px, 5vw, 56px) 0 clamp(40px, 7vw, 80px); }

.an-login__box { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }

@media (min-width: 840px) {
  .an-login__box { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; }
}

.an-login__aside .an-mem-h1 { margin: 0 0 8px; }
.an-login__aside > p { margin: 0 0 20px; max-width: 42ch; color: var(--mem-text); font-size: 13.5px; }

.an-login__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.an-login__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--mem-ink); font-size: 12.5px; line-height: 1.4; }
.an-login__list svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Los campos del tema, con la forma del resto del sitio. */
.an-login .form-control,
.an-login input[type="email"],
.an-login input[type="password"],
.an-login input[type="text"] {
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--mem-line) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: var(--mem-ink);
  font-size: 14px;
  transition: border-color .2s var(--mem-ease), background .2s var(--mem-ease);
}

.an-login .form-control:focus,
.an-login input:focus {
  outline: 0;
  border-color: var(--mem-ink) !important;
  background: #fff !important;
  box-shadow: none;
}

.an-login label,
.an-login .form-label {
  margin-bottom: 6px;
  color: var(--mem-mute);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.an-login .btn-primary {
  min-height: 48px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.an-login .btn-link,
.an-login .btn-link-primary { color: var(--mem-ink); font-weight: 600; }

/* El enlace de contraseña olvidada: a la derecha, chico y sin pelear con el
   botón negro que va justo abajo. */
.an-login .float-right { color: var(--mem-mute) !important; font-size: 11.5px !important; }

.an-login .alert { border-radius: 13px; }

/* En celular el texto va arriba y el formulario abajo, que es el orden en que
   se lee: primero por qué, después el trámite. */
@media (max-width: 839px) {
  .an-login__aside { order: -1; }
}


/* =========================================================
   v3 — EL LADO DEL SOCIO
   =========================================================

   La misma información de siempre, con la forma que se aprobó en la maqueta:
   la tarjeta con el metal del nivel, la escalera que se toca, el simulador y
   los canjes con su progreso.

   Nada de esto cambia los datos ni el canje: los números siguen llegando de la
   Edge Function y el botón de canjear sigue siendo el mismo.
   ========================================================= */

/* El bloque de estado era una tarjeta de vidrio con su propio fondo y padding.
   Ahora es la grilla que sostiene la tarjeta y su costado, así que hay que
   sacarle lo que traía del tema o quedan dos marcos, uno adentro del otro. */
.an-members__status.an-mem-wallet {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ── El costado de la tarjeta ─────────────────────────────────────────── */

.an-mem-side { display: flex; flex-direction: column; gap: 4px; }
.an-mem-side__k { margin: 0; color: var(--mem-mute); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.an-mem-side__v { margin: 0 0 11px; color: var(--mem-ink); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.an-mem-side__note { margin: 14px 0 0; color: var(--mem-mute); font-size: 12px; line-height: 1.5; }

.an-mem-side .an-members__bar { margin: 0; }
.an-mem-side .an-members__next { margin: 9px 0 0; color: var(--mem-mute); font-size: 12.5px; }
.an-mem-side .an-members__next strong { color: var(--mem-ink); }

/* ── La escalera ──────────────────────────────────────────────────────── */

.an-mem-ladder {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.an-mem-ladder::-webkit-scrollbar { display: none; }

.an-mem-step {
  flex: 1 1 0;
  min-width: 128px;
  padding: 12px 13px 13px;
  border: 1px solid var(--mem-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .5);
  color: var(--mem-mute);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s var(--mem-ease), background .22s var(--mem-ease), color .22s var(--mem-ease);
}
.an-mem-step:hover { border-color: rgba(17, 17, 17, .28); color: var(--mem-ink); }
.an-mem-step[aria-selected="true"] { border-color: var(--mem-ink); background: var(--mem-ink); color: #fff; }
.an-mem-step:focus-visible { outline: 2px solid var(--mem-ink); outline-offset: 2px; }

.an-mem-step__n { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

/* El punto del metal: es lo que ata cada escalón a su tarjeta. */
.an-mem-step__dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--swatch, #999);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

.an-mem-step__m { display: block; margin-top: 4px; font-size: 10px; opacity: .72; font-variant-numeric: tabular-nums; }
.an-mem-step__you { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.an-mem-step:not([aria-selected="true"]) .an-mem-step__you { background: var(--mem-pill); color: var(--mem-ink); }

/* ── Los beneficios del nivel elegido ─────────────────────────────────── */

.an-mem-perks__panel[hidden] { display: none; }
.an-mem-perks__rate { margin: 0 0 10px; color: var(--mem-ink); font-size: 13px; font-weight: 700; }
.an-mem-perks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }

.an-mem-perk {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--mem-line); border-radius: 13px;
  background: rgba(255, 255, 255, .46);
}
.an-mem-perk svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--mem-ink); }
.an-mem-perk p { margin: 0; color: var(--mem-ink); font-size: 12.5px; line-height: 1.4; }

/* ── El simulador ─────────────────────────────────────────────────────── */

.an-mem-sim {
  margin-top: clamp(26px, 4vw, 44px);
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 10px rgba(17, 17, 17, .05);
}

.an-mem-sim__h { margin: 0 0 16px; color: var(--mem-ink); font-size: clamp(16px, 2.2vw, 19px); font-weight: 700; letter-spacing: -.01em; }
.an-mem-sim__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.an-mem-sim__amount {
  font-family: inherit;
  font-size: clamp(25px, 4.6vw, 36px); font-weight: 700;
  color: var(--mem-ink); letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.an-mem-sim__lbl { color: var(--mem-mute); font-size: 11.5px; }

/* La etiqueta existe para quien usa lector de pantalla; en la pantalla el
   número grande de arriba ya dice qué es. */
.an-mem-sim__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.an-mem-sim__range { width: 100%; margin: 0 0 18px; accent-color: #111; }

.an-mem-sim__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.an-mem-out { padding: 13px 15px; border: 1px solid var(--mem-line); border-radius: 13px; background: rgba(255, 255, 255, .46); }
.an-mem-out span { display: block; color: var(--mem-mute); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.an-mem-out b { display: block; margin-top: 6px; color: var(--mem-ink); font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.an-mem-out small { display: block; margin-top: 3px; color: var(--mem-mute); font-size: 11px; }

/* ── Lo próximo que desbloqueás ───────────────────────────────────────── */

.an-mem-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  padding: clamp(16px, 2.6vw, 22px);
  border: 1px solid var(--mem-ink);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}
.an-mem-next[hidden] { display: none; }

@media (min-width: 620px) { .an-mem-next { grid-template-columns: 1fr auto; } }

.an-mem-next__k { margin: 0 0 5px; color: var(--mem-mute); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.an-mem-next__t {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: clamp(20px, 3.4vw, 28px); font-weight: 700;
  color: var(--mem-ink); letter-spacing: -.01em; line-height: 1;
}
.an-mem-next__bar { position: relative; height: 5px; border-radius: 999px; background: var(--mem-pill); overflow: hidden; }
.an-mem-next__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--mem-ink); }
.an-mem-next__n { margin: 9px 0 0; color: var(--mem-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.an-mem-next__n b { color: var(--mem-ink); }
.an-mem-next__badge { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 999px; background: var(--mem-ink); color: #fff; text-align: center; }
.an-mem-next__badge b { display: block; font-family: inherit; font-size: 21px; font-weight: 700; line-height: 1; }
.an-mem-next__badge span { display: block; margin-top: 3px; font-size: 7.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

/* ── Los canjes ───────────────────────────────────────────────────────── */

/* Eran nueve fichas iguales con el costo en letra chica. Ahora cada una lidera
   con sus puntos, lleva su barra de cuánto falta abajo, y la que ya se puede
   pedir se da vuelta en negro: el mismo gesto con el que el sitio dice "esto
   es la acción". Un bloque de tarjetas negras entre las claras se ve de lejos. */
.an-members .an-members__reward {
  position: relative;
  overflow: hidden;
  padding-bottom: 18px;
  border: 1px solid var(--mem-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .5);
  transition: transform .22s var(--mem-ease), border-color .22s var(--mem-ease);
}
.an-members .an-members__reward:hover { transform: translateY(-2px); border-color: rgba(17, 17, 17, .32); }

/* Los puntos.

   Pasaron por tres formas hasta esta. Eran una pastilla negra con texto
   blanco; al sacarles el fondo quedaron negro sobre negro; y en Archivo Black
   pesaban demasiado: "500.000 pts" en una tipografía de titular, repetido
   nueve veces en una grilla, se comía al nombre del premio que va justo abajo.

   Esto no es un titular: es un dato. Va en la misma Karla que el resto, en
   negrita y con el tracking cerrado, que es como se compone un número que hay
   que leer de un vistazo.

   Toda la sección terminó componiéndose así. Archivo Black convivía mal con
   los títulos de sección del tema, que son Karla en mayúscula a 40px: quedaban
   dos voces de título en la misma página, una de la casa y otra mía. */
.an-members .an-members__reward-pts {
  /* Sin align-self: con flex-start la caja se encogia al ancho del numero y
     quedaba contra el borde izquierdo mientras el nombre del premio, abajo,
     seguia centrado. Dos alineaciones distintas en la misma tarjeta. */
  display: block;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--mem-ink);
  letter-spacing: -.025em;
  line-height: 1.1;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.an-members .an-members__reward-name { color: var(--mem-ink); font-size: 12px; font-weight: 600; line-height: 1.3; }

/* Cuánto falta y la barra: las dos piezas YA EXISTÍAN en el tema.

   En la v3 agregué las mías encima y quedaron los dos textos, uno abajo del
   otro: "te faltan 2.000 pts" en minúscula y "TE FALTAN 2.000" en mayúscula.
   Error mío por no mirar qué traía el marcado antes de escribir. Ahora el JS
   escribe en las del tema y acá solo se las viste. */
.an-members .an-members__reward-state {
  display: block;
  margin: 6px 0 0;
  color: var(--mem-mute);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.an-members .an-members__reward-bar {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  height: 3px;
  background: var(--mem-pill);
}
.an-members .an-members__reward-bar-fill {
  display: block;
  height: 100%;
  background: var(--mem-ink);
  transition: width .6s var(--mem-ease);
}

.an-members .an-members__reward.is-reachable { border-color: var(--mem-ink); background: var(--mem-ink); }
.an-members .an-members__reward.is-reachable .an-members__reward-pts,
.an-members .an-members__reward.is-reachable .an-members__reward-name { color: #fff; }
.an-members .an-members__reward.is-reachable .an-members__reward-icon { color: #fff; }
.an-members .an-members__reward.is-reachable .an-members__reward-bar { background: rgba(255, 255, 255, .22); }
.an-members .an-members__reward.is-reachable .an-members__reward-bar-fill { background: #fff; }

/* El recuadro del ícono venía en gris oscuro, de cuando la tarjeta entera era
   oscura. Sobre la tarjeta clara pesaba más que el premio. */
.an-members .an-members__reward-media {
  background: rgba(17, 17, 17, .05);
  border-radius: 11px;
}
.an-members .an-members__reward-icon { color: var(--mem-ink); }

.an-members .an-members__reward.is-reachable .an-members__reward-media {
  background: rgba(255, 255, 255, .12);
}
.an-members .an-members__reward.is-reachable .an-members__reward-state {
  color: rgba(255, 255, 255, .7);
}

/* El botón de canjear, invertido sobre la tarjeta negra. */
.an-members .an-members__reward.is-reachable .an-members__reward-btn {
  border-color: #fff;
  background: #fff;
  color: var(--mem-ink);
}