/* ============================================================
   tengo — sistema web calibrado contra getmeru.com
   Lo que cambia respecto a todo lo anterior: la ESCALA.
   El titular gigante aparece 3 veces en toda la página, no en
   cada sección. El título de módulo vive en 34px, no en 88px.
   ============================================================ */

:root {
  /* Escala medida contra Meru, no inventada */
  --sx-hero:     clamp(40px, 5.4vw, 68px);
  --sx-claim:    clamp(32px, 4.4vw, 56px);
  --sx-modtitle: clamp(26px, 2.6vw, 34px);   /* el que más se usa */
  --sx-rowlabel: 17px;
  --sx-body:     16px;
  --sx-sm:       14px;   /* notas y letra chica. Faltaba: tres reglas del bloque
                            de lista de espera pedían var(--sx-sm) y, al no existir,
                            la declaración entera se descartaba y el texto heredaba
                            16px. Medido en vivo: .sx-pedir__nota y .sx-wait__ya
                            salían a 16 contra los 14 del pie de página. */
  --sx-modsub:   18px;

  /* El aire es parte del diseño */
  --sx-gap:      clamp(48px, 6vw, 96px);
}

.sx { overflow-x: clip; }

/* ══════════ NAV ══════════ */
.sx-nav { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--tengo-bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sx-nav .wrap { display: flex; align-items: center; gap: var(--tengo-space-lg); min-height: 82px; }
.sx-mark { display: inline-flex; align-items: center; line-height: 1; min-height: 44px; }
.sx-mark span {font-weight: var(--tengo-weight-bold); letter-spacing: -0.03em; color: var(--tengo-primary); }
.sx-nav__links { display: flex; gap: var(--tengo-space-lg); margin-left: auto; }
.sx-nav__links a { font-size: var(--sx-body); font-weight: var(--tengo-weight-medium); color: var(--tengo-text-primary); }
.sx-nav__links a:hover { color: var(--tengo-primary); text-decoration: none; }
/* "Empresas" todavía no existe como sección. Se ve apagado y no responde al
   hover, igual que en el burger. Antes se veía IDÉNTICO a los enlaces que
   funcionan —mismo color, cursor: pointer, focalizable— y apuntaba a
   #empresas, un id que no está en la página: el clic cambiaba la URL a
   /#empresas y no pasaba nada. El <a> ya no lleva href, así que no navega ni
   recibe foco; esto es solo para que además se VEA que no está disponible. */
.sx-nav__links a[aria-disabled="true"] { color: var(--tengo-text-secondary); cursor: default; }
.sx-nav__links a[aria-disabled="true"]:hover { color: var(--tengo-text-secondary); }
@media (max-width: 700px)  { .sx-login { display: none; } }
/* La marquesina es más ancha que la pantalla a propósito: el contenedor la recorta */
.sx-flags { max-width: 100%; }
.sx-flags__track { will-change: transform; }

/* ══════════ HERO — texto a la izquierda, billetera a la derecha ══════════ */
.sx-hero {position: relative; isolation: isolate; }
.sx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 940px) {
  /* En móvil el hero se reordena pieza por pieza: titular, bajada, la
     captura, y recién ahí el botón. `display: contents` disuelve la columna
     de texto para que sus tres hijos compitan por el orden con el teléfono,
     que vive en la otra columna.
     El teléfono ya no va primero del todo: el titular arrancaba fuera de la
     primera pantalla y se abría el sitio con una captura sin contexto. Pero
     tampoco va último: el botón pasó abajo de la captura por decisión del
     founder (2026-09-16) — en celular la página pedía la invitación
     mostrando apenas una franja de app. Se lee, se ve el producto, se pide.
     Los cuatro llevan `order` explícito: el que no lo declara cae en
     order:0 y se va arriba del titular. Ya pasó una vez. */
  .sx-hero__grid { display: flex; flex-direction: column; }
  .sx-hero__copy { display: contents; }
  .sx-hero h1         { order: 1; }
  .sx-hero__sub       { order: 2; }
  .sx-hero__phone     { order: 3; }
  .sx-hero .sx-pedir  { order: 4; }
}
.sx-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--tengo-primary-light); background: var(--tengo-primary-tint);
  border-radius: var(--tengo-radius-pill); padding: 8px 17px;
  font-size: var(--tengo-text-xs); font-weight: var(--tengo-weight-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tengo-text-primary);
}
.sx-pill b { color: var(--tengo-primary); text-transform: none; letter-spacing: -0.01em; font-size: 13px; }

.sx-hero h1 {
  font-size: var(--sx-hero); font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.04em; line-height: 1.02;
  margin: var(--tengo-space-xl) 0 0; max-width: 17ch; text-wrap: balance;
}
/* --tengo-text-muted (#8E8B97) da 3,19:1 sobre el fondo del sitio: alcanza
   para texto grande (mínimo 3:1) y NO alcanza para texto chico (4,5:1).
   Por eso sobrevive sólo en los .soft de titulares de 45-68px. Para
   cualquier otro texto del sitio, secondary. */
.sx-hero h1 .soft { color: var(--tengo-text-muted); }
.sx-hero__sub {
  font-size: clamp(16px, 1.6vw, 19px); color: var(--tengo-text-secondary);
  margin: var(--tengo-space-lg) 0 0; max-width: 48ch; line-height: 1.55;
}
.sx-actions { display: flex; gap: var(--tengo-space-md); align-items: center; flex-wrap: wrap; margin-top: var(--tengo-space-2xl); }

/* Botón primario del sitio: el de tengo, sin adornos prestados.
   Morado sólido, radio píldora, texto blanco. */
