/* La portada de mepagaste.com. Escrita a mano el 29/09/2026 con los tokens de
   la app (docs/mepagaste-diseno/design-system/tokens.json): antes era el HTML
   compilado de la web Next.js, con su Tailwind, su letra y otro lima, y junto
   a la app parecían dos productos. Sólo claro: es una página para mirar, y el
   celular de la portada enseña la app en claro. */

@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-display:swap;src:url(../media/jakarta-Medium.woff2)format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(../media/jakarta-Bold.woff2)format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(../media/jakarta-ExtraBold.woff2)format("woff2")}

:root {
  --surface-page: #f2f1ee;
  --surface-card: #ffffff;
  --surface-inverse: #191918;
  --line-100: #efeee9;
  --line-200: #e3e1db;
  --ink-900: #1a1a18;
  --ink-700: #3a3935;
  --ink-500: #5f5d58;
  --ink-inverse-muted: #c9c8c2;
  --lime-500: #d6f75b;
  --lime-50: #f1fbc8;
  --on-lime: #1a1a18;
  --done-fg: #0b6b3a;
  --done-bg: #e6f6ec;
  --done-solid: #12924f;
  --shadow-raised: 0 8px 28px rgba(20, 20, 20, .08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-900);
  font: 500 16px/1.5 "Plus Jakarta Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
/* Lo que sólo sirve con JS nace `hidden`, y un `display` de clase le ganaba. */
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg.icono { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.oscuro :focus-visible, .cabecera :focus-visible { outline-color: var(--lime-500); }
.envoltura { max-width: 1152px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .envoltura { padding-inline: 32px; } }
.lima { color: var(--lime-500); }

/* ─── Botones: 48 de alto como mínimo, píldora como en la app ─── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px;
  font-family: inherit; font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.boton:active { transform: scale(.97); }
.boton-lima { background: var(--lime-500); color: var(--on-lime); }
.boton-lima:hover { background: #cbef45; }
.boton-negro { background: var(--ink-900); color: var(--lime-500); }
.boton-negro:hover { background: #2e2e2b; }
.boton-borde { border-color: rgba(255, 255, 255, .35); color: #fff; }
.boton-borde:hover { border-color: #fff; }
.boton-borde-oscuro { border-color: var(--line-200); color: var(--ink-900); background: var(--surface-card); }
.boton-borde-oscuro:hover { border-color: var(--ink-500); }
.boton-chico { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .boton:active { transform: none; } }

/* ─── Cabecera ─── */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(25, 25, 24, .95); color: #fff; backdrop-filter: blur(16px); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; text-decoration: none; }
.logo svg { width: 28px; height: 28px; stroke-width: 1.9; }
.menu { display: none; gap: 24px; margin-left: 32px; margin-right: auto; font-size: 15px; font-weight: 700; color: var(--ink-inverse-muted); }
.menu a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.menu a:hover { color: #fff; }
@media (min-width: 900px) { .menu { display: flex; } }
.acciones { display: flex; align-items: center; gap: 4px; }
.entrar { display: inline-flex; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.entrar:hover { background: rgba(255, 255, 255, .1); }
.acciones .boton { display: none; }
@media (min-width: 520px) { .acciones .boton { display: inline-flex; } }

/* ─── El hero: la banda oscura con el celular montado ─── */
/* `clip` y no `hidden`: con `hidden` la banda se podía desplazar por dentro (al
   enfocar algo que sobresale, entonces el celular) y el título quedaba cortado.
   Ya nada sobresale por abajo; queda por la sombra y la entrada (baja 24 px),
   que se salen de la caja. */
.hero { overflow: clip; border-radius: 0 0 40px 40px; background: radial-gradient(120% 95% at 100% 0, #2c2c2a 0%, #191918 60%); color: #fff; }
/* El aire entre el texto y la demostración (su línea) es el `gap` de aquí, 15 px,
   más los 15 del bloque: con los 48 de antes, en 360×640 el rótulo empujaba
   «Simula un pago» fuera de la primera pantalla. */
.hero .envoltura { display: grid; gap: 15px; padding-top: 56px; }
.hero-texto { align-self: center; }
/* El título son dos frases en dos renglones, en todos los anchos (el dueño,
   12/10/2026): la segunda va en bloque para que el salto no lo decida el
   navegador, que en 390 px partía «El pantallazo / miente.» en tres. El
   segundo `min` es lo que cabe: «El pantallazo miente.» mide 9,52 em, así que
   el ancho de la envoltura (100vw menos sus 32 px de aire) entre 9,8 deja un
   3 % de sobra. Sólo manda por debajo de unos 420 px; ahí la letra va de 30 px
   (320) a 38 px (412), en vez de partirse. */
.hero h1 { font-size: min(clamp(2.4rem, 4.6vw, 3.4rem), calc((100vw - 32px) / 9.8)); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 .lima { display: block; }
.hero-bajada { max-width: 30rem; margin-top: 20px; color: var(--ink-inverse-muted); font-size: 19px; }
.hero-bajada strong { color: #fff; font-weight: 700; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* En un celular el botón de WhatsApp empujaba «Simula un pago» fuera de la
   primera pantalla (en 360×640 no se veía). Sigue en el cierre. */
@media (max-width: 519px) { .hero .boton-borde { display: none; } }
.hero-nota { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--ink-inverse-muted); font-size: 14px; }
.hero-nota + .hero-nota { margin-top: 6px; }
.hero-nota::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--done-solid); }
.tienda { display: flex; align-items: center; gap: 18px; margin-top: 28px; color: var(--ink-inverse-muted); font-size: 14px; }
.tienda img { display: block; height: 52px; width: auto; }
.tienda p { margin-top: 10px; }
.tienda .qr { display: none; width: 104px; height: 104px; border-radius: 12px; }
@media (min-width: 1024px) and (hover: hover) { .tienda .qr { display: block; } }
/* La demostración es un bloque propio (el dueño, 12/10/2026: el botón, el
   rótulo y el celular, centrados junto a un texto pegado a la izquierda, eran
   dos ejes y se veían sueltos). Con un solo borde, la línea de arriba; el
   rótulo es su título, «Simula un pago» mide lo que su texto y va centrado, y
   el celular va debajo. En el HTML el orden es botón, rótulo, celular: `order` lo cambia, y
   `.hero-celular` en columna es lo que lo permite. El celular se ve entero: la
   banda lo corta si no (Pagos desaparecía a medias y sus filas de abajo
   quedaban fuera). 64 px de aire debajo: la sombra (`0 24px 60px -12px`) llega
   a unos 72 y a 64 ya casi no se ve, y `overflow: clip` no la corta a la vista. */
.hero-celular { display: flex; flex-direction: column; padding: 15px 0 64px; border-top: 1px solid rgba(255, 255, 255, .16); }
.rotulo { order: 1; display: flex; gap: 8px; margin-bottom: 8px; color: var(--ink-inverse-muted); font-size: 13px; line-height: 17px; }
.rotulo b { color: #fff; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rotulo span::before { content: "·"; margin-right: 8px; }
/* «Simula un pago»: el texto del botón pasa a ser lo que dice la voz, y por eso
   puede partirse en dos líneas. */
.simular { order: 2; display: grid; justify-items: center; margin-bottom: 14px; text-align: center; }
.simular .boton { white-space: normal; }
.simular .boton svg { width: 20px; height: 20px; }
.hero-celular .cel { order: 3; }
@media (min-width: 1024px) {
  .hero .envoltura { grid-template-columns: 1.1fr .9fr; column-gap: 48px; padding-top: 0; }
  /* El texto va centrado contra el celular, no arriba: arrancando los dos a la
     misma altura quedaba media banda vacía debajo de los botones (11/10/2026).
     Los 42 px son lo que al celular le sobra arriba (106: el rótulo y el botón)
     menos abajo (64): sin ellos el texto se centra en la columna y queda 20 px
     más alto que él. */
  .hero-texto { align-self: center; padding-top: 42px; }
  /* Aquí el bloque es la columna del celular, sin línea. El rótulo, la caja
     del botón y el celular miden lo mismo (290 × el `zoom` de abajo, que a los
     dos primeros no los alcanza) y van centrados en la columna; el botón, con
     lo que mide su texto, queda centrado en su caja y el rótulo, a la
     izquierda. */
  .hero-celular { padding-top: 23px; border-top: 0; }
  /* En un computador, 290 px de celular se perdían junto al título. */
  .hero-celular .cel { zoom: 1.2; }
  .rotulo, .simular { width: calc(290px * 1.2); margin-inline: auto; }
}

/* ─── Secciones ─── */
/* Un solo aire entre bloques (`--entre`), también alrededor de la banda de
   negocios: con 24 arriba y 96 abajo se veía pegada al hero y suelta de lo
   que sigue. */
.seccion { --entre: 48px; padding: var(--entre) 0; scroll-margin-top: 72px; }
@media (min-width: 1024px) { .seccion { --entre: 72px; } }
.seccion-blanca { background: var(--surface-card); }
/* Dos secciones seguidas del mismo fondo sumaban 192 px de aire entre ellas. */
.seccion:not(.seccion-blanca) + .seccion:not(.seccion-blanca) { padding-top: 0; }
.titulo { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.bajada { max-width: 36rem; margin-top: 12px; color: var(--ink-500); font-size: 18px; }
.centro { text-align: center; }
.centro .bajada { margin-inline: auto; }
.rejilla { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 640px) { .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta { border-radius: 24px; background: var(--surface-card); padding: 24px; }
.seccion-blanca .tarjeta { background: var(--surface-page); }
.tarjeta h3 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.tarjeta p { margin-top: 6px; color: var(--ink-500); }
.mosaico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 16px; background: var(--lime-500); color: var(--on-lime); }

/* Los negocios: una banda oscura con dos filas de letra grande que se deslizan
   solas, una hacia cada lado (dos copias de cada lista, la segunda escondida
   del lector de pantalla, para que el giro no tenga salto). Quieta con
   «reducir movimiento»: ahí se desliza con el dedo. */
.franja-negocios { max-width: 1152px; margin: 48px 16px 0; padding: 40px 0; overflow: hidden; border-radius: 28px; background: var(--surface-inverse); color: #fff; text-align: center; }
@media (min-width: 1024px) { .franja-negocios { margin-top: 72px; } }
@media (min-width: 1184px) { .franja-negocios { margin-inline: auto; } }
.franja-pastilla { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: var(--ink-inverse-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.franja-pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-500); }
.franja-titulo { max-width: 24rem; margin: 0 auto 24px; padding-inline: 16px; font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.franja { display: flex; overflow: hidden; }
.franja + .franja { margin-top: 8px; }
.franja-pista { display: flex; flex: none; }
.franja-pista li { display: flex; align-items: center; font-size: clamp(22px, 3.4vw, 36px); font-weight: 800; line-height: 1.25; letter-spacing: -.03em; white-space: nowrap; }
.franja-pista li::after { content: ""; flex: none; width: .18em; height: .18em; margin-inline: .5em; border-radius: 50%; background: var(--lime-500); }
.franja-vuelve li { color: rgba(255, 255, 255, .38); }
.franja-vuelve li::after { border: 2px solid rgba(255, 255, 255, .38); border-radius: 3px; background: none; }
.franja-vuelve .franja-tu { color: var(--lime-500); }
@media (prefers-reduced-motion: no-preference) {
  .franja-pista { animation: franja var(--vuelta, 40s) linear infinite; }
  .franja-vuelve .franja-pista { animation-direction: reverse; }
  .franja:hover .franja-pista { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .franja { overflow-x: auto; } .franja-pista[aria-hidden] { display: none; } }
@keyframes franja { to { transform: translateX(-100%); } }

.push { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; padding: 10px 12px; border-radius: 16px; background: #fff; color: var(--ink-900); box-shadow: var(--shadow-raised); }
.push img { flex: none; border-radius: 9px; }
.push div { display: grid; min-width: 0; line-height: 1.25; }
.push small { overflow: hidden; color: var(--ink-500); font-size: 11px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.push b { font-size: 15px; font-weight: 800; }
.push span { color: var(--ink-700); font-size: 12px; }
/* Qué hace: una rejilla «bento», cada tarjeta con su escena de la app. Las
   escenas se mueven sólo después de verse (`.visto`, portada.js). */
.bento { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rasgo-ancho, .rasgo-completo { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rasgo-ancho { grid-column: span 2; } }
.rasgo { display: flex; flex-direction: column; padding: 24px; border-radius: 28px; background: var(--surface-card); }
.rasgo h3 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.rasgo p { margin-top: 6px; color: var(--ink-500); }
.rasgo-escena { position: relative; display: grid; align-content: center; justify-items: center; gap: 14px; height: 200px; margin-bottom: 20px; overflow: hidden; border-radius: 20px; background: var(--surface-page); }
.rasgo-texto { order: 1; }
@media (min-width: 1024px) {
  .rasgo-ancho, .rasgo-completo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 32px; }
  .rasgo-ancho .rasgo-escena, .rasgo-completo .rasgo-escena { margin: 0; }
  .rasgo-texto { order: 0; padding: 8px; }
  .rasgo-texto h3 { font-size: 26px; letter-spacing: -.01em; }
  .rasgo-texto p { font-size: 17px; }
}
.rasgo-oscuro { background: radial-gradient(120% 120% at 100% 0, #2c2c2a 0%, #191918 60%); color: #fff; }
.rasgo-oscuro p { color: var(--ink-inverse-muted); }
.rasgo-oscuro .rasgo-escena { height: 260px; background: rgba(255, 255, 255, .06); }
.rasgo-lima { background: var(--lime-500); color: var(--on-lime); }
.rasgo-lima p { color: var(--ink-700); }
.rasgo-lima .rasgo-escena { background: rgba(255, 255, 255, .45); }

/* La voz */
.voz { display: flex; align-items: center; gap: 18px; }
.voz-parlante { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--lime-500); color: var(--on-lime); }
.voz-ondas { display: flex; align-items: center; gap: 6px; height: 56px; }
.voz-ondas i { width: 7px; height: 100%; border-radius: 4px; background: var(--lime-500); transform: scaleY(.5); }
.voz-ondas i:nth-child(2n) { transform: scaleY(.8); }
.rasgo .voz-dicho { max-width: 22rem; margin: 0; padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; text-align: center; }

/* El QR */
.qr-vivo { position: relative; width: 132px; height: 132px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-raised); }
.qr-vivo svg { display: block; width: 100%; height: 100%; fill: var(--ink-900); }
.qr-linea { position: absolute; top: 50%; right: 6px; left: 6px; height: 3px; border-radius: 3px; background: var(--lime-500); box-shadow: 0 0 12px 2px rgba(214, 247, 91, .9); opacity: 0; }
.qr-llego { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--done-bg); color: var(--done-fg); font-size: 14px; font-weight: 800; box-shadow: var(--shadow-raised); }
.qr-llego svg { width: 15px; height: 15px; stroke-width: 3; }

/* Marcar entregado */
.marca-viva { position: relative; display: flex; align-items: center; gap: 12px; width: min(240px, calc(100% - 32px)); padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-raised); }
.marca-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--lime-500); font-size: 13px; font-weight: 800; }
.marca-viva div { display: grid; flex: 1; min-width: 0; }
.marca-viva b { font-size: 14px; }
.marca-viva small, .marca-viva em { grid-area: 3 / 1; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.marca-viva small { color: var(--ink-500); opacity: 0; }
.marca-viva em { display: flex; align-items: center; gap: 4px; color: var(--done-fg); font-style: normal; font-weight: 800; }
.marca-viva em svg { width: 13px; height: 13px; stroke-width: 3; }
.marca-viva strong { font-size: 18px; font-weight: 800; line-height: 1.3; }
.marca-check { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--done-bg); color: var(--done-fg); }
.marca-check svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Notas y fotos */
.nota-viva { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: calc(100% - 32px); }
.nota-burbuja { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--lime-50); font-size: 15px; font-weight: 700; box-shadow: var(--shadow-raised); }
.nota-burbuja svg { width: 18px; height: 18px; }
.nota-foto { display: grid; place-items: center; width: 60px; height: 60px; align-self: flex-end; border-radius: 16px; background: linear-gradient(135deg, #3a3935, #191918); color: var(--lime-500); box-shadow: var(--shadow-raised); rotate: 6deg; }

/* Historial */
.barras { display: flex; align-items: flex-end; gap: 8px; width: 200px; height: 104px; }
.barras i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--ink-900); transform-origin: bottom; }
.barras i:last-child { background: var(--lime-500); box-shadow: inset 0 0 0 2px var(--ink-900); }
.descarga { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--ink-900); color: var(--lime-500); font-size: 13px; font-weight: 800; }
.descarga svg { width: 16px; height: 16px; }

/* Los dispositivos */
.equipos { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.equipo { display: grid; place-items: center; border: 5px solid var(--ink-900); background: var(--surface-page); }
.equipo-movil { width: 66px; height: 124px; border-radius: 16px; }
.equipo-tableta { width: 132px; height: 100px; border-radius: 14px; }
.equipo-portatil { border: 0; background: none; }
.equipo-pantalla { display: grid; place-items: center; width: 190px; height: 118px; border: 6px solid var(--ink-900); border-radius: 10px 10px 0 0; background: var(--surface-page); }
.equipo-base { display: block; width: 236px; height: 10px; border-radius: 0 0 10px 10px; background: var(--ink-900); }
.equipo-pago { display: grid; padding: 4px 8px; border-radius: 8px; background: var(--lime-50); box-shadow: 0 0 0 2px var(--lime-500); font-size: 13px; font-weight: 800; line-height: 1.2; }
.equipo-pago small { color: var(--done-fg); font-size: 8px; }
.equipo-tableta .equipo-pago { font-size: 16px; }
.equipo-portatil .equipo-pago { font-size: 20px; }
@media (max-width: 480px) { .equipo-tableta { display: none; } }

/* Aparecer al bajar, y las escenas en movimiento */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), transform .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
  .revela.visto { opacity: 1; transform: none; }
  .visto .voz-ondas i { animation: voz .9s ease-in-out infinite alternate; }
  .visto .voz-ondas i:nth-child(2) { animation-delay: -.3s; } .visto .voz-ondas i:nth-child(3) { animation-delay: -.6s; }
  .visto .voz-ondas i:nth-child(4) { animation-delay: -.15s; } .visto .voz-ondas i:nth-child(5) { animation-delay: -.45s; }
  .visto .voz-ondas i:nth-child(6) { animation-delay: -.75s; } .visto .voz-ondas i:nth-child(7) { animation-delay: -.2s; }
  .visto .voz-parlante { animation: late 1.8s ease-out infinite; }
  .visto .qr-linea { animation: escanea 3.2s ease-in-out infinite; }
  .visto .qr-llego { animation: llega-chip 3.2s cubic-bezier(.3, 1.5, .5, 1) infinite; }
  .visto .marca-avatar { animation: marca-avatar 4s infinite; }
  .visto .marca-check { animation: marca-check 4s infinite; }
  .visto .marca-viva em { animation: marca-sale 4s infinite; }
  .visto .marca-viva small { animation: marca-entra 4s infinite; }
  .visto .nota-burbuja { animation: nota .7s cubic-bezier(.2, .9, .3, 1.2) .2s backwards; }
  .visto .nota-foto { animation: foto .6s cubic-bezier(.3, 1.5, .5, 1) .7s backwards; }
  .visto .push { animation: push 4.5s cubic-bezier(.2, .9, .3, 1.1) infinite; }
  .visto .barras i { animation: crece .9s cubic-bezier(.2, .9, .3, 1) backwards; }
  .visto .barras i:nth-child(2) { animation-delay: .06s; } .visto .barras i:nth-child(3) { animation-delay: .12s; }
  .visto .barras i:nth-child(4) { animation-delay: .18s; } .visto .barras i:nth-child(5) { animation-delay: .24s; }
  .visto .barras i:nth-child(6) { animation-delay: .3s; } .visto .barras i:nth-child(7) { animation-delay: .36s; }
  .visto .descarga svg { animation: baja 1.6s ease-in-out infinite; }
  .visto .equipo-pago { animation: equipo 3.2s cubic-bezier(.3, 1.4, .5, 1) infinite; }
}
@keyframes voz { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(214, 247, 91, .6); } 100% { box-shadow: 0 0 0 18px rgba(214, 247, 91, 0); } }
@keyframes escanea { 0% { top: 8%; opacity: 0; } 10% { opacity: 1; } 45% { top: 90%; opacity: 1; } 55%, 100% { top: 90%; opacity: 0; } }
@keyframes llega-chip { 0%, 50% { opacity: 0; transform: scale(.6) translateY(8px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes marca-avatar { 0%, 45% { background: var(--surface-page); } 55%, 100% { background: var(--lime-500); } }
@keyframes marca-check { 0%, 45% { background: var(--line-200); color: var(--ink-500); } 55%, 100% { background: var(--done-bg); color: var(--done-fg); } }
@keyframes marca-sale { 0%, 45% { opacity: 0; transform: translateY(4px); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes marca-entra { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes nota { 0% { opacity: 0; transform: translateX(-16px) scale(.9); } }
@keyframes foto { 0% { opacity: 0; transform: scale(.5); } }
@keyframes push { 0% { opacity: 0; transform: translateY(-36px) scale(.96); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes crece { 0% { transform: scaleY(0); } }
@keyframes baja { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes equipo { 0% { opacity: 0; transform: scale(.7); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.95); } }

/* Seguridad */
.caja-blanca { max-width: 1024px; margin-inline: auto; padding: 32px 24px; border-radius: 40px; background: var(--surface-card); box-shadow: var(--shadow-raised); }
@media (min-width: 640px) { .caja-blanca { padding: 56px 48px; } }
.caja-blanca .tarjeta { background: var(--surface-page); }

/* Planes: el selector marca el plan que sirve (portada.js). */
.elige { display: grid; gap: 20px 40px; max-width: 56rem; margin: 40px auto 0; padding: 24px; border-radius: 28px; background: var(--surface-card); }
.elige label { display: grid; gap: 4px; font-weight: 700; }
.elige label span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.elige output { font-size: 22px; font-weight: 800; white-space: nowrap; }
.elige input { width: 100%; height: 44px; margin: 0; accent-color: var(--ink-900); cursor: pointer; }
.elige-resultado { color: var(--ink-700); font-size: 18px; text-align: center; }
.elige-resultado strong { color: var(--ink-900); font-weight: 800; }
@media (min-width: 768px) { .elige { grid-template-columns: 1fr 1fr; } .elige-resultado { grid-column: 1 / -1; } }
.periodo { display: flex; width: fit-content; margin: 28px auto 0; padding: 4px; border-radius: 16px; background: var(--line-200); }
.periodo label { padding: 10px 16px; border-radius: 12px; color: var(--ink-500); font-size: 15px; font-weight: 700; cursor: pointer; }
.periodo label:has(:checked) { background: var(--surface-card); color: var(--ink-900); box-shadow: 0 1px 3px rgba(26, 26, 24, .14); }
.periodo label:has(:focus-visible) { outline: 2px solid; outline-offset: 2px; }
.periodo input { position: absolute; opacity: 0; }
.periodo + .planes { margin-top: 28px; }
@media (prefers-reduced-motion: no-preference) { .plan, .empresarial { transition: background-color .3s, color .3s, box-shadow .3s; } }
.plan-destacado .boton, .plan-destacado .boton:hover { background: var(--lime-500); color: var(--on-lime); }
.empresarial.plan-elegido { box-shadow: 0 0 0 3px var(--ink-900); }
.plan { position: relative; display: flex; flex-direction: column; border-radius: 28px; background: var(--surface-card); padding: 28px 24px 24px; }
.plan h3 { font-size: 18px; font-weight: 800; }
.precio { margin-top: 12px; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
/* Arriba y no al lado: al lado no cabía en una tarjeta de 1.024 px. */
.precio del { display: block; margin-bottom: 6px; color: var(--ink-500); font-size: 16px; font-weight: 700; }
.al-mes { margin-top: 6px; color: var(--ink-500); font-size: 13px; }
.cupos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid var(--line-100); }
.cupos b { display: block; font-size: 22px; font-weight: 800; }
.cupos span { color: var(--ink-500); font-size: 13px; line-height: 1.3; }
.plan .boton { margin-top: auto; }
.plan-destacado { background: var(--surface-inverse); color: #fff; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45); }
.plan-destacado .al-mes, .plan-destacado del, .plan-destacado .cupos span { color: var(--ink-inverse-muted); }
.plan-destacado .cupos { border-color: rgba(255, 255, 255, .12); }
.etiqueta { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--lime-500); color: var(--on-lime); font-size: 12px; font-weight: 800; }
.empresarial { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 28px 24px; border-radius: 28px; background: var(--surface-card); }
.empresarial p { max-width: 36rem; margin-top: 6px; color: var(--ink-500); }
.incluye { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 32px; color: var(--ink-700); }
.incluye li { display: flex; align-items: center; gap: 8px; }
.incluye svg { width: 18px; height: 18px; color: var(--done-fg); stroke-width: 3; }
.letra-chica { max-width: 48rem; margin: 16px auto 0; color: var(--ink-500); font-size: 15px; text-align: center; }

/* El cierre */
.cierre { padding: 48px 24px; border-radius: 40px; background: radial-gradient(120% 120% at 100% 0, #2c2c2a 0%, #191918 60%); color: #fff; text-align: center; }
@media (min-width: 640px) { .cierre { padding: 72px 48px; } }
.cierre .bajada { margin-inline: auto; color: var(--ink-inverse-muted); }
.cierre .hero-acciones { justify-content: center; }

/* Preguntas */
.preguntas { display: grid; gap: 40px; }
@media (min-width: 1024px) { .preguntas { grid-template-columns: 5fr 7fr; } }
.preguntas details { border-radius: 24px; background: var(--surface-page); }
.preguntas details + details { margin-top: 12px; }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 24px; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 500; transition: rotate .2s; }
.preguntas details[open] summary::after { rotate: 45deg; }
.preguntas details p { padding: 0 24px 24px; color: var(--ink-500); }
.preguntas details a { color: var(--ink-900); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.letra-chica strong { color: var(--ink-900); }

/* Pie */
.pie { margin-top: 64px; background: var(--surface-inverse); color: #fff; }
.pie .envoltura { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 32px; }
@media (min-width: 768px) { .pie .envoltura { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pie p { max-width: 22rem; margin-top: 12px; color: var(--lime-500); font-size: 14px; }
.pie h3 { font-size: 15px; font-weight: 800; }
.pie ul { margin-top: 12px; }
.pie li a { display: inline-flex; min-height: 48px; align-items: center; color: var(--ink-inverse-muted); font-size: 15px; text-decoration: none; }
.pie li a:hover { color: #fff; }
.pie .derechos { max-width: none; margin: 0; grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--ink-inverse-muted); font-size: 13px; }

/* Al abrir: el título, la bajada y el celular suben en escalera. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .7s cubic-bezier(.16, 1, .3, 1) var(--retraso, 0s) backwards; }
}
@keyframes entra { 0% { opacity: 0; transform: translateY(24px); } }

/* El celular de la portada: la pantalla del mostrador de la app, en claro.
   Se arma a 390 dp con los tokens de la app (lib/app/tema) y se encoge con
   `zoom`: así las medidas se copian tal cual de Flutter. Si la pantalla de
   Pagos cambia, se vuelve a copiar de una captura real. */
.cel{position:relative;margin-inline:auto;width:100%;max-width:290px;color:#1a1a18;font-family:"Plus Jakarta Sans",sans-serif;font-variant-numeric:tabular-nums}
.cel-marco{border-radius:3rem;background:#0a0a09;padding:10px;box-shadow:0 24px 60px -12px rgba(0,0,0,.55)}
.cel-pantalla{height:560px;overflow:hidden;border-radius:2.5rem}
.cel-app{position:relative;zoom:.6923;width:390px;height:809px;background:linear-gradient(#191918 206px,#f2f1ee 206px)}
.cel-isla{position:absolute;top:14px;left:50%;width:124px;height:34px;translate:-50%;border-radius:99px;background:#0a0a09}
.cel-estado{display:flex;justify-content:space-between;align-items:center;height:44px;padding:8px 34px 0;color:#fff;font-size:15px;font-weight:700}
.cel-bateria{width:26px;height:13px;border:1.5px solid rgba(255,255,255,.7);border-radius:4px;padding:1.5px}
.cel-bateria span{display:block;width:75%;height:100%;border-radius:1.5px;background:#fff}
.cel-cabecera{display:flex;align-items:center;gap:4px;height:48px;margin:18px 16px 0;color:#fff}
.cel-logo{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:6px;border-radius:50%;background:rgba(255,255,255,.15);font-size:14px;font-weight:800}
.cel-negocio{flex:1;min-width:0}
.cel-nombre{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.2;white-space:nowrap}
.cel-caja{color:#d6f75b;font-size:14px;font-weight:700}
.cel-vivo,.cel-punto{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:#12924f}
.cel-punto{width:8px;height:8px}
.cel-icono{width:48px;height:24px;flex:none}
.cel svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cel-qr{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#d6f75b;color:#1a1a18}
.cel-qr svg{width:18px;height:18px}
/* Con JS es un botón: la caja mide 64 del dibujo (44 px reales) y el círculo, 40. */
button.cel-qr{width:64px;height:64px;margin:-12px;padding:12px;border:0;background:#d6f75b content-box;cursor:pointer}
.cel-ultimo{position:relative;margin:24px 16px 12px;padding:14px 16px 16px;border-radius:24px;background:#f1fbc8;box-shadow:0 8px 28px rgba(20,20,20,.08)}
/* El selector va en la esquina de la tarjeta, sobre la fila de «Nuevo» y sin
   alto propio que sumar. Sus botones miden 64 del dibujo (44 px reales); lo que
   se ve (la pastilla) es el `::before`. */
.cel-sel{position:absolute;top:8px;right:12px;z-index:2;display:flex;gap:2px;padding:3px;border-radius:12px;background:#f2f1ee}
.cel-sel button{position:relative;isolation:isolate;height:64px;margin:-20px 0;padding:0 12px;border:0;background:none;color:#5f5d58;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cel-sel button:before{content:"";position:absolute;inset:20px 0;z-index:-1;border-radius:9px}
.cel-sel button[aria-pressed=true]{color:#1a1a18}
.cel-sel button[aria-pressed=true]:before{background:#fff;box-shadow:0 1px 3px rgba(26,26,24,.14)}
/* En el total la tarjeta enseña la cifra y lo que la subió, con el mismo alto. */
.cel[data-tarjeta=total] .cel-nuevo{visibility:hidden}
.cel[data-tarjeta=total] .cel-quien .cel-avatar,.cel[data-tarjeta=total] .cel-linea{display:none}
.cel-quien{min-height:46px}
.cel-nuevo{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.cel-fila-monto{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.cel-monto-grande{font-size:48px;line-height:1;font-weight:800;letter-spacing:-1.92px}
.cel-quien{display:flex;align-items:center;gap:12px;margin-top:10px}
.cel-avatar{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:16px;background:#f2f1ee;font-size:14px;font-weight:800}
.cel-avatar.cel-hecho{background:#d6f75b}
.cel-texto{flex:1;min-width:0}
.cel-pagador{overflow:hidden;font-size:16px;font-weight:700;line-height:1.33;white-space:nowrap;text-overflow:ellipsis}
.cel-linea{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:2px;color:#5f5d58;font-size:13px;font-weight:500;white-space:nowrap}
.cel-linea-chica{font-size:12px}
.cel-donde{display:inline;white-space:normal}
.cel-donde i{display:inline-block;margin-right:4px;vertical-align:1px}
.cel-linea i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--b)}
.cel-linea b{font-weight:800}
.cel-seccion{margin:0 20px 10px;font-size:16px;font-weight:800}
.cel-grupo{margin:0 16px;padding:0;list-style:none;border-radius:24px;background:#fff;overflow:hidden}
.cel-grupo li{position:relative;display:flex;align-items:center;gap:14px;padding:16px}
.cel-grupo li+li:before{content:"";position:absolute;top:0;right:0;left:92px;height:1px;background:#efeee9}
.cel-monto{flex:none;font-size:20px;font-weight:800;letter-spacing:-.4px}
.cel-marca{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#e3e1db;color:#5f5d58}
.cel-marca.cel-hecho{background:#e6f6ec;color:#0b6b3a}
.cel-marca svg{width:9px;height:9px;stroke-width:3}
.cel-desvanece{position:absolute;inset:auto 0 0;height:110px;pointer-events:none;background:linear-gradient(transparent,#f2f1ee)}
.cel-home{position:absolute;bottom:12px;left:50%;width:150px;height:5px;translate:-50%;border-radius:99px;background:rgba(26,26,24,.4)}
/* Lo que se toca: un botón transparente sobre la tarjeta o la fila (la caja ya
   mide más de 64 del dibujo, que son 44 px reales con el celular al 69 %). */
.cel-abrir{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer}
/* La hoja del pago, como la de la app: al fondo de la pantalla del celular. Los
   34 de abajo son la zona segura del iPhone: el botón termina por encima de la
   barra (`.cel-home`, a 12 del fondo). */
.cel-hoja{position:absolute;inset:0;z-index:5;background:rgba(25,25,24,.5)}
.cel-hoja-hoja{position:absolute;right:0;bottom:0;left:0;padding:14px 20px 34px;border-radius:28px 28px 0 0;background:#fff}
.cel-hoja-asa{display:block;width:40px;height:5px;margin:0 auto 14px;border-radius:99px;background:#d9d7d0}
/* El QR a pantalla completa: el bloque (nombre, frase y código) centrado en vertical. */
.cel-qrcapa{position:absolute;inset:0;z-index:5;background:#fff}
.cel-qrcapa-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:0 20px;text-align:center}
.cel-qrcapa .cel-hoja-cerrar{position:absolute;top:56px;right:20px;margin:-12px}
.cel-qr-negocio{font-size:26px;font-weight:800;letter-spacing:-.4px}
.cel-qr-frase{margin-top:2px;color:#5f5d58;font-size:15px;font-weight:500}
.cel .cel-qr-dibujo{width:232px;height:232px;margin-top:20px;fill:#1a1a18;stroke:none}
.cel-hoja-quien{display:flex;align-items:center;gap:12px}
.cel-hoja-quien .cel-pagador{flex:1;font-size:20px;font-weight:800}
.cel-hoja-cerrar{display:grid;place-items:center;flex:none;width:64px;height:64px;margin:-12px;padding:12px;border:0;border-radius:50%;background:#f2f1ee content-box;color:#1a1a18;cursor:pointer}
.cel-hoja-cerrar svg{width:20px;height:20px}
.cel-hoja-monto{display:flex;align-items:center;gap:12px;margin-top:14px}
.cel-hoja-marca{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#e3e1db;color:#5f5d58}
.cel-hoja-marca.cel-hecho{background:#e6f6ec;color:#0b6b3a}
.cel-hoja-marca svg{width:16px;height:16px;stroke-width:3}
.cel-hoja-datos{margin:14px 0;padding:2px 16px;border-radius:20px;background:#f6f5f2;color:#5f5d58;font-size:15px;font-weight:500}
.cel-hoja-datos div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.cel-hoja-datos div+div{border-top:1px solid #efeee9}
.cel-hoja-datos b{color:#1a1a18;font-weight:800}
.cel-hoja-datos i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--b)}
/* La caja de la nota, como `CajaDeNota`: píldora de 48, borde de campo. El botón
   llena la píldora y mide 64 del dibujo (44 px reales); la cámara irá a su derecha. */
.cel-nota-caja{display:flex;align-items:center;margin-bottom:14px;border:1px solid #8f8b83;border-radius:99px;background:#fff}
.cel-nota{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:64px;margin:-9px 0;padding:0 16px;border:0;background:none;color:#7d7a73;font:inherit;font-size:14px;font-weight:500;line-height:1.429;text-align:left;cursor:pointer}
.cel-nota span{flex:1;min-width:0;overflow:hidden;color:#1a1a18;text-overflow:ellipsis;white-space:nowrap}
.cel-nota svg{flex:none;width:20px;height:20px;color:#5f5d58}
.cel-camara{display:grid;place-items:center;flex:none;width:64px;height:64px;margin:-9px 0;padding:0;border:0;background:none;color:#5f5d58;cursor:pointer}
.cel-camara svg{width:24px;height:24px}
/* Las miniaturas, como `FotosDelPago`: 56 con 8 de separación, encima de la caja,
   así que agregar o quitar una foto no mueve la caja ni la cámara. El botón mide
   64 y el cuadro que se ve, 56. */
.cel-fotos{display:flex;align-items:center;gap:8px;margin-bottom:14px;color:#5f5d58;font-size:13px;font-weight:500}
.cel-foto{position:relative;flex:none;width:64px;height:64px;margin:-4px;padding:0;border:0;background:none;cursor:pointer}
.cel-foto:before{content:"";position:absolute;inset:4px;border:1px solid #efeee9;border-radius:16px;background:#f7f6f3}
.cel-foto svg{position:absolute;left:16px;top:16px;width:32px;height:32px}
.cel-foto svg+svg{left:auto;top:0;right:0;width:20px;height:20px;padding:4px;border-radius:50%;background:#1a1a18;color:#fff;stroke-width:3}
/* La burbuja de la nota, como `BurbujaDeNota`: bajo el contenido de la fila, con la sangría del texto. */
.cel-grupo li[data-nota],.cel-grupo li[data-fotos]{display:grid;grid-template-columns:46px minmax(0,1fr) auto;column-gap:14px;row-gap:8px;padding-bottom:14px}
.cel-burbuja{display:flex;align-items:center;gap:6px;grid-column:2/-1;justify-self:start;max-width:100%;padding:6px 10px;border-radius:10px;background:#f1fbc8;font-size:13px;font-weight:500;line-height:1.462}
.cel-burbuja svg{flex:none;width:13px;height:13px}
.cel-burbuja span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cel-hoja-accion{display:block;width:100%;height:64px;border:0;border-radius:99px;background:#191918;color:#d6f75b;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
/* «Pago recibido», sobre el QR: noche, el círculo lima y los dos botones, centrados
   en la pantalla entera. */
.cel-rec{position:absolute;inset:0;z-index:6;background:#191918;color:#fff}
.cel-rec-in{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:0 24px;text-align:center}
.cel-rec-circulo{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#d6f75b;color:#1a1a18}
.cel-rec-circulo svg{width:48px;height:48px;stroke-width:3}
.cel-rec-titulo{margin:20px 0 10px;font-size:17px;font-weight:700}
.cel-rec-monto{font-size:64px;line-height:1.1;font-weight:800;letter-spacing:-2.5px}
.cel-rec-quien{margin:2px 0 28px;color:rgba(255,255,255,.85);font-size:20px;font-weight:700}
.cel-rec .cel-hoja-accion{background:#fff;color:#191918}
.cel-rec .cel-contorno{margin-top:12px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff}
.cel-hoja-accion.cel-quita{background:#f2f1ee;color:#1a1a18}
/* La llegada, como en la app (UltimoPago): el contenido sube con resorte, la
   tarjeta late y dos ondas lima salen de su borde; el punto «Nuevo» late. */
@media (prefers-reduced-motion:no-preference){
.cel-ultimo.llega{animation:cel-late .52s linear var(--llega,.75s) backwards}
.cel-ultimo.llega>*{animation:cel-sube .52s cubic-bezier(.2,1.3,.3,1) var(--llega,.75s) backwards}
.cel-ultimo.llega>.cel-abrir,.cel-ultimo.llega>.cel-sel{animation:none}
.cel-ultimo.llega:before,.cel-ultimo.llega:after{content:"";position:absolute;inset:0;border:2px solid #d6f75b;border-radius:24px;opacity:0;pointer-events:none;animation:cel-onda 1.4s cubic-bezier(.2,.6,.3,1) var(--llega,.75s)}
.cel-ultimo.llega:after{animation-delay:calc(var(--llega,.75s) + .35s)}
.cel-vivo:after,.cel-punto:after{content:"";position:absolute;inset:0;border-radius:50%;background:#12924f;animation:cel-latido 1.2s ease-out infinite}
/* El pago que baja de la tarjeta a la lista (portada.js). */
.cel-grupo li.baja{overflow:hidden;animation:cel-baja .5s cubic-bezier(.2,.8,.3,1)}
.cel-avatar,.cel-marca{transition:background-color .4s,color .4s}
/* La hoja sólo se desvanece: una que se mueve al abrir tiene sus botones en otro sitio durante el primer instante. */
.cel-hoja,.cel-qrcapa,.cel-rec{animation:cel-vela .2s}
/* «Pago recibido», como en la app: el círculo salta, el chulo se traza, dos
   ondas salen de él, el monto se enfoca y los botones suben (a los .6 s). */
.cel-rec-circulo{animation:cel-pop .45s cubic-bezier(.3,1.5,.5,1) .2s backwards}
.cel-rec-circulo path{stroke-dasharray:48;animation:cel-traza .3s ease-out .4s backwards}
.cel-rec-circulo:before,.cel-rec-circulo:after{content:"";position:absolute;inset:0;border:2px solid #d6f75b;border-radius:50%;opacity:0;animation:cel-radar 2.2s cubic-bezier(.2,.6,.3,1) .65s infinite}
.cel-rec-circulo:after{animation-delay:1.75s}
.cel-rec-monto{animation:cel-enfoca .45s cubic-bezier(.2,.8,.2,1) .3s backwards}
.cel-rec .cel-hoja-accion{animation:cel-sube .35s cubic-bezier(.2,.8,.2,1) .6s backwards}
.cel-rec .cel-contorno{animation-delay:.65s}
}
@keyframes cel-vela{0%{opacity:0}}
@keyframes cel-pop{0%{transform:scale(0)}60%{transform:scale(1.15)}}
@keyframes cel-radar{0%{opacity:.8}100%{opacity:0;transform:scale(2.6)}}
@keyframes cel-traza{0%{stroke-dashoffset:48}}
@keyframes cel-enfoca{0%{opacity:0;filter:blur(14px);letter-spacing:.12em}}
@keyframes cel-baja{0%{max-height:0;padding-top:0;padding-bottom:0;opacity:0}100%{max-height:120px}}
@keyframes cel-sube{0%{transform:translateY(22px)}}
@keyframes cel-late{0%{scale:.985}40%{scale:1.015}100%{scale:1}}
@keyframes cel-onda{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.12,1.3)}}
@keyframes cel-latido{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3)}}

/* En un celular, lo que era una pila de tarjetas (14 pantallas de dedo) se
   desliza de lado: la siguiente asoma, para que se note que hay más. El
   relleno de arriba y abajo es para la etiqueta y la sombra del plan
   elegido, que `overflow` cortaría. */
@media (max-width: 639px) {
  .desliza { display: flex; gap: 12px; margin: 26px -16px 0; padding: 14px 16px 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .desliza::-webkit-scrollbar { display: none; }
  .desliza > * { flex: 0 0 84%; scroll-snap-align: start; }
  .periodo + .planes { margin-top: 14px; }
}

/* «Crea tu cuenta» fijo abajo, sólo donde la cabecera no lo tiene. */
.fijo { position: fixed; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 16px; z-index: 40; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); visibility: hidden; translate: 0 150%; transition: translate .3s, visibility .3s; }
.fijo.a-la-vista { visibility: visible; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .fijo { transition: none; } }
@media (min-width: 520px) { .fijo { display: none; } }
@media (max-width: 519px) { .pie .envoltura { padding-bottom: 104px; } }