.sx-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding-inline: var(--tengo-space-2xl);
  border-radius: var(--tengo-radius-pill);
  background: var(--tengo-primary); color: var(--tengo-text-on-primary);
  font-size: 17px; font-weight: var(--tengo-weight-semi);
  border: 1px solid transparent;
  transition: background var(--tengo-dur-short) var(--tengo-ease-move);
}
.sx-cta:hover { text-decoration: none; background: var(--tengo-primary-dark); }
.sx-cta[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Hero en 3D: elección del founder para la entrada de marketing.
   Ángulos moderados a propósito — el 3D fuerte deforma la tipografía
   de la app, que es justo lo que la captura viene a mostrar. */
.sx-hero__phone { perspective: 1700px; display: flex; justify-content: center; }
.sx-hero__phone .sx-phone {
  transform: rotateX(9deg) rotateY(-13deg) rotateZ(3deg);
  box-shadow: -30px 44px 84px rgba(21,19,28,.19);
}
@media (max-width: 940px) {
  .sx-hero__phone .sx-phone { transform: rotateX(6deg) rotateZ(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-hero__phone .sx-phone { transform: none; }
}

/* ══════════ INTERRUPTOR DE MODO ══════════
   Claro por defecto. El oscuro existe como elección, no como estética. */
.sx-theme {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--tengo-border-strong); background: var(--tengo-surface);
  border-radius: var(--tengo-radius-pill); cursor: pointer; color: var(--tengo-text-secondary);
  transition: color var(--tengo-dur-short) var(--tengo-ease-move),
              border-color var(--tengo-dur-short) var(--tengo-ease-move);
}
.sx-theme:hover { color: var(--tengo-primary); border-color: var(--tengo-primary-light); }

/* ══════ NAVEGACIÓN DE MÓVIL ══════ */
.sx-burger {
  /* align-content: sin esto las tres filas se estiran a los 44px de alto y
     los 6px de traslación no alcanzan el centro: la X sale como un ">". */
  display: none; place-items: center; align-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--tengo-border-strong); background: var(--tengo-surface);
  border-radius: var(--tengo-radius-pill); cursor: pointer; gap: 4px; padding: 0 12px;
}
.sx-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--tengo-text-primary);
  transition: transform var(--tengo-dur-short) var(--tengo-ease-move),
              opacity var(--tengo-dur-short) var(--tengo-ease-move);
}
.sx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sx-menu {
  position: fixed; inset: var(--sx-nav) 0 0 0; z-index: 39;
  background: var(--tengo-bg); overflow-y: auto;
  padding: var(--tengo-space-lg) var(--web-gutter) var(--tengo-space-2xl);
  display: flex; flex-direction: column;
}
.sx-menu[hidden] { display: none; }   /* display:flex pisa el hidden del navegador */
.sx-menu nav { display: grid; }
.sx-menu nav a {
  display: flex; align-items: center; min-height: 60px;
  font-size: var(--sx-modsub); font-weight: var(--tengo-weight-semi);
  color: var(--tengo-text-primary); border-bottom: 1px solid var(--tengo-border);
}
.sx-menu nav a[aria-disabled="true"] { color: var(--tengo-text-secondary); pointer-events: none; }
.sx-menu__login {
  margin-top: var(--tengo-space-xl); display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: var(--tengo-radius-pill);
  background: var(--tengo-primary); color: var(--tengo-text-on-primary);
  font-weight: var(--tengo-weight-semi);
}
.sx-menu__login:hover { text-decoration: none; background: var(--tengo-primary-dark); }
.sx-menu__lang { display: flex; gap: 8px; justify-content: center; margin-top: var(--tengo-space-lg); }
.sx-menu__lang button {
  min-width: 64px; min-height: 44px; border-radius: var(--tengo-radius-pill);
  border: 1px solid var(--tengo-border-strong); background: var(--tengo-surface);
  font-size: var(--tengo-text-xs); font-weight: var(--tengo-weight-semi);
  color: var(--tengo-text-secondary); cursor: pointer;
}
.sx-menu__lang button[aria-pressed="true"] { color: var(--tengo-text-primary); box-shadow: var(--tengo-shadow-sm); }
@media (min-width: 1021px) { .sx-menu { display: none; } }
.sx-theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sx-theme .moon { display: none; }
:root[data-theme="dark"] .sx-theme .moon { display: block; }
:root[data-theme="dark"] .sx-theme .sun { display: none; }

/* ══════════ RIEL DE PAÍSES ══════════ */
.sx-rail { border-block: 1px solid var(--tengo-border); background: var(--tengo-surface); }
.sx-rail .wrap { display: flex; align-items: center; gap: var(--tengo-space-lg); padding-block: var(--tengo-space-lg); flex-wrap: wrap; }
.sx-rail__label { font-size: var(--tengo-text-label); font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--tengo-track-label); text-transform: uppercase; color: var(--tengo-text-secondary); }
.sx-chips { display: flex; gap: var(--tengo-space-sm); flex-wrap: wrap; }
.sx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 8px; border-radius: var(--tengo-radius-pill);
  border: 1px solid var(--tengo-border); background: var(--tengo-bg);
  font-size: var(--tengo-text-xs); font-weight: var(--tengo-weight-semi); white-space: nowrap;
}
.sx-chip i { font-style: normal; font-size: 15px; }
.sx-chip b { font-weight: var(--tengo-weight-medium); color: var(--tengo-text-secondary); }
.sx-chip--key { border-color: var(--tengo-primary-light); background: var(--tengo-primary-tint); }
.sx-chip--key b { color: var(--tengo-primary-fg); }
.sx-chip--soon { opacity: .55; }

/* ══════════ DECLARACIÓN — el titular grande, escaso ══════════ */
.sx-claim { text-align: center;}
.sx-claim h2 {
  font-size: var(--sx-claim); font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.04em; line-height: 1.04;
  max-width: 20ch; margin-inline: auto; position: relative; display: inline-block;
}
.sx-claim h2 .soft { color: var(--tengo-text-muted); }
.sx-claim p { color: var(--tengo-text-secondary); font-size: var(--sx-modsub);
  max-width: 50ch; margin: var(--tengo-space-lg) auto 0; line-height: 1.55; }

/* ══════════ EL MÓDULO — se repite, alternando lado ══════════ */
.sx-mod { padding-block: var(--sx-gap); }
.sx-mod__grid {
  display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
  gap: clamp(36px, 6vw, 96px); align-items: center;
}
.sx-mod--flip .sx-mod__grid { grid-template-columns: minmax(0,1.14fr) minmax(0,.86fr); }
.sx-mod--flip .sx-mod__visual { order: 2; }
@media (max-width: 900px) {
  .sx-mod__grid, .sx-mod--flip .sx-mod__grid { grid-template-columns: 1fr; }
  .sx-mod--flip .sx-mod__visual { order: 0; }
}

.sx-mod h2 {
  font-size: var(--sx-modtitle); font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.028em; line-height: 1.12; max-width: 16ch;
}
.sx-mod__sub { font-size: var(--sx-modsub); color: var(--tengo-text-secondary);
  margin-top: var(--tengo-space-md); max-width: 44ch; line-height: 1.55; }

/* Filas de característica: ícono chico en círculo tintado */
.sx-rows { margin-top: var(--tengo-space-2xl); display: grid; gap: 28px; }
/* Las filas del paso van al tamaño pleno, igual que en #recibir. Con las
   filas chicas el paso medía 351px dentro de una caja de 756: el hueco que
   se veía como "mucho blanco" no era la caja de más, era el paso de menos. */
.sx-step .sx-rows { margin-top: var(--tengo-space-xl); gap: 26px; }
.sx-step .sx-row dd { max-width: 42ch; }
.sx-row { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--tengo-space-md); align-items: start; }
.sx-row__ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tengo-primary-light); color: var(--tengo-primary-fg);
  display: grid; place-items: center;
}
.sx-row__ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sx-row dt { font-size: var(--sx-rowlabel); font-weight: var(--tengo-weight-bold); letter-spacing: -0.01em; }
.sx-row dd { margin: 3px 0 0; font-size: var(--sx-body); color: var(--tengo-text-secondary); line-height: 1.5; max-width: 46ch; }

/* Marco de teléfono con cromo */
.sx-phone {
  width: 100%; max-width: 300px; margin-inline: auto;
  border: 1px solid var(--tengo-border-strong); border-radius: 40px;
  padding: 9px; background: var(--tengo-surface);
  box-shadow: 0 26px 60px rgba(21,19,28,.14);
}
.sx-phone img { border-radius: 32px; display: block; width: 100%; }

/* El cierre sí es centrado; el hero no. */
.sx-end .sx-actions { justify-content: center; }

/* ══════════ CIERRE ══════════ */
.sx-end { text-align: center;}
.sx-end h2 { font-size: var(--sx-claim); font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.04em; line-height: 1.04; max-width: 17ch; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════
   INSIGNIAS OFICIALES DE TIENDA
   Descargadas de las fuentes de Apple y Google, sin alterar. Las
   dos traen geometría distinta y hay que compensarla o se ven de
   distinto tamaño:
     Apple  119,66 x 40, SIN espacio libre incorporado.
     Google 646 x 250, con 29px transparentes arriba y abajo
            (15% del alto visible, que mide 192).
   Para un badge VISIBLE de 44px: Apple va a 44px de alto, Google
   a 57,3 (44 x 250/192). Con align-items:center los dos alinean.

   Espacio libre exigido: Apple 10% del alto (4,4px), Google 1/4
   del alto (11px). El gap de 20px cubre a los dos, y Google suma
   los suyos por arriba y por abajo.

   Siempre la insignia NEGRA de Apple, también en modo oscuro.
   Su guía es explícita: "If badges for other app platforms appear
   in your communication, use the preferred black badge, not the
   alternative white badge". Como Google Play está al lado, la
   blanca queda descartada — y el borde gris que la negra trae
   incorporado ("part of the badge artwork and should not be
   modified") es justamente lo que la hace legible sobre oscuro.

   Google publica UNA sola versión y ninguna variante blanca
   (verificado: sus cuatro URLs de blanco dan 404).
   ══════════════════════════════════════════════════════════════ */
/* Las reglas de .sx-stores y .sx-badge salieron acá el 2026-09-11, cuando las
   4 insignias de tienda dieron lugar al formulario de lista de espera. No se
   borraron por gusto: el gate de selectores muertos las marcaba y un gate rojo
   que se queda rojo deja de mirarse. Si las insignias vuelven, el CSS está en
   el historial: git log -S ".sx-badge__apple" -- assets/sistema.css */
@media (max-width: 900px) {
  /* 44px también en móvil: los 40 son el MÍNIMO de Apple, no el máximo, y a
     40 el área de toque queda bajo 44x44. Medido: 132+148+14 = 294 en 342. */
}
.sx-end h2 .soft { color: var(--tengo-text-muted); }
.sx-end p { color: var(--tengo-text-secondary); margin: var(--tengo-space-md) auto 0; max-width: 44ch; }

/* ══════════ MOTION ══════════ */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 320ms cubic-bezier(.22,.61,.36,1), transform 320ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   BONDADES — media pegada + pasos que cruzan
   Mecánica observada en getmeru.com, implementación propia:
   el teléfono queda fijo mientras los cuatro bloques le pasan al
   lado, y la pantalla cambia con el paso activo.
   0,4 KB de JS, un IntersectionObserver, cero librerías.
   ══════════════════════════════════════════════════════════════ */
.sx-perks__head {margin-bottom: clamp(32px, 5vw, 64px); }
.sx-perks__head h2 {
  font-size: var(--sx-claim); font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.038em; line-height: 1.06;
  margin-top: var(--tengo-space-sm);
}
.sx-perks__head p:not(.eyebrow) { font-size: var(--sx-modsub); color: var(--tengo-text-secondary);
  margin-top: var(--tengo-space-md); max-width: 48ch; line-height: 1.55; }

.sx-perks__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(36px, 6vw, 96px); }

/* Columna de pasos */
.sx-step {
  /* Una pantalla por paso: el teléfono de al lado cambia de captura y no
     tiene sentido que se vean dos pasos discutiendo la misma imagen.
     El contenido se centra vertical para quedar a la altura del teléfono,
     que también está centrado en el viewport. */
  min-height: 84vh; display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--tengo-border);
  padding-top: var(--tengo-space-2xl);
}
/* El filete va en el envoltorio, no en el paso: si va en el paso mide los
   84vh completos y queda una barra morada de 756px para 384px de texto.
   El estado inactivo NO baja la opacidad del texto — con .34 el cuerpo
   quedaba en 1,68:1, muy por debajo del 4,5:1 exigido. */
.sx-step__in {
  border-left: 2px solid var(--tengo-border); padding-left: var(--tengo-space-lg);
  transition: border-color var(--tengo-dur-medium) var(--tengo-ease-move);
}
.sx-step.is-active .sx-step__in { border-left-color: var(--tengo-primary); }
.sx-step__n {
  font-size: var(--tengo-text-label); font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--tengo-track-label); text-transform: uppercase;
  color: var(--tengo-primary-fg);
}
.sx-step h3 {
  font-size: var(--sx-modtitle); font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.028em; line-height: 1.12; margin-top: var(--tengo-space-sm); max-width: 14ch;
}
.sx-step__in > p:not(.sx-step__n) { font-size: var(--sx-modsub); color: var(--tengo-text-secondary);
  margin-top: var(--tengo-space-md); max-width: 40ch; line-height: 1.55; }

/* Teléfono pegado, con las pantallas apiladas */
/* Alto = viewport completo y centrado adentro: al scrollear el teléfono
   queda clavado en el medio de la pantalla, no colgado del nav. */
.sx-sticky { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; align-items: center; justify-content: center; }
.sx-sticky .sx-deck { height: min(74vh, 660px); }
.sx-deck { position: relative; width: auto; aspect-ratio: 780 / 980; overflow: hidden; border-radius: 34px; }
.sx-deck .sx-phone {
  position: absolute; inset: 0; max-width: none; margin: 0;
  opacity: 0; transition: opacity var(--tengo-dur-medium) var(--tengo-ease-move);
}
.sx-deck .sx-phone.is-on { opacity: 1; }

/* Móvil: el mismo contenido como carril con snap, sin altura extra */
@media (max-width: 900px) {
  .sx-perks__grid { display: flex; flex-direction: column; gap: 0; }
  /* El teléfono arriba, fijo; los pasos pasan por detrás. Necesita fondo
     propio y z-index o el texto se le dibuja encima al pasar. */
  .sx-sticky {
    order: -1; position: sticky; top: var(--sx-nav); z-index: 2;
    height: 34vh; align-self: stretch;
    background: var(--tengo-bg);
    padding-bottom: var(--tengo-space-sm);
  }
  /* El texto pasa por detrás del teléfono: sin este desvanecido se corta a
     filo contra el borde de la captura. */
  .sx-sticky::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -44px; height: 44px;
    background: linear-gradient(to bottom, var(--tengo-bg) 30%, transparent);
    pointer-events: none;
  }
  .sx-sticky .sx-deck { width: auto; height: 100%; max-width: none; }
  .sx-steps { display: grid; gap: 0; }
  .sx-step {
    min-height: 52vh; opacity: 1;
    justify-content: center; padding-top: var(--tengo-space-lg);
    border-top: 1px solid var(--tengo-border);
  }
  .sx-step:first-child { border-top: 0; }
  .sx-step__in { padding-left: var(--tengo-space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-step, .sx-deck .sx-phone { transition: none; }
  .sx-step { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   TANDA 2 — ajustes pedidos por el founder
   ══════════════════════════════════════════════════════════════ */

/* Logo más grande y con más presencia */

/* Selector de idioma (reemplaza al de país: el país no debe limitar) */
.sx-lang { display: flex; gap: 4px; padding: 3px; border-radius: var(--tengo-radius-pill);
  background: var(--tengo-surface-soft); border: 1px solid var(--tengo-border); }
.sx-lang button {
  font-family: inherit; font-size: var(--tengo-text-xs); font-weight: var(--tengo-weight-semi);
  border: 0; background: transparent; color: var(--tengo-text-secondary);
  padding: 5px 12px; border-radius: var(--tengo-radius-pill); cursor: pointer;
}
.sx-lang button[aria-pressed="true"] { background: var(--tengo-surface); color: var(--tengo-text-primary); box-shadow: var(--tengo-shadow-sm); }

/* Colapso de la nav en móvil. Va DESPUÉS de todas las definiciones que
   esconde: cuando estaba antes, `.sx-lang{display:flex}` (misma
   especificidad, más abajo) la resucitaba y la nav desbordaba a 451px
   sobre un viewport de 390. */
@media (max-width: 1020px) {
  .sx-nav__links, .sx-lang { display: none; }
  /* El CTA de la nav se esconde acá y reaparece dentro del burger, que lo
     trae como .sx-menu__pedir: en móvil no se pierde, cambia de lugar. Si se
     dejara visible acá compite por el ancho con el burger y la nav desborda,
     que fue lo que pasó a 451px sobre un viewport de 390. */
  .sx-nav .btn { display: none; }
  .sx-theme { margin-left: auto; }   /* a la derecha, lejos del logo */
  .sx-burger { display: inline-grid; }
}

/* Login: enlace, no botón — el botón primario es uno solo */
.sx-login { font-size: var(--sx-body); font-weight: var(--tengo-weight-semi); color: var(--tengo-text-primary); }
.sx-login:hover { color: var(--tengo-primary); text-decoration: none; }


/* ── Barra de banderas en movimiento, bajo el hero ── */
/* El carrusel se cortaba a filo contra los dos bordes: overflow:hidden sin
   ninguna máscara. Por eso "se ve cortado al inicio" — la primera bandera
   entra guillotinada, no desvanecida. La máscara va en un envoltorio y no
   en la sección para no desvanecer también los filetes de arriba y abajo,
   ni en el track, que se mueve y se llevaría la máscara con él. */
.sx-flags { border-block: 1px solid var(--tengo-border); background: var(--tengo-surface); }
.sx-flags__mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.sx-flags__track {
  display: flex;width: max-content;
  animation: sxMarquee 42s linear infinite;
}
@keyframes sxMarquee {
  from { transform: translateX(0); }
  /* −50% deja fuera medio gap: la costura del ciclo saltaba 16,04px. */
  to   { transform: translateX(calc(-50% - var(--tengo-space-xl) / 2)); }
}
.sx-flag { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sx-flag i {
  font-style: normal; display: grid; place-items: center;border-radius: 50%;line-height: 1;
  background: var(--logo-tile); border: 1px solid var(--tengo-border);
}
.sx-flag span {font-weight: var(--tengo-weight-semi); white-space: nowrap; }
.sx-flag b { display: block; font-weight: var(--tengo-weight-medium); color: var(--tengo-text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .sx-flags__track { animation: none; }
  .sx-flags__mask { overflow-x: auto; }
}

/* ── Footer morado ── */
.site-footer.sx-footer {
  background: var(--tengo-primary); color: var(--tengo-text-on-primary);
  border-top: 0; margin-top: 0;
}
.sx-footer .wordmark { color: var(--tengo-text-on-primary); }
/* Nada de alfa en el TEXTO del footer. Medido sobre el morado real:
   blanco 8,01 claro / 5,02 oscuro; al 82% baja a 5,65 / 3,92 (reprueba en
   oscuro); al 60% a 3,50 / 2,81 (reprueba en los dos). La jerarquía la dan
   el tamaño, el peso y el tracking — no la opacidad. El alfa se queda sólo
   donde no hay texto: los filetes. */
.sx-footer p, .sx-footer a, .sx-footer h3 { color: var(--tengo-text-on-primary); }
.sx-footer a:hover { color: var(--web-on-dark); }

.sx-footer .footer-bottom { border-top-color: rgba(255,255,255,.22); color: var(--tengo-text-on-primary); }

/* La declaración tenía aire de sobra abajo: el espacio se reparte, no se acumula */

/* ══════════════════════════════════════════════════════════════
   TANDA 3
   ══════════════════════════════════════════════════════════════ */

/* Logo: 45px y nunca subrayado */
.sx-mark { text-decoration: none !important; }
.sx-mark:hover { text-decoration: none !important; }
.sx-mark span { font-size: clamp(34px, 3.4vw, 45px); }

/* Capturas: la app tiene diseño oscuro propio, así que la pantalla
   acompaña al modo en vez de quedarse clara sobre fondo negro. */
.shot .is-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot .is-light { display: none; }
  :root:not([data-theme="light"]) .shot .is-dark  { display: block; }
}
:root[data-theme="dark"]  .shot .is-light { display: none; }
:root[data-theme="dark"]  .shot .is-dark  { display: block; }
:root[data-theme="light"] .shot .is-light { display: block; }
:root[data-theme="light"] .shot .is-dark  { display: none; }

/* Hero más compacto: que la barra de países entre en la primera vista */
.sx-hero { padding-block: clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 36px); }
.sx-hero h1 { margin-top: var(--tengo-space-md); }
.sx-hero__sub { margin-top: var(--tengo-space-md); }
/* Los huecos del hero venían de escritorio y en 390 sobraban: medidos 52px
   del titular al párrafo y 68 del párrafo al bloque de abajo. Cada píxel que
   se recorta acá es un píxel más de captura en la primera pantalla.
   Va acá y no en el bloque móvil de arriba: ahí queda ANTES de esta misma
   declaración y, con la misma especificidad, pierde. */
@media (max-width: 940px) {
  /* Con margin 0 el hueco todavía mide ~36px: es el medio interlineado del
     titular más el del párrafo, no espacio declarado. Para bajar de ahí hay
     que comérselo con margen negativo. Medido: 36 de interlineado, así que
     -12 deja el hueco en ~24 y -8 lo deja en ~28. */
  .sx-hero__sub       { margin-top: -12px; }
}
.sx-hero__phone .sx-phone { max-width: 280px; }


/* Barra de países: más grande, círculos más grandes, sin pausa */
.sx-flags { padding-block: var(--tengo-space-md); }  /* 96px -> 80px: unos pixeles menos */
.sx-flags:hover .sx-flags__track { animation-play-state: running; }
.sx-flags__track { gap: var(--tengo-space-xl); }
.sx-flag i { width: 46px; height: 46px; font-size: 25px; }
.sx-flag span { font-size: var(--sx-body); }
.sx-flag b { font-size: var(--tengo-text-xs); }

/* ══════════════════════════════════════════════════════════════
   COBERTURA — el mapa vive en Recargas
   El foco de mercadeo es LatAm: ahí vive la billetera. Recargar
   desde afuera es una capacidad, no el titular.
   SVG inline de 17 KB, sin librería de mapas.
   ══════════════════════════════════════════════════════════════ */
.sx-cover__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .sx-cover__grid { grid-template-columns: 1fr; } }

/* Donde la billetera vive hoy */
/* Donde llega el resto de LatAm */

/* Orígenes de recarga: dato secundario, no titular */
.sx-origins { margin-top: var(--tengo-space-xl); padding-top: var(--tengo-space-lg); border-top: 1px solid var(--tengo-border); }
.sx-origins p { font-size: var(--tengo-text-xs); font-weight: var(--tengo-weight-semi); letter-spacing: var(--tengo-track-label); text-transform: uppercase; color: var(--tengo-text-secondary); }
.sx-origins ul { display: flex; gap: var(--tengo-space-sm); flex-wrap: wrap; margin-top: var(--tengo-space-md); }
.sx-origins li {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--tengo-border); border-radius: var(--tengo-radius-pill);
  padding: 6px 13px 6px 7px; font-size: var(--tengo-text-xs); font-weight: var(--tengo-weight-semi);
}
.sx-origins i { font-style: normal; font-size: 14px; }

/* ══════════ MAPA MUNDIAL DE RECARGA — estilo bel.money ══════════
   Dos estados y nada más: cubierto o no. Sin leyenda de tres niveles,
   sin píldoras de bandera. El mapa es el dato. */
.sx-world { width: 100%; height: auto; display: block; }
.sx-world .off { fill: var(--tengo-surface-press); }
.sx-world .on  { fill: var(--tengo-primary); }
.sx-cover__note { font-size: var(--tengo-text-xs); color: var(--tengo-text-secondary); margin-top: var(--tengo-space-md); max-width: 46ch; }
/* El mapa es el argumento entero de esta sección: se lleva la mayor
   parte del ancho y la columna de texto se acota a su medida de lectura. */
.sx-cover__grid--wide { grid-template-columns: minmax(0,.58fr) minmax(0,1.42fr); gap: clamp(28px, 4vw, 64px); }
.sx-cover__grid--wide > :first-child { max-width: 34rem; }
@media (max-width: 900px) { .sx-cover__grid--wide { grid-template-columns: 1fr; } }

/* La tarjeta reemplaza a la captura en su módulo: es producto, no interfaz */
.sx-card { width: 100%; max-width: 460px; margin-inline: auto; display: block; }

/* ══════════════════════════════════════════════════════════════
   TARJETAS EN CSS — reemplazan al render de 535 KB
   Texto real: el logo, el nombre y los números son tipografía, no
   pixeles. Nítidos a cualquier zoom y editables en una línea.
   ══════════════════════════════════════════════════════════════ */
.sx-cards { position: relative; width: 100%; margin-inline: auto; container-type: inline-size; }
:root {
  /* Materiales de la tarjeta física. No son colores de marca — son el
     plástico y el chip — así que viven en la capa web, no en tokens.css. */
  --web-card-ink-a: #2A2A2E;
  --web-card-ink-b: #121214;
  --web-card-ink-c: #232326;
  --web-card-chip-a: #E8D9A8;
  --web-card-chip-b: #C9AE6E;
  --web-card-chip-c: #EADCAE;
  --web-on-dark: #FFFFFF;
}
.sx-cardart {
  position: absolute;aspect-ratio: 1.586 / 1;   /* ISO 7810 ID-1 */
  border-radius: 4.2cqw; padding: 4.6cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--web-on-dark); overflow: hidden;
}
/* La negra atrás, rotada; la morada adelante */
.sx-cardart--black {
  background: linear-gradient(145deg, var(--web-card-ink-a) 0%, var(--web-card-ink-b) 62%, var(--web-card-ink-c) 100%);
  box-shadow: 0 18px 44px rgba(21,19,28,.28);
}
.sx-cardart--brand {
  background: linear-gradient(140deg, var(--tengo-primary) 0%, var(--tengo-primary-dark) 78%);
  box-shadow: 0 24px 56px rgba(77,0,153,.36);
}
/* Brillo diagonal, el mismo gesto que la tarjeta dentro de la app */
.sx-cardart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.10) 52%, transparent 62%);
  pointer-events: none;
}
.sx-cardart__top { display: flex; align-items: flex-start; justify-content: space-between; }
.sx-cardart__chip { width: 34px; height: 26px; border-radius: 5px;
  background: linear-gradient(150deg, var(--web-card-chip-a), var(--web-card-chip-b) 45%, var(--web-card-chip-c)); }
.sx-cardart__mark { font-size: 6.6cqw; font-weight: var(--tengo-weight-bold); letter-spacing: -0.03em; line-height: 1; }
.sx-cardart__tier { font-size: 2.4cqw; font-weight: var(--tengo-weight-semi); letter-spacing: .16em;
  text-transform: uppercase; opacity: .72; margin-top: 3px; text-align: right; }
.sx-cardart__num { font-size: 4.1cqw; font-weight: var(--tengo-weight-medium);
  letter-spacing: .09em; font-variant-numeric: tabular-nums; opacity: .9; }
.sx-cardart__name { font-size: 3cqw; font-weight: var(--tengo-weight-semi);
  letter-spacing: .1em; text-transform: uppercase; opacity: .82; margin-top: 5px; }


/* ══════════════════════════════════════════════════════════════
   RITMO — el aire se reduce en toda la página
   Estaba calibrado contra Meru, que respira mucho más de lo que
   esta página necesita con su cantidad de secciones.
   ══════════════════════════════════════════════════════════════ */

/* La declaración y la tarjeta son un solo bloque, no dos secciones */
.sx-claim--tight { padding-block: var(--sx-gap) 0; }
.sx-claim--tight + .sx-mod { padding-top: var(--tengo-space-xl); }
.sx-claim--tight h2 { max-width: 22ch; }

/* Las declaraciones sueltas tampoco necesitan tanto */
.sx-claim { padding-block: var(--sx-gap) clamp(32px, 4vw, 56px); }
.sx-claim + .sx-mod { padding-top: clamp(32px, 4vw, 56px); }

/* Los pasos de bondades no necesitan 78vh cada uno */

/* La sección de cobertura y el cierre acompañan */
.sx-cover { padding-block: var(--sx-gap); }
.sx-end { padding-block: var(--sx-gap); }
.sx-perks { padding-block: var(--sx-gap); }

/* Corrección del abanico: la marca y el nivel se apilan, y la morada
   deja de tapar la numeración de la negra. */
.sx-cardart__brandbox { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }

/* ── Bondades: pasos con specs, y media pantalla en vez de completa ── */

/* Media pantalla: se ve la mitad de arriba, la de abajo se insinúa.
   La pantalla completa a este tamaño no se lee y ocupa el doble. */
.sx-deck .sx-phone { border-radius: 34px; }
.sx-deck .sx-phone img { height: auto; object-fit: cover; object-position: top; }
.sx-deck::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(to top, var(--tengo-bg), transparent);
  pointer-events: none; z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   ESCALA DE COSTURAS — el hallazgo central del review
   La página tenía UNA sola distancia entre secciones para ocho
   relaciones distintas: 5 de 7 costuras medían 172,8px idénticos,
   y solo 6px separaban "capítulo nuevo" de "el siguiente hermano".
   El aire no significaba nada porque era todo igual.

   Tres tramos, y la costura la paga UN solo lado (margin) en vez
   de dos (padding), que era de dónde salía la duplicación.
   ══════════════════════════════════════════════════════════════ */
:root {
  --sx-nav: 82px;   /* alto de la nav pegada; la usan el sticky y el runway */
  --sx-seam-chapter: clamp(72px, 8vw, 128px);  /* cambia el tema */
  --sx-seam-sibling: clamp(40px, 4.5vw, 72px); /* mismo tema, otro ítem */
  --sx-seam-bound:   clamp(16px, 2vw, 28px);   /* dos partes de un mismo bloque */
}
.sx-perks, .sx-mod, .sx-cover, .sx-claim, .sx-end { padding-block: 0; }
.sx-perks, .sx-mod, .sx-cover, .sx-claim, .sx-end { margin-top: var(--sx-seam-sibling); }
/* Capítulo: arranca un tema nuevo */
#bondades, #cobertura, #tarjeta, #descargar, .sx-claim { margin-top: var(--sx-seam-chapter); }
/* Hermano: sigue el mismo tema */
/* La tesis y la sección que la prueba son un solo bloque */
#recibir { margin-top: var(--sx-seam-bound); }
/* Ligado: una declaración y su módulo son un solo bloque */
.sx-claim--tight { margin-bottom: 0; }
.sx-claim--tight + .sx-mod { margin-top: var(--sx-seam-bound); }
/* El último bloque necesita aire abajo antes del footer */
#descargar { padding-bottom: var(--sx-seam-chapter); }

/* El aire escala con la tipografía: un h2 de 56px pide más que uno de 34px */
.sx-claim h2, .sx-end h2 { margin-top: 0; }

/* Los pasos hermanos dejan de estar más lejos entre sí que dos secciones */
.sx-steps { display: grid; gap: var(--sx-seam-bound); }

/* ══════════════════════════════════════════════════════════════
   REGLA DE ALINEACIÓN
   Centrado si el encabezado abarca el ancho completo y abre un
   capítulo. Izquierda si vive dentro de una columna, al lado de
   un teléfono. Bondades era el único de ancho completo que había
   quedado a la izquierda.
   ══════════════════════════════════════════════════════════════ */
.sx-perks__head { max-width: 56rem; margin-inline: auto; text-align: center; }
.sx-perks__head h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.sx-perks__head p { margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════
   RECORRIDO DEL TELÉFONO EN EL ÚLTIMO PASO
   El sticky se soltaba en scrollY 3459 y el título del paso 4
   llegaba arriba en 3827: la pantalla se iba 368px ANTES de que
   terminaras de leer. Se ve raro porque lo es.

   Un sticky de alto H con top:0 deja de pegarse en
   grid.bottom − H. Para que suelte justo cuando el título toca el
   borde superior hace falta más recorrido abajo:

     padB = 100vh + offsetTítulo − altoPaso
          = 100vh + [P + (H−P−C)/2 + e] − H,  con H = 84vh
          = 58vh + (P/2 − C/2 + e)

   con P = padding-top del paso (48), C = alto del contenido (408)
   y e = del tope del contenido al h3 (30) → 58vh − 150px.
   Es exacto a cualquier alto de viewport, no sólo a 900.
   ══════════════════════════════════════════════════════════════ */
.sx-steps { padding-bottom: calc(58vh - 154px - var(--sx-nav)); }
/* Los 82px son el alto del nav pegado: "arriba" para quien lee es debajo
   del menú, no debajo del borde del viewport. Sin restarlos, el título se
   metía atrás del nav justo antes de que la pantalla empezara a subir. */
@media (max-width: 900px) { .sx-steps { padding-bottom: 0; } }

/* ══════════════════════════════════════════════════════════════
   RAYITAS ENTRE SECCIONES
   El mismo lenguaje que separa los cuatro pasos, subido un nivel:
   una línea de 1px marca dónde empieza un capítulo. Va en el
   .wrap y no en el <section> para que se alinee con el contenido
   en vez de cruzar el viewport entero.
   El aire se reparte a los dos lados de la línea en vez de irse
   todo arriba.
   ══════════════════════════════════════════════════════════════ */
#bondades > .wrap,
#tarjeta > .wrap,
.sx-claim > .wrap,
#cobertura > .wrap,
#descargar > .wrap {
  border-top: 1px solid var(--tengo-border);
  padding-top: var(--sx-seam-sibling);
}
#bondades, #tarjeta, #cobertura, #descargar, .sx-claim { margin-top: var(--sx-seam-sibling); }

/* ══════════════════════════════════════════════════════════════
   LAS DOS TARJETAS
   Sin chip: el detalle no aporta a esta distancia y compite con
   la marca. Más solapadas, y el nombre una sola vez — en la de
   adelante, que es la que se lee.
   ══════════════════════════════════════════════════════════════ */
.sx-cards { aspect-ratio: 1 / .80; max-width: 480px; }
/* En móvil ocupaban 342 de 390 y se comían la pantalla. */
@media (max-width: 900px) { .sx-cards { max-width: 280px; } }
.sx-cardart { width: 84%; }
.sx-cardart--black { top: 0; left: 0; transform: rotate(-7deg); }
.sx-cardart--brand { bottom: 0; right: 0; transform: rotate(3deg); }

/* ══════════════════════════════════════════════════════════════
   COBERTURA
   Sección y mapa más grandes: es el argumento de alcance y estaba
   contado en el mismo tamaño que un detalle de producto.
   ══════════════════════════════════════════════════════════════ */
#cobertura > .wrap { padding-block: var(--sx-seam-chapter) var(--sx-seam-sibling); }


.sx-footer .footer-legal { border-top-color: rgba(255,255,255,.22); }
.sx-footer .footer-legal p, .sx-footer .footer-legal a { color: var(--tengo-text-on-primary); }

/* La marca dentro del copy corrido. "tengo" es minúscula y además es un verbo
   conjugado, así que en una frase se pierde: "a quien tenga tengo" se tropieza
   al leerlo. Las pantallas de la app ya resolvían esto con .brand-name en 13
   lugares; acá sólo se porta la misma regla, que la web no tenía.

   Color MÁS peso: si fuera sólo color, alguien que no percibe el morado o una
   impresión en gris no distinguirían nada.

   Va con --tengo-primary-fg y NO con --tengo-primary. El segundo es el morado
   de relleno de la marca y sobre fondo oscuro se queda en 3,87:1, por debajo
   del 4,5 que exige el gate; -fg existe justo para texto y cumple en los dos
   modos. Lo cazó audit.py en la corrida, no la lectura del código. */
.bn { color: var(--tengo-primary-fg); font-weight: var(--tengo-weight-bold); letter-spacing: -0.01em; }
/* Tramo de titular en morado. Va con --tengo-primary-fg y no con
   --tengo-primary: el morado puro no aguanta el contraste sobre el fondo
   oscuro, y este token es el que cambia de valor por tema. Es el hermano
   de .soft, que hace lo mismo en gris apagado. */
.acento { color: var(--tengo-primary-fg); }

/* ─────────────────────────────────────────────────────────────────────────
   LISTA DE ESPERA

   Primer formulario del sitio: hasta acá no había ni un <input>. Todo sale de
   tokens; el único que hubo que agregar fue --border-control, porque --border
   da 1,25:1 sobre la superficie del input y un control necesita 3:1 para ser
   identificable. El anillo de foco reusa la regla de site.css, extendida abajo
   a los campos.

   Dos instancias: hero y cierre. El campo oculto "origen" las distingue, que es
   la única razón para tener dos en vez de una más anclas.
   ───────────────────────────────────────────────────────────────────────── */

.sx-wait { max-width: 30rem; }
.sx-hero .sx-wait { margin-top: var(--tengo-space-lg); }
.sx-end  .sx-wait { margin-inline: auto; text-align: left; }

.sx-wait__lead {
  font-size: var(--sx-body);
  color: var(--tengo-text-secondary);
  margin-bottom: var(--tengo-space-md);
}
.sx-wait__lead b { color: var(--tengo-text-primary); font-weight: var(--tengo-weight-semi); }

.sx-wait__campos { display: grid; gap: var(--tengo-space-sm); }

.sx-wait label {
  display: block;
  font-size: var(--tengo-text-label);
  font-weight: var(--tengo-weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tengo-text-secondary);
  margin-bottom: var(--tengo-space-2xs);
}

.sx-wait input,
.sx-wait select {
  width: 100%;
  font-family: var(--tengo-font);
  font-size: var(--sx-body);
  font-weight: var(--tengo-weight-medium);
  color: var(--tengo-text-primary);
  background: var(--tengo-surface);
  border: 1px solid var(--tengo-border-control);
  border-radius: var(--tengo-radius-md);
  padding: 12px var(--tengo-space-md);
  min-height: 48px;            /* objetivo táctil: HIG pide 44 mínimo */
  appearance: none;
}
.sx-wait input::placeholder { color: var(--tengo-text-muted); }
.sx-wait input:hover,
.sx-wait select:hover { border-color: var(--tengo-text-secondary); }

/* El anillo de foco de site.css cubre a y button; los campos lo heredan acá. */
.sx-wait :where(input, select, button):focus-visible {
  outline: 2px solid var(--tengo-primary);
  outline-offset: 3px;
}

/* Teléfono: prefijo y número son un solo control visual, dos campos reales. */
.sx-wait__tel { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--tengo-space-sm); }
.sx-wait__tel select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tengo-text-muted) 50%),
                    linear-gradient(135deg, var(--tengo-text-muted) 50%, transparent 50%);
  background-position: right var(--tengo-space-md) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--tengo-space-xl);
}

.sx-wait__enviar {
  width: 100%;
  margin-top: var(--tengo-space-md);
  min-height: 48px;
  font-family: var(--tengo-font);
  font-size: var(--sx-body);
  font-weight: var(--tengo-weight-semi);
  color: var(--tengo-text-on-primary);
  background: var(--tengo-primary);
  border: 0;
  border-radius: var(--tengo-radius-pill);
  cursor: pointer;
}
.sx-wait__enviar:hover { background: var(--tengo-primary-dark); }

.sx-wait__nota {
  /* NO usa --text-muted: a 12px da 3,19:1 sobre el fondo de página y el mínimo
     para texto chico es 4,5. El mismo valor sí sirve como --border-control,
     porque un borde sólo necesita 3. Mismo color, requisito distinto. */
  font-size: var(--tengo-text-xs);
  line-height: 1.5;
  color: var(--tengo-text-secondary);
  margin-top: var(--tengo-space-sm);
}
.sx-wait__ya {
  font-size: var(--sx-sm);
  color: var(--tengo-text-secondary);
  margin-top: var(--tengo-space-md);
}

/* Estado de éxito. Vive en el marcado desde el principio y se alterna con
   [hidden], para que exista aunque no haya JavaScript. */
/* [hidden] es un atributo, no gana contra display. Sin esta línea el estado de
   éxito se ve siempre, que fue exactamente lo que pasó en la primera pasada. */
.sx-wait__ok[hidden] { display: none; }
.sx-wait__ok {
  display: grid; gap: var(--tengo-space-sm);
  padding: var(--tengo-space-lg);
  background: var(--tengo-success-soft);
  border: 1px solid var(--tengo-success);
  border-radius: var(--tengo-radius-lg);
}
.sx-wait__ok h3 { font-size: var(--sx-modsub); font-weight: var(--tengo-weight-bold); color: var(--tengo-text-primary); }
.sx-wait__ok p  { font-size: var(--sx-sm); color: var(--tengo-text-secondary); }

/* El aviso cuando el envío falla. Va con role="alert" desde el JS, así que el
   lector de pantalla lo anuncia solo; acá sólo se le da forma. Existe porque la
   alternativa es tragarse el error y mostrar éxito igual. */
.sx-wait__error {
  margin-top: var(--tengo-space-sm);
  padding: 10px 14px;
  border-radius: var(--tengo-radius-md);
  background: var(--tengo-danger-soft);
  color: var(--tengo-danger);
  font-size: var(--sx-sm);
  font-weight: var(--tengo-weight-medium);
}
.sx-wait__error[hidden] { display: none; }
.sx-wait__enviar[disabled] { opacity: .6; cursor: default; }

@media (max-width: 560px) {
  .sx-wait__tel { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

/* CTA a la lista de espera. El formulario vive en /lista-de-espera.html: acá
   sólo hay botones, que son links. Esa es la razón del patrón — RESTRICTIONS.md
   dice que el usuario primario tiene internet inestable, y un link funciona
   aunque el JavaScript no cargue. Un modal, no.

   El botón es .sx-cta, el primario que ya existe arriba. La primera versión de
   esto definía un .sx-cta__btn propio que lo duplicaba, y peor: llamó .sx-cta
   al CONTENEDOR, que heredó el fondo morado del botón y dejó el texto morado
   sobre morado. El gate lo midió en 1,16:1. Por eso el contenedor es .sx-pedir. */
.sx-pedir { margin-top: var(--tengo-space-xl); }
.sx-pedir--suelto { text-align: center; margin-block: clamp(32px, 5vw, 64px); }
.sx-pedir--centro { text-align: center; }

/* En celular el botón toma el ancho de la columna de texto. Medido a 390px:
   el botón mide 238 dentro de una columna de 342, así que deja 104px muertos
   a un lado y se lee como desalineado aunque esté al ras del texto. A ancho
   completo los tres CTA arrancan y terminan donde arrancan el titular y la
   bajada, que es contra lo que el ojo compara.
   El corte va en 480 y no en 560: a 560 la columna mide 512 y el botón salía
   de 512px de ancho, un pastillón. A 480 la columna mide 432, que todavía se
   lee como botón. Arriba de eso el ancho natural de 238 alcanza. */
@media (max-width: 480px) {
  .sx-pedir .sx-cta { display: flex; width: 100%; }
}
.sx-pedir__nota {
  font-size: var(--sx-sm);
  color: var(--tengo-text-secondary);
  margin-top: var(--tengo-space-sm);
}

/* La página de la lista: el formulario centrado, sin la columna del hero. */
.sx-wait--pagina { margin-block: var(--tengo-space-xl); }
.sx-pedir__lead {
  font-size: var(--sx-modsub);
  font-weight: var(--tengo-weight-semi);
  color: var(--tengo-text-primary);
  margin-bottom: var(--tengo-space-md);
}

/* El CTA dentro del menú móvil. El botón del nav es display:none bajo 700px y
   el menú no lo tenía, así que en móvil —la plataforma principal de este
   producto— la página ofrecía "Ingresar" a quien ya tiene acceso y ninguna
   forma de pedirlo a quien no. Medido con el menú abierto a 390px. */
.sx-menu__pedir { display: flex; width: 100%; margin-bottom: var(--tengo-space-md); }

/* Ingresar pasa a secundario DENTRO del menú móvil. Era el único botón del
   menú, así que sólido estaba bien; al entrar "Pide tu invitación" quedaron dos
   píldoras moradas idénticas apiladas, con la misma jerarquía para dos acciones
   que no valen lo mismo: la mayoría de quien abre este menú todavía no tiene
   acceso. Contorno en vez de relleno, mismo tamaño, misma familia. */
.sx-menu__pedir + .sx-menu__login {
  margin-top: 0;
  background: transparent;
  color: var(--tengo-primary-fg);
  border: 1px solid var(--tengo-border-control);
}
.sx-menu__pedir + .sx-menu__login:hover {
  background: var(--tengo-surface-soft);
  border-color: var(--tengo-text-secondary);
}