/* ============================================================
   Sonanta — Sitio · páginas de producto

   Portada, Cómo funciona, Registrar, Avisos, Resumen, Privacidad y
   Precio. Se carga después de `styles.css` y solo en esas páginas.

   Casi todo lo que aparece dentro de un iPhone está dibujado en
   HTML/CSS, no fotografiado: así se ve nítido a cualquier tamaño y,
   sobre todo, puede contar el movimiento —cómo entra un gasto, cómo
   llega un aviso— que una captura fija no puede.
   ============================================================ */

/* --- Piezas comunes dentro de la pantalla ----------------------- */

.screen .sbar {
  position: absolute;
  z-index: 3;
  inset: calc(var(--w) * 0.052) calc(var(--w) * 0.085) auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sbar-ink, var(--ink));
  font-size: calc(var(--w) * 0.043);
  font-weight: 600;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.screen .sbar .sb { display: flex; align-items: center; gap: calc(var(--w) * 0.018); }
.screen .sbar svg { height: calc(var(--w) * 0.036); width: auto; fill: currentColor; }
.screen .island {
  position: absolute;
  z-index: 3;
  top: calc(var(--w) * 0.03);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.3);
  height: calc(var(--w) * 0.087);
  border-radius: 99px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: calc(var(--w) * 0.03);
}
.screen .home-ind {
  position: absolute;
  z-index: 3;
  bottom: calc(var(--w) * 0.024);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.31);
  height: calc(var(--w) * 0.011);
  border-radius: 99px;
  background: var(--home-ind, rgba(0, 0, 0, 0.7));
}

/* Emoji de categoría sobre su tinte pastel, como CategoryEmojiBadge. */
.emo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.9em;
  aspect-ratio: 1;
  border-radius: 50%;
  font-style: normal;
  line-height: 1;
  background: color-mix(in srgb, var(--c, var(--c-stone)) 16%, transparent);
}

/* --- Escena: Sonanta escuchando (la pantalla coral) -------------

   Reconstrucción fiel de la pantalla real de escucha: los tonos salen
   muestreados de la captura y las proporciones, medidas sobre ella. */

.scene-live {
  position: absolute;
  inset: 0;
  --sbar-ink: rgba(28, 20, 18, 0.88);
  --home-ind: rgba(255, 255, 255, 0.55);
  color: #fff;
  background:
    radial-gradient(72% 46% at 50% 40%, rgba(255, 255, 255, 0.16), transparent 72%),
    linear-gradient(180deg, #e1705a 0%, #de7f70 34%, #d05d4b 72%, #c04231 100%);
}
/* Isla con el punto ámbar de "micrófono en uso". */
.scene-live .island::after {
  content: "";
  width: calc(var(--w) * 0.021);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f0a53c;
}
.scene-live .dictation {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  left: calc(var(--w) * 0.095);
  right: calc(var(--w) * 0.095);
  text-align: center;
  font-size: calc(var(--w) * 0.08);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.26;
  text-wrap: balance;
}
.scene-live .dictation span {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
.scene-live .dictation span.on { opacity: 1; filter: none; }

/* El botón de escucha, con la onda de la marca latiendo dentro. */
.scene-live .listen {
  position: absolute;
  top: 76%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--w) * 0.26);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #faf6f4;
  display: grid;
  place-items: center;
  box-shadow: 0 calc(var(--w) * 0.012) calc(var(--w) * 0.05) rgba(120, 34, 22, 0.28);
}
.scene-live .listen::before {
  content: "";
  position: absolute;
  width: calc(var(--w) * 0.31);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.scene-live .listen .wave { height: calc(var(--w) * 0.11); gap: calc(var(--w) * 0.005); }
.scene-live .listen .wave i {
  width: calc(var(--w) * 0.006);
  background: var(--coral);
  transform: scaleY(var(--h, 1));
}
@media (prefers-reduced-motion: no-preference) {
  .scene-live .listen .wave i { animation: mark-breathe 1.3s ease-in-out infinite; }
}
/* La onda del botón es el logotipo, no un visualizador: late poco para
   seguir siendo reconocible. */
@keyframes mark-breathe {
  0%, 100% { transform: scaleY(calc(var(--h, 1) * 0.82)); }
  50% { transform: scaleY(var(--h, 1)); }
}

/* --- Escena: el resultado (la captura, con su hoja) --------------- */

.scene-result {
  position: absolute;
  inset: 0;
  background: var(--bg-2);
  color: var(--ink);
}
.r-head {
  position: absolute;
  top: calc(var(--w) * 0.24);
  left: calc(var(--w) * 0.08);
  right: calc(var(--w) * 0.08);
}
.r-k {
  display: block;
  font-size: calc(var(--w) * 0.075);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #8e8e93;
}
.r-total {
  display: block;
  font-family: var(--rounded);
  font-size: calc(var(--w) * 0.125);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.r-sub { display: block; margin-top: calc(var(--w) * 0.012); font-size: calc(var(--w) * 0.038); color: var(--ink-2); }

/* Filas de fondo: el día que ya existía antes de este gasto. */
.r-rows {
  position: absolute;
  top: calc(var(--w) * 0.62);
  left: calc(var(--w) * 0.055);
  right: calc(var(--w) * 0.055);
  display: grid;
  gap: calc(var(--w) * 0.025);
}
.r-rows li {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.03);
  padding: calc(var(--w) * 0.03) calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.05);
  background: #fff;
  font-size: calc(var(--w) * 0.042);
}
.r-rows .emo { font-size: calc(var(--w) * 0.045); }
.r-rows b { flex: 1; font-weight: 600; }
.r-rows em { font-style: normal; font-family: var(--rounded); font-weight: 600; }

.sheet {
  position: absolute;
  z-index: 2;
  left: calc(var(--w) * 0.03);
  right: calc(var(--w) * 0.03);
  bottom: calc(var(--w) * 0.03);
  display: flex;
  flex-direction: column;
  gap: calc(var(--w) * 0.028);
  padding: calc(var(--w) * 0.075) calc(var(--w) * 0.06) calc(var(--w) * 0.07);
  border-radius: calc(var(--w) * 0.1);
  background: #fff;
  box-shadow: 0 -12px 40px -16px rgba(0, 0, 0, 0.22);
  transform: translateY(112%);
  transition: transform 0.7s var(--spring);
}
.sheet::before {
  content: "";
  position: absolute;
  top: calc(var(--w) * 0.025);
  left: 50%;
  width: calc(var(--w) * 0.11);
  height: calc(var(--w) * 0.012);
  margin-left: calc(var(--w) * -0.055);
  border-radius: 99px;
  background: var(--bg-3);
}
[data-state="result"] > .scene-result .sheet { transform: none; }

.sh-quote {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  font-size: calc(var(--w) * 0.036);
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.3;
}
.sh-quote .wave { height: calc(var(--w) * 0.04); gap: 1.5px; }
.sh-quote .wave i { width: 1.5px; }
.sh-kicker {
  font-size: calc(var(--w) * 0.034);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-text);
}
.sh-amount {
  font-family: var(--rounded);
  font-size: calc(var(--w) * 0.12);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sh-amount small { font-size: 0.36em; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.sh-amount.center, .sh-sub.center, .sh-foot.center { text-align: center; }
.sh-sub { font-size: calc(var(--w) * 0.042); font-weight: 600; }
.sh-foot { font-size: calc(var(--w) * 0.035); color: var(--ink-2); }
.sh-rows { display: grid; }
.sh-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--w) * 0.03);
  padding: calc(var(--w) * 0.024) calc(var(--w) * 0.02);
  margin-inline: calc(var(--w) * -0.02);
  border-top: 1px solid var(--line-2);
  border-radius: calc(var(--w) * 0.02);
  font-size: calc(var(--w) * 0.039);
  color: var(--ink-2);
}
.sh-rows b {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.018);
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
.sh-rows .emo { font-size: calc(var(--w) * 0.036); }
/* Campo dudoso: resaltado, como en la tarjeta real (ADR-007). */
.sh-rows li.flag { background: var(--coral-wash); border-top-color: transparent; }
.sh-rows li.flag b { color: var(--coral-text); }
.sh-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: calc(var(--w) * 0.01);
  font-size: calc(var(--w) * 0.038);
  font-weight: 600;
}
.sh-status .ok {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.015);
  padding: calc(var(--w) * 0.018) calc(var(--w) * 0.035);
  border-radius: 99px;
  background: rgba(52, 199, 89, 0.13);
  color: #1c7a38;
}
.sh-status .ok svg { width: calc(var(--w) * 0.04); height: calc(var(--w) * 0.04); stroke: currentColor; stroke-width: 2.6; fill: none; }
.sh-status .undo { color: var(--coral-text); font-weight: 500; }
.sh-status .save {
  padding: calc(var(--w) * 0.02) calc(var(--w) * 0.05);
  border-radius: 99px;
  background: var(--coral-cta);
  color: #fff;
}
.sh-status .hint { color: var(--coral-text); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .sheet > * { animation: sheet-in 0.55s var(--spring) both; animation-delay: calc(var(--d, 0) * 70ms + 200ms); }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(calc(var(--w) * 0.03)); }
  to { opacity: 1; transform: none; }
}

/* Las dos escenas se cruzan: escuchar y resultado. */
.screen[data-state] > .scene-live,
.screen[data-state] > .scene-result {
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.screen[data-state="listen"] > .scene-result,
.screen[data-state="result"] > .scene-live { opacity: 0; transform: scale(1.02); pointer-events: none; }

/* --- Portada: el hero --------------------------------------------- */

.home-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(48px, 6vw, 72px);
  text-align: center;
  overflow: clip;
}
.home-hero h1 { font-size: clamp(48px, 8vw, 104px); margin-top: var(--s4); }
.home-hero .lead { max-width: 40ch; margin-inline: auto; }
.home-hero .cta-row { justify-content: center; margin-top: var(--s4); }
.home-hero .micro { margin-top: var(--s2); }

/* --- La demo: di una frase y mira qué pasa ---------------------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "said phone dest"
    "controls controls controls";
  column-gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: 1240px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding-inline: var(--gutter);
  text-align: left;
}

.demo-k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.demo-k .wave { height: 13px; gap: 2px; }
.demo-k .wave i { width: 2px; }

.demo > .demo-said { grid-area: said; justify-self: end; max-width: 380px; text-align: right; }
.demo-phrase {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.35;
  text-wrap: balance;
  min-height: 3.3em;
}
.demo-phrase .q { color: var(--ink-2); font-weight: 500; }

/* Cada parte reconocida se subraya con el tono de su casilla. El
   subrayado entra en orden, después de que la frase se "oyó". */
.tok {
  --tc: var(--c-stone);
  border-radius: 6px;
  padding: 0 3px;
  margin: 0 -1px;
  background-image: linear-gradient(color-mix(in srgb, var(--tc) 16%, transparent), color-mix(in srgb, var(--tc) 16%, transparent));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  box-shadow: inset 0 -2px 0 transparent;
  transition: background-size 0.55s var(--ease), box-shadow 0.4s var(--ease);
  transition-delay: calc(var(--d, 0) * 150ms + 100ms);
}
[data-state="result"] .tok { background-size: 100% 100%; box-shadow: inset 0 -2px 0 var(--tc); }
.tok[data-role="amount"], .dot-amount { --tc: var(--coral); }
.tok[data-role="merchant"], .dot-merchant { --tc: var(--c-apricot); }
.tok[data-role="method"], .dot-method { --tc: var(--c-sky); }
.tok[data-role="date"], .dot-date { --tc: var(--c-violet); }
.tok[data-role="person"], .dot-person { --tc: var(--c-teal); }
.tok[data-role="period"], .dot-period { --tc: var(--c-gold); }
.tok[data-role="plan"], .dot-plan { --tc: var(--c-orchid); }
.tok[data-role="topic"], .dot-topic { --tc: var(--c-sage); }

.demo-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  color: var(--ink-2);
  min-height: 20px;
}
.demo-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  transition-delay: calc(var(--d, 0) * 150ms + 250ms);
}
[data-state="result"] .demo-legend li { opacity: 1; }
.demo-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }

.demo > .demo-phone { grid-area: phone; }
.demo-phone {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.demo-phone .device { --w: clamp(262px, 24vw, 312px); }
/* El halo del micrófono, el mismo que respira detrás del botón en la app. */
.demo-phone::before {
  content: "";
  position: absolute;
  inset: -4% -34% 8%;
  z-index: -2;
  background: radial-gradient(closest-side, rgba(242, 112, 92, 0.3), transparent 72%);
  filter: blur(40px);
}
@media (prefers-reduced-motion: no-preference) {
  .demo-phone::before { animation: breathe 6s ease-in-out infinite; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Aros que salen del teléfono mientras escucha: el motivo de las
   capturas de la tienda. */
.rings { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rings i {
  position: absolute;
  top: 50%; left: 50%;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 112, 92, 0.32);
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  [data-state="listen"] .rings i { animation: ring-out 2.8s var(--ease) infinite; }
  [data-state="listen"] .rings i:nth-child(2) { animation-delay: 0.7s; }
  [data-state="listen"] .rings i:nth-child(3) { animation-delay: 1.4s; }
  [data-state="listen"] .rings i:nth-child(4) { animation-delay: 2.1s; }
}
@keyframes ring-out {
  0% { transform: translate(-50%, -50%) scale(0.62); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}

.demo > .demo-dest { grid-area: dest; justify-self: start; width: 100%; max-width: 340px; }
.dest-list { display: grid; gap: 10px; }
.dest {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 30px -22px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
[data-state="result"] .dest {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--spring);
  transition-delay: calc(var(--d, 0) * 140ms + 700ms);
}
.dest .i {
  flex: none;
  width: 34px; height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: var(--coral-wash);
  color: var(--coral-text);
}
.dest b { display: block; font-size: var(--t-small); font-weight: 600; }
.dest span { display: block; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.45; }
.dest .dest-bar { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.dest .dest-bar i {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  border-radius: inherit;
  background: var(--c, var(--coral));
  transform-origin: left;
  transform: scaleX(var(--from, 0.8));
  transition: transform 0.9s var(--ease) 1.1s;
}
[data-state="result"] .dest .dest-bar i { transform: scaleX(1); }

.demo > .demo-controls { grid-area: controls; }
.demo-controls { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.demo-hint { font-size: var(--t-small); color: var(--ink-2); }
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 14px auto 0;
}
.chip {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform 0.4s var(--spring);
}
.chip:hover { border-color: var(--coral-line); transform: translateY(-1px); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { border-color: rgba(242, 112, 92, 0.55); background: var(--coral-wash); color: var(--coral-text); }
.chip .prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--coral);
  transform-origin: left;
  transform: scaleX(0);
}
.chip.timing .prog { animation: grow var(--dur, 6s) linear forwards; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.demo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 540px;
  margin: 14px auto 0;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 14px 34px -24px rgba(0, 0, 0, 0.3);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.demo-form:focus-within { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(242, 112, 92, 0.14); }
.demo-form .i { flex: none; width: 20px; height: 20px; color: var(--coral-text); }
.demo-form input { flex: 1; min-width: 0; padding: 8px 4px; font-size: var(--t-body); outline: none; }
.demo-form input::placeholder { color: #8e8e93; }
.demo-go {
  flex: none;
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 600;
  transition: transform 0.4s var(--spring), background-color var(--fast) var(--ease);
}
.demo-go:hover { background: #000; }
.demo-go:active { transform: scale(0.96); }
.demo-note { margin-top: 12px; font-size: var(--t-micro); color: var(--ink-2); }

@media (max-width: 1040px) {
  .demo {
    /* `minmax(0, 1fr)` y no `1fr`: la fila de frases se desliza en
       horizontal, y su ancho mínimo estiraría la columna entera. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "said" "phone" "controls";
    row-gap: var(--s4);
  }
  .demo-controls, .chips { min-width: 0; }
  .demo > .demo-said { justify-self: center; text-align: center; max-width: 30ch; }
  .demo-phrase { min-height: 2.8em; font-size: clamp(21px, 5.2vw, 26px); }
  .demo-legend { justify-content: center; }
  .demo-dest { display: none; }
  .demo-controls { margin-top: 0; }
  .demo-phone .device { --w: min(272px, 68vw); }
}
@media (max-width: 620px) {
  /* En una mano, las frases pasan en una fila que se desliza con el dedo. */
  .chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
            mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: center; }
  .demo-go { padding-inline: 16px; }
}

/* --- Portada: los tres momentos ----------------------------------- */

.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.moment {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  overflow: hidden;
  transition: transform 0.5s var(--spring), box-shadow 0.4s var(--ease);
}
.moment:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.35); }
.moment-stage {
  position: relative;
  height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(90% 80% at 50% 100%, rgba(242, 112, 92, 0.12), transparent 70%);
}
.moment-copy { padding: var(--s4) clamp(24px, 2.6vw, 32px) clamp(28px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; }
.moment-copy .eyebrow { color: var(--coral-text); margin-bottom: var(--s1); }
.moment-copy h3 { font-size: var(--t-head); }
.moment-copy p { margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; flex: 1; }
.moment-copy .btn-text { margin-top: var(--s2); align-self: flex-start; }

/* Mini escena 1 — cuatro caminos, el mismo gasto. */
.m-ways { position: relative; width: 250px; height: 150px; }
.m-way {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
}
.m-way .via {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--coral-cta);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(221, 83, 64, 0.8);
}
.m-way .via .i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); stroke-width: 2; }
.m-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 30px -20px rgba(0, 0, 0, 0.3);
  font-size: var(--t-small);
}
.m-row .emo { font-size: 17px; }
.m-row b { flex: 1; font-weight: 600; }
.m-row span { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.m-row em { font-style: normal; font-family: var(--rounded); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .m-way { animation: m-cycle 12s var(--ease) infinite; animation-delay: calc(var(--n) * 3s); }
  .m-way .m-row { animation: m-row 12s var(--spring) infinite; animation-delay: calc(var(--n) * 3s); }
}
@media (prefers-reduced-motion: reduce) { .m-way:first-child { opacity: 1; } }
@keyframes m-cycle {
  0% { opacity: 0; transform: translateY(8px); }
  4%, 23% { opacity: 1; transform: none; }
  27%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes m-row {
  0%, 5% { transform: translateY(14px) scale(0.96); }
  11%, 100% { transform: none; }
}

/* Mini escena 2 — los avisos llegan antes. */
.m-notifs { display: grid; gap: 8px; width: min(290px, 86%); }
.notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
          backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 12px 28px -16px rgba(0, 0, 0, 0.35);
  text-align: left;
  font-size: 13px;
  line-height: 1.32;
  color: var(--ink);
}
.notif img { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.notif div { min-width: 0; flex: 1; }
.notif .n-app { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); text-transform: uppercase; }
.notif .n-app em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.notif b { display: block; font-weight: 600; }
.notif span { display: block; color: #3a3a3c; }
@media (prefers-reduced-motion: no-preference) {
  .m-notifs .notif { animation: n-drop 9s var(--spring) infinite; animation-delay: calc(var(--n) * 1.2s); }
}
@keyframes n-drop {
  0% { opacity: 0; transform: translateY(-22px) scale(0.94); }
  6%, 80% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

/* Mini escena 3 — preguntas y el mes que se arma. */
.m-month { width: min(290px, 86%); display: grid; gap: 10px; }
.m-ask {
  justify-self: end;
  max-width: 88%;
  padding: 9px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--coral-cta);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.m-answer {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 30px -20px rgba(0, 0, 0, 0.3);
  text-align: left;
}
.m-answer b { display: block; font-family: var(--rounded); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.m-answer span { font-size: 12px; color: var(--ink-2); }
.m-bars { display: grid; gap: 7px; margin-top: 10px; }
.m-bars i { display: block; height: 6px; border-radius: 3px; width: var(--p); background: var(--c); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .m-ask { animation: m-ask 8s var(--spring) infinite; }
  .m-answer { animation: m-answer 8s var(--spring) infinite; }
  .m-bars i { animation: m-bar 8s var(--ease) infinite; animation-delay: calc(var(--n) * 0.12s); }
}
@keyframes m-ask {
  0% { opacity: 0; transform: translateY(10px) scale(0.95); }
  6%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes m-answer {
  0%, 14% { opacity: 0; transform: translateY(12px); }
  22%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}
@keyframes m-bar {
  0%, 22% { transform: scaleX(0); }
  36%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

@media (max-width: 940px) {
  .moments { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  /* Alto mínimo y no fijo: en un teléfono angosto las notificaciones
     apiladas crecen y no deben quedar cortadas. */
  .moment-stage { height: auto; min-height: 240px; padding-block: var(--s3); }
}

/* --- Precio: la gráfica de lo que cuesta con los meses ------------- */

.cost {
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 50px -34px rgba(0, 0, 0, 0.3);
}
.cost-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s3);
}
.cost-head h3 { font-size: var(--t-body); }
.cost-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-micro); color: var(--ink-2); }
.cost-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cost-legend i { width: 18px; height: 3px; border-radius: 2px; background: var(--c); }

.cost-plot { position: relative; height: clamp(220px, 30vw, 300px); margin-left: 40px; }
.cost-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cost-plot .grid line { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cost-plot .base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cost-plot .sub {
  fill: none;
  stroke: #6e6e73;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cost-plot .once {
  fill: none;
  stroke: var(--coral-cta);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.cost-plot .cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; }
.cost-plot.hovering .cursor { opacity: 0.5; }
/* Las líneas se dibujan al llegar: primero el pago único, que es corto,
   y después la escalera, mes a mes. */
@media (prefers-reduced-motion: no-preference) {
  .js .cost .draw { clip-path: inset(0 100% 0 0); }
  .js .cost.in .draw { animation: draw-x 1.8s var(--ease) forwards; }
  .js .cost.in .draw.once { animation-duration: 0.8s; }
  .js .cost .tag { opacity: 0; transition: opacity 0.5s var(--ease) 1.4s; }
  .js .cost.in .tag { opacity: 1; }
}
@keyframes draw-x { to { clip-path: inset(0 0 0 0); } }

.cost-y, .cost-x { position: absolute; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cost-y { left: -40px; transform: translateY(-50%); width: 34px; text-align: right; }
.cost-x { top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; }
.cost-x.start { transform: none; }
.cost-x.end { transform: translateX(-100%); }
.tag.cross { transform: translate(-18%, -100%); }
.tag.cross.dot::after { left: 18%; }
.tag {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}
.tag b { color: var(--ink); font-weight: 600; }
.tag.dot::after {
  content: "";
  position: absolute;
  left: 50%; top: calc(100% + 6px);
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--bg);
}
.tag.left { transform: translate(-100%, -50%); margin-left: -12px; }
.tag.right { transform: translate(0, -50%); margin-left: 12px; }
.tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.tip b { font-weight: 600; }
.tip i { display: inline-block; width: 8px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; background: var(--c); }
.cost-plot.hovering .tip { opacity: 1; }
.cost-foot { margin-top: calc(var(--s5) - 8px); font-size: var(--t-micro); color: var(--ink-2); }

@media (max-width: 620px) {
  .cost-plot { margin-left: 42px; }
  /* Cinco marcas de tiempo no caben en una mano: quedan tres. */
  .cost-x.hide-sm { display: none; }
  .cost-y { left: -42px; width: 37px; font-size: 11px; }
  .tag { font-size: 11px; padding: 5px 8px; white-space: normal; width: max-content; max-width: 150px; }
  .tag.left { max-width: 120px; }
}

/* La prueba en tres tiempos. */
.trial {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: clamp(40px, 5vw, 64px);
  list-style: none;
}
.trial::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px; right: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--coral) 0 66%, var(--line) 66% 100%);
}
.trial li { position: relative; padding-top: 48px; }
.trial li::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--coral);
  box-shadow: 0 0 0 5px var(--bg-2);
}
.section:not(.tint) .trial li::before { box-shadow: 0 0 0 5px var(--bg); }
.trial li:last-child::before { background: var(--coral); }
.trial .when { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--coral-text); }
.trial h3 { margin-top: 6px; font-size: var(--t-sub); }
.trial p { margin-top: 6px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; max-width: 30ch; }
@media (max-width: 760px) {
  .trial { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .trial::before { top: 16px; bottom: 16px; left: 15px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--coral) 0 66%, var(--line) 66% 100%); }
  .trial li { padding: 0 0 0 48px; }
  .trial li::before { top: 2px; left: 6px; }
}

.price-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.price-split .section-head { margin-bottom: 0; }
@media (max-width: 940px) { .price-split { grid-template-columns: minmax(0, 1fr); } }

/* --- Modo avión: la prueba que puedes hacer tú --------------------- */

.plane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 50px -34px rgba(0, 0, 0, 0.3);
}
.plane-copy h3 { font-size: var(--t-title); letter-spacing: -0.026em; }
.plane-copy > p:not(.plane-status) { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-sub); line-height: 1.45; max-width: 36ch; }
.plane-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }

.switch-row { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--t-body); }
.switch-row .i { color: #ff9f0a; }
/* Interruptor de iOS: 51 × 31, verde encendido. */
.switch {
  position: relative;
  flex: none;
  width: 51px; height: 31px;
  border-radius: 999px;
  background: #e9e9eb;
  transition: background-color 0.3s var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.4s var(--spring);
}
.switch[aria-checked="true"] { background: #34c759; }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

.plane-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 600;
  transition: transform 0.4s var(--spring);
}
.plane-go:active { transform: scale(0.96); }
.plane-go .i { width: 18px; height: 18px; }
.plane-status { margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); min-height: 1.5em; }
.plane-status b { color: var(--ink); }

.plane .device { --w: clamp(220px, 20vw, 250px); }
/* Barra de estado: cobertura y wifi, o el avión. */
.sb-net, .sb-plane { display: flex; align-items: center; gap: calc(var(--w) * 0.018); }
.sb-plane { display: none; color: var(--ink); }
[data-airplane="true"] .sb-net { display: none; }
[data-airplane="true"] .sb-plane { display: flex; }
.plane .scene-result .r-head { top: calc(var(--w) * 0.26); }
.plane-empty {
  position: absolute;
  top: 58%;
  left: 12%; right: 12%;
  text-align: center;
  font-size: calc(var(--w) * 0.048);
  color: var(--ink-2);
  transition: opacity 0.3s var(--ease);
}
[data-state="result"] .plane-empty { opacity: 0; }
.offline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 159, 10, 0.14);
  color: #9a5b00;
  font-size: calc(var(--w) * 0.036);
  font-weight: 600;
}

@media (max-width: 760px) {
  .plane { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .plane-copy > p { margin-inline: auto; }
  .plane-controls { justify-content: center; }
}

/* --- Cierre de la portada ----------------------------------------- */

.closing { text-align: center; }
.closing blockquote {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.1;
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
.closing .cite { display: block; margin-top: var(--s3); font-size: var(--t-micro); color: var(--ink-2); }
.closing .cta-band { margin-top: clamp(56px, 7vw, 96px); }

/* Tres garantías en una línea, sin tarjetas. */
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}
.promises li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
.promises .i { flex: none; color: var(--coral-text); }
.promises b { display: block; color: var(--ink); font-weight: 600; font-size: var(--t-body); }
@media (max-width: 760px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* --- Filas de función: texto y escena, lado a lado ----------------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.feature-row.flip { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
.feature-row.flip .feature-stage { order: -1; }
.feature-stage { display: flex; justify-content: center; position: relative; }
.feature-stage .device { --w: clamp(250px, 25vw, 310px); }
.feature-copy .lead { max-width: 40ch; }
.feature-copy h2 { max-width: 18ch; }
.limit {
  display: flex;
  gap: 10px;
  margin-top: var(--s4);
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 48ch;
}
.tint .limit { background: var(--bg); }
.limit .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); }
.limit b { color: var(--ink); font-weight: 600; }

@media (max-width: 880px) {
  .feature-row, .feature-row.flip { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .feature-copy, .feature-stage { min-width: 0; }
  .feature-row .feature-stage { order: -1; }
  .feature-stage .device { --w: min(260px, 64vw); }
}

/* Pasos numerados en lista. */
.steps-list { display: grid; gap: var(--s3); margin-top: var(--s5); }
.steps-list li { display: flex; gap: var(--s2); align-items: flex-start; }
.steps-list .k, .notes .k {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral-wash);
  border: 1px solid var(--coral-line);
  color: var(--coral-text);
  font-size: var(--t-micro);
  font-weight: 600;
}
.steps-list h3 { font-size: var(--t-body); margin-bottom: 2px; }
.steps-list p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }

/* Tres notas cortas, sin convertirlas en tarjetas: son una frase cada
   una y una tarjeta les daría un peso que no tienen. */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.notes.four { grid-template-columns: repeat(4, 1fr); }
.notes .k { margin-bottom: var(--s2); }
.notes .ic { color: var(--coral-text); margin-bottom: var(--s2); }
.notes h3 { font-size: var(--t-body); margin-bottom: 6px; }
.notes p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.notes .said-sm { color: var(--coral-text); font-weight: 500; }
@media (max-width: 940px) { .notes.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .notes, .notes.four { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

/* Lo dicho por el usuario, con el mismo peso que en la pantalla. */
.said {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--r-lg);
  background: var(--coral-wash);
  color: var(--coral-text);
  font-size: var(--t-body);
  font-weight: 500;
  border: 1px solid rgba(242, 112, 92, 0.2);
}

.big-quote {
  max-width: 30ch;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
  text-wrap: pretty;
}
.big-quote p + p { margin-top: 0.6em; }
.big-quote .soft { color: var(--ink-2); }
.center .big-quote { margin-inline: auto; }

/* --- Cómo funciona: los cinco segundos, en una línea --------------- */

.pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 50px -34px rgba(0, 0, 0, 0.3);
}
.pipe-track {
  position: absolute;
  left: calc(10% + 8px); right: calc(10% + 8px);
  top: calc(clamp(24px, 3vw, 40px) + 27px);
  height: 2px;
  background: var(--line);
}
.pipe-track i {
  position: absolute;
  inset: 0;
  background: var(--coral);
  transform-origin: left;
  transform: scaleX(1);
}
.pipe-step { position: relative; text-align: center; }
.pipe-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--coral-cta);
  color: #fff;
  box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -10px rgba(221, 83, 64, 0.7);
}
.pipe-dot .i { width: 24px; height: 24px; stroke-width: 1.9; }
.pipe-step .t { display: block; font-family: var(--rounded); font-size: var(--t-micro); font-weight: 600; color: var(--coral-text); font-variant-numeric: tabular-nums; }
.pipe-step b { display: block; margin-top: 2px; font-size: var(--t-body); font-weight: 600; }
.pipe-step span:last-child { display: block; margin-top: 4px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.4; padding-inline: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .pipe-track i { animation: pipe-fill 7s var(--ease) infinite; }
  .pipe-dot { animation: pipe-on 7s var(--ease) infinite; animation-delay: calc(var(--n) * 1.05s); }
}
@keyframes pipe-fill {
  0% { transform: scaleX(0); }
  62%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pipe-on {
  0% { background: var(--bg-3); color: var(--ink-2); box-shadow: 0 0 0 6px var(--bg); transform: scale(0.92); }
  4%, 76% { background: var(--coral-cta); color: #fff; box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -10px rgba(221, 83, 64, 0.7); transform: none; }
  100% { background: var(--coral-cta); color: #fff; }
}
@media (max-width: 760px) {
  .pipeline { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: left; }
  .pipe-track { left: calc(clamp(16px, 3vw, 40px) + 27px); right: auto; top: 48px; bottom: 48px; width: 2px; height: auto; }
  .pipe-track i { transform-origin: top; }
  .pipe-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; align-items: center; }
  .pipe-dot { grid-row: span 3; margin: 0; }
  .pipe-step span:last-child { padding: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .pipe-track i { animation-name: pipe-fill-y; }
  }
}
@keyframes pipe-fill-y {
  0% { transform: scaleY(0); }
  62%, 90% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* --- La secuencia: un gasto, de principio a fin --------------------

   El teléfono se queda quieto y la página se mueve a su alrededor,
   igual que cuando usas la app. */

.story { background: var(--bg-2); padding-block: var(--section-y) 0; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 420px);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.story-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-items: center;
  order: 2;
}
.story-stage .device { --w: min(320px, calc((100dvh - 190px) * 0.4613)); }
.story-stage .screen > [data-step] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}
.story-stage .screen > [data-step].on { opacity: 1; transform: none; }

/* Los bucles de una escena que no se ve se congelan; los montajes de
   una sola pasada se declaran dentro de `.scene.on`, así que se
   rebobinan solos cada vez que vuelves al paso. */
.scene:not(.on) * { animation-play-state: paused !important; }

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--w) * 0.07);
  overflow: hidden;
}
.scene-voice {
  background: radial-gradient(120% 80% at 50% 42%, #fff 0%, var(--coral-wash) 62%, #f7e7e3 100%);
}
.mic {
  position: relative;
  width: calc(var(--w) * 0.3);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--coral) 0%, #e2604b 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 calc(var(--w) * 0.03) calc(var(--w) * 0.08) -2px rgba(200, 70, 50, 0.45);
}
.mic svg { width: 46%; height: 46%; stroke: #fff; stroke-width: 1.8; fill: none; }
.mic .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--coral);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mic .ring { animation: ripple 2.6s var(--ease) infinite; }
  .mic .ring:nth-child(2) { animation-delay: 0.85s; }
  .mic .ring:nth-child(3) { animation-delay: 1.7s; }
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.5); opacity: 0; }
}
.scene .bars {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.014);
  height: calc(var(--w) * 0.13);
}
.scene .bars i {
  display: block;
  width: calc(var(--w) * 0.012);
  height: 100%;
  border-radius: 99px;
  background: var(--coral);
  transform: scaleY(0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .scene .bars i { animation: talk 1.1s ease-in-out infinite; }
}
@keyframes talk {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(var(--h, 1)); }
}
.scene .caption { font-size: calc(var(--w) * 0.055); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }

.scene-app {
  justify-content: center;
  padding: calc(var(--w) * 0.1) calc(var(--w) * 0.055);
  gap: calc(var(--w) * 0.045);
  background: var(--bg-2);
}
.scene-app b, .scene-app .amount { font-family: var(--rounded); font-weight: 600; }
.scene-app .title {
  align-self: flex-start;
  font-size: calc(var(--w) * 0.052);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.scene-app .card {
  width: 100%;
  background: #fff;
  border-radius: calc(var(--w) * 0.062);
  padding: calc(var(--w) * 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.scene-app .said-line {
  align-self: stretch;
  font-size: calc(var(--w) * 0.042);
  line-height: 1.35;
  color: var(--ink-2);
  text-align: center;
}
.scene-app .amount { display: block; font-size: calc(var(--w) * 0.125); letter-spacing: -0.02em; margin-bottom: calc(var(--w) * 0.04); }
.scene-app .fields { display: grid; gap: calc(var(--w) * 0.032); }
.scene-app .fields li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(var(--w) * 0.044);
  color: var(--ink-2);
  padding-top: calc(var(--w) * 0.032);
  border-top: 1px solid var(--line-2);
}
.scene-app .fields b { color: var(--ink); }
.scene-app .saved {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  padding: calc(var(--w) * 0.022) calc(var(--w) * 0.04);
  border-radius: 99px;
  background: rgba(52, 199, 89, 0.13);
  color: #1c7a38;
  font-size: calc(var(--w) * 0.04);
  font-weight: 600;
}
.scene-app .saved svg { width: calc(var(--w) * 0.045); height: calc(var(--w) * 0.045); stroke: currentColor; stroke-width: 2.4; fill: none; }
.scene-app .saved .undo { color: var(--coral-text); font-weight: 500; margin-left: calc(var(--w) * 0.02); }

.scene-app .day { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: calc(var(--w) * 0.046); color: var(--ink-2); }
.scene-app .rows { display: grid; gap: calc(var(--w) * 0.03); width: 100%; }
.scene-app .rows li {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.032);
  background: #fff;
  border-radius: calc(var(--w) * 0.055);
  padding: calc(var(--w) * 0.036) calc(var(--w) * 0.04);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.scene-app .rows .emo { font-size: calc(var(--w) * 0.05); }
.scene-app .rows .nm { flex: 1; min-width: 0; }
.scene-app .rows .nm b, .scene-app .rows .va b { display: block; font-size: calc(var(--w) * 0.046); }
.scene-app .rows .nm span, .scene-app .rows .va span { display: block; font-size: calc(var(--w) * 0.036); color: var(--ink-2); }
.scene-app .rows .va { text-align: right; }
.scene-app .rows li.fresh::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--coral);
  opacity: 0;
}

.scene-app .total { display: block; font-size: calc(var(--w) * 0.135); letter-spacing: -0.025em; line-height: 1.05; }
.scene-app .sub { font-size: calc(var(--w) * 0.04); color: var(--ink-2); margin-top: calc(var(--w) * 0.012); }
.scene-app .cats { display: grid; gap: calc(var(--w) * 0.038); width: 100%; }
.scene-app .cats li { display: grid; gap: calc(var(--w) * 0.018); }
.scene-app .cats .lb { display: flex; justify-content: space-between; font-size: calc(var(--w) * 0.042); color: var(--ink-2); }
.scene-app .cats .lb b { color: var(--ink); }
.scene-app .cats .bar { height: calc(var(--w) * 0.022); border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.scene-app .cats .bar i {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: inherit;
  background: var(--c, var(--coral));
  transform-origin: left;
}

/* Escena: la frase, desarmada en sus casillas. */
.scene-parse .quote {
  width: 100%;
  padding: calc(var(--w) * 0.05);
  border-radius: calc(var(--w) * 0.06);
  background: #fff;
  font-size: calc(var(--w) * 0.058);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.scene-parse .quote .tok { background-size: 100% 100%; box-shadow: inset 0 -2px 0 var(--tc); }
.scene-parse .slots { display: grid; gap: calc(var(--w) * 0.025); width: 100%; }
.scene-parse .slots li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(var(--w) * 0.03) calc(var(--w) * 0.045);
  border-radius: calc(var(--w) * 0.045);
  background: #fff;
  border-left: calc(var(--w) * 0.012) solid var(--tc);
  font-size: calc(var(--w) * 0.04);
  color: var(--ink-2);
}
.scene-parse .slots b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.scene-parse .slots .emo { font-size: calc(var(--w) * 0.038); }
.scene-parse .slots small { display: block; font-size: calc(var(--w) * 0.032); color: var(--ink-2); font-weight: 400; }

/* Escena: corrige una vez, aprende para siempre. */
.scene-learn .ask-card { width: 100%; }
.scene-learn .ask-card .q { font-size: calc(var(--w) * 0.044); color: var(--ink-2); margin-bottom: calc(var(--w) * 0.03); }
.scene-learn .ask-card .q b { color: var(--coral-text); font-family: inherit; }
.scene-learn .opts { display: grid; gap: calc(var(--w) * 0.02); }
.scene-learn .opts li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--w) * 0.03) calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.04);
  background: var(--bg-2);
  font-size: calc(var(--w) * 0.044);
  font-weight: 500;
}
.scene-learn .opts li.pick { background: var(--coral-wash); color: var(--coral-text); }
.scene-learn .opts li.pick::after {
  content: "";
  width: calc(var(--w) * 0.045);
  height: calc(var(--w) * 0.045);
  border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 64% no-repeat;
}
.scene-learn .learned {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  padding: calc(var(--w) * 0.022) calc(var(--w) * 0.04);
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: calc(var(--w) * 0.038);
  font-weight: 600;
}
.scene-learn .next { width: 100%; }
.scene-learn .next .said-line { text-align: left; margin-bottom: calc(var(--w) * 0.02); }

@media (prefers-reduced-motion: no-preference) {
  .scene.on .card,
  .scene.on .rows li,
  .scene.on .fields li,
  .scene.on .saved,
  .scene.on .cats li,
  .scene.on .total,
  .scene.on .sub,
  .scene.on .day,
  .scene.on .title,
  .scene.on .said-line,
  .scene.on .quote,
  .scene.on .slots li,
  .scene.on .learned,
  .scene.on .next {
    animation: step-in 0.6s var(--spring) both;
    animation-delay: calc(var(--d, 0) * 110ms);
  }
  .scene.on .cats .bar i { animation: grow 0.9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 260ms); }
  .scene.on .rows li.fresh::after { animation: mark 2.4s var(--ease) both 0.5s; }
  .scene.on .opts li.pick { animation: pick 0.5s var(--ease) both 0.9s; }
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(calc(var(--w) * 0.04)); }
  to { opacity: 1; transform: none; }
}
@keyframes mark { 0% { opacity: 0; } 18%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pick { from { background: var(--bg-2); color: var(--ink); } }

.story-steps { order: 1; }
.story-step {
  min-height: 92dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s6);
}
.story-step .n {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 42px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s3);
  transition: color 0.5s var(--ease);
}
.story-step .n::before,
.story-step .n::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  margin-top: -1px;
  width: 28px; height: 2px;
  border-radius: 2px;
}
.story-step .n::before { background: var(--line); }
.story-step .n::after {
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.story-step.active .n { color: var(--coral-text); }
.story-step.active .n::after { transform: scaleX(1); }
.story-step h3 { font-size: var(--t-title); margin-bottom: var(--s3); max-width: 14ch; }
.story-step p { color: var(--ink-2); font-size: var(--t-sub); line-height: 1.45; max-width: 34ch; }
.story-step .said { margin-top: var(--s3); align-self: flex-start; }
.story-step > * { transition: opacity 0.5s var(--ease); }
.story-step:not(.active) > :where(h3, p, .said) { opacity: 0.38; }

@media (max-width: 1040px) {
  .story-grid { grid-template-columns: 1fr minmax(280px, 360px); }
}
@media (max-width: 880px) {
  .story { padding-top: var(--section-y); }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-stage {
    order: 1;
    top: 0;
    height: auto;
    padding-block: calc(var(--nav-h) + 18px + var(--s3)) var(--s5);
    margin-inline: calc(var(--gutter) * -1);
    background: linear-gradient(180deg, var(--bg-2) 92%, rgba(245, 245, 247, 0) 100%);
    z-index: 2;
  }
  .story-step:not(.active) > :where(h3, p, .said) { opacity: 0.5; }
  .story-stage .device { --w: min(240px, 56vw, max(170px, (100dvh - 320px) * 0.4613)); }
  .story-steps { order: 2; }
  .story-step { min-height: 72vh; padding-block: var(--s4); justify-content: flex-start; }
  .story-step h3 { font-size: clamp(28px, 6vw, 40px); }
}

/* --- Cómo funciona: la frase, pieza por pieza ---------------------- */

.anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.anatomy-sentence {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.3;
  text-wrap: balance;
}
.anatomy-sentence .q { color: var(--ink-2); font-weight: 500; }
.anatomy-sentence button.tok {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  background-size: 100% 100%;
  box-shadow: inset 0 -3px 0 var(--tc);
  border-radius: 8px;
  padding: 0 4px;
  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
}
.anatomy-sentence button.tok[aria-pressed="true"] {
  background-image: none;
  background-color: var(--tc);
  color: #fff;
  box-shadow: none;
}
.anatomy-hint { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-2); }

.anatomy-panel {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 50px -34px rgba(0, 0, 0, 0.3);
  min-height: 320px;
}
.anatomy-info { display: grid; }
.anatomy-info > div {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0.35s;
}
.anatomy-info > div.on { opacity: 1; transform: none; visibility: visible; }
.anatomy-info .k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.anatomy-info .k i { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); }
.anatomy-info h3 { margin-top: var(--s1); font-size: var(--t-head); }
.anatomy-info p { margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-small); line-height: 1.55; }
.anatomy-card { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.anatomy-card li {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: 10px;
  font-size: var(--t-small);
  color: var(--ink-2);
  transition: background-color var(--fast) var(--ease);
}
.anatomy-card li b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-family: var(--rounded); text-align: right; }
.anatomy-card li.on { background: color-mix(in srgb, var(--tc) 13%, transparent); }
.anatomy-card .emo { font-size: 13px; }
@media (max-width: 880px) { .anatomy { grid-template-columns: minmax(0, 1fr); } .anatomy-panel { min-height: 0; } }

/* --- Cómo funciona: un día cualquiera ------------------------------ */

.day {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.day-counter {
  position: sticky;
  top: calc(var(--nav-h) + 48px);
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(160deg, #2c2c30, #1b1b1f);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.day-counter .k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.day-counter .v {
  display: block;
  margin-top: 4px;
  font-family: var(--rounded);
  font-size: clamp(40px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.day-counter .s { display: block; margin-top: 4px; font-size: var(--t-micro); color: rgba(255, 255, 255, 0.6); }
.day-counter .mic-btn {
  position: absolute;
  right: 22px; top: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--coral);
  display: grid;
  place-items: center;
}
.day-counter .mic-btn .i { width: 22px; height: 22px; color: #fff; stroke-width: 2; }
.day-counter .ticks { display: flex; gap: 6px; margin-top: 18px; }
.day-counter .ticks i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.4s var(--ease);
}
.day-counter .ticks i.on { background: var(--coral); }
.day-counter .cap { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }

.day-list { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); padding-left: 32px; }
.day-list::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--line);
}
.day-item { position: relative; }
.day-item::before {
  content: "";
  position: absolute;
  left: -32px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.day-item.in::before { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 5px var(--coral-wash); }
.day-item .time { font-family: var(--rounded); font-size: var(--t-small); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day-item .via {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 10px 3px 6px;
  border-radius: 99px;
  background: var(--coral-wash);
  border: 1px solid var(--coral-line);
  color: var(--coral-text);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}
.day-item .via .i { width: 14px; height: 14px; stroke-width: 2; }
.day-item h3 { margin-top: 8px; font-size: var(--t-sub); }
.day-item p { margin-top: 4px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; max-width: 50ch; }
.day-item .said { margin-top: 10px; padding: 8px 14px; font-size: var(--t-small); border-radius: 18px; }
.day-item .amt { font-family: var(--rounded); font-weight: 600; color: var(--ink); }

@media (max-width: 880px) {
  .day { grid-template-columns: minmax(0, 1fr); }
  .day-counter {
    top: calc(var(--nav-h) + 20px);
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px 18px;
    border-radius: 20px;
  }
  .day-counter .v { font-size: 30px; }
  .day-counter .mic-btn { position: static; grid-row: span 3; }
  .day-counter .ticks, .day-counter .cap { grid-column: 1 / -1; }
  .day-counter .ticks { margin-top: 10px; }
  .day-counter .cap { display: none; }
}

/* --- Registrar: cuatro caminos, el mismo gasto --------------------- */

.ways {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}
.ways svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ways svg.lines path { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.ways svg.lines path.hot { stroke: var(--coral); opacity: 0; }
.way {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 104px;
  transform: translate(-50%, -50%);
  font-size: var(--t-micro);
  font-weight: 600;
}
.way .orb {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.3);
}
.way .orb .i { width: 28px; height: 28px; }
.way:nth-of-type(1) { left: 16%; top: 16%; }
.way:nth-of-type(2) { left: 84%; top: 16%; }
.way:nth-of-type(3) { left: 16%; top: 84%; }
.way:nth-of-type(4) { left: 84%; top: 84%; }
.ways-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 58%;
  transform: translate(-50%, -50%);
  display: grid;
}
.ways-card .m-row { grid-area: 1 / 1; padding: 16px; flex-wrap: wrap; opacity: 0; }
.ways-card .m-row .chk { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #1c7a38; }
.ways-card .m-row .chk svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.6; fill: none; }
@media (prefers-reduced-motion: no-preference) {
  .ways .way .orb { animation: way-orb 12s var(--ease) infinite; animation-delay: calc(var(--n) * 3s); }
  .ways svg.lines path.hot { animation: way-line 12s var(--ease) infinite; animation-delay: calc(var(--n) * 3s); }
  .ways-card .m-row { animation: way-card 12s var(--spring) infinite; animation-delay: calc(var(--n) * 3s); }
}
@media (prefers-reduced-motion: reduce) { .ways-card .m-row:first-child { opacity: 1; } }
@keyframes way-orb {
  0%, 25%, 100% { background: var(--bg); color: var(--ink-2); border-color: var(--line); transform: none; }
  3%, 22% { background: var(--coral-cta); color: #fff; border-color: var(--coral-cta); transform: scale(1.08); }
}
@keyframes way-line {
  0%, 25%, 100% { opacity: 0; stroke-dashoffset: 40; }
  3% { opacity: 1; }
  22% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes way-card {
  0%, 2% { opacity: 0; transform: translateY(10px) scale(0.95); }
  6%, 23% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* --- Registrar: lo que puedes decir ------------------------------- */

.phrases { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.phrase {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-card);
  background: var(--bg);
  border: 1px solid var(--line);
}
.tint .phrase { border-color: transparent; }
.phrase .said { align-self: flex-start; padding: 10px 16px; border-radius: 18px 18px 18px 6px; }
.phrase .got { display: flex; flex-wrap: wrap; gap: 6px; }
.phrase .got li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--bg-2);
  font-size: var(--t-micro);
  color: var(--ink-2);
}
.tint .phrase .got li { background: var(--bg-2); }
.phrase .got li b { color: var(--ink); font-weight: 600; }
.phrase .got li.flag { background: var(--coral-wash); color: var(--coral-text); }
.phrase .got .emo { font-size: 11px; width: 1.8em; }
.phrase .what { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
@media (max-width: 760px) { .phrases { grid-template-columns: minmax(0, 1fr); } }

/* --- Registrar: sin abrir la app ----------------------------------- */

.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.door {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--bg);
  overflow: hidden;
}
.door-stage {
  position: relative;
  height: 200px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2a2e, #1b1b1f);
  color: #fff;
}
.door-copy { padding: var(--s3); }
.door-copy h3 { font-size: var(--t-body); }
.door-copy p { margin-top: 6px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.door-copy small { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-2); }

/* Siri: un orbe que escucha y la frase encima. */
.siri { display: grid; justify-items: center; gap: 18px; }
.siri .orb {
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #ffd0c6 0%, transparent 45%),
    conic-gradient(from 0deg, #f2705c, #ff9a7a, #d65a8c, #8f6bd8, #f2705c);
  filter: saturate(1.1);
  box-shadow: 0 0 40px rgba(242, 112, 92, 0.55);
}
.siri .bubble { padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .siri .orb { animation: siri 3s ease-in-out infinite; }
}
@keyframes siri {
  0%, 100% { transform: scale(0.9) rotate(0deg); }
  50% { transform: scale(1.06) rotate(180deg); }
}

/* Botón de Acción: el canto del teléfono y el botón que se hunde. */
.action { position: relative; width: 150px; height: 130px; }
.action .edge {
  position: absolute;
  left: 58px; top: 0; bottom: 0;
  width: 34px;
  border-radius: 14px;
  background: linear-gradient(90deg, #3a3a3f, #5c5c63 40%, #2a2a2e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.action .btn-a {
  position: absolute;
  left: 48px; top: 30px;
  width: 12px; height: 30px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, #6a6a70, #8a8a90);
}
.action .ping {
  position: absolute;
  left: 30px; top: 30px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  opacity: 0;
}
.action .label {
  position: absolute;
  left: 100px; top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  border-radius: 99px;
  background: var(--coral-cta);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.action .label .wave { height: 14px; gap: 2px; }
.action .label .wave i { width: 2px; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .action .btn-a { animation: press 3s var(--ease) infinite; }
  .action .ping { animation: ping 3s var(--ease) infinite; }
  .action .label { animation: pop 3s var(--spring) infinite; }
}
@keyframes press { 0%, 20%, 40%, 100% { transform: none; } 28% { transform: translateX(6px); } }
@keyframes ping { 0%, 26% { opacity: 0; transform: scale(0.6); } 30% { opacity: 0.9; } 60%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes pop { 0%, 30% { opacity: 0; transform: scale(0.8) translateX(-8px); } 40%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Widget de inicio: lo que llevas hoy y un toque para hablar. */
.widget {
  position: relative;
  width: 168px; height: 168px;
  padding: 16px;
  border-radius: 26px;
  background: linear-gradient(160deg, #3a3a40, #1f1f23);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
}
.widget .k { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.05em; }
.widget b { font-family: var(--rounded); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.widget small { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.widget .mic-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--coral);
  display: grid;
  place-items: center;
}
.widget .mic-btn .i { width: 20px; height: 20px; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .widget .mic-btn { animation: tap-me 3s var(--ease) infinite; }
}
@keyframes tap-me {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(242, 112, 92, 0.6); transform: none; }
  68% { transform: scale(0.9); }
  80% { box-shadow: 0 0 0 14px rgba(242, 112, 92, 0); transform: none; }
}

/* Spotlight: buscas y ya está la acción. */
.spot { width: 180px; display: grid; gap: 8px; }
.spot .field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 14px;
}
.spot .field .i { width: 16px; height: 16px; opacity: 0.7; }
.spot .field span { overflow: hidden; white-space: nowrap; border-right: 1.5px solid #fff; width: 7ch; }
.spot .hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 13px;
  text-align: left;
}
.spot .hit img { width: 28px; height: 28px; border-radius: 7px; }
.spot .hit b { display: block; font-weight: 600; }
.spot .hit small { display: block; font-size: 11px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .spot .field span { animation: typing 4s steps(7) infinite; }
  .spot .hit { animation: hit 4s var(--spring) infinite; }
}
@keyframes typing { 0% { width: 0; } 40%, 100% { width: 7ch; } }
@keyframes hit { 0%, 42% { opacity: 0; transform: translateY(8px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 1040px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .doors { grid-template-columns: minmax(0, 1fr); } }

/* --- Escena: escaneando un ticket --------------------------------- */

.scan {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--w) * 0.06);
  overflow: hidden;
  background: linear-gradient(180deg, #2a2a2e 0%, #1b1b1f 100%);
}
.viewfinder { position: relative; width: calc(var(--w) * 0.62); aspect-ratio: 0.62; overflow: hidden; }
.viewfinder .corner { position: absolute; width: calc(var(--w) * 0.07); height: calc(var(--w) * 0.07); border: 2px solid rgba(255, 255, 255, 0.85); }
.viewfinder .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.viewfinder .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.viewfinder .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.viewfinder .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.receipt {
  position: absolute;
  inset: calc(var(--w) * 0.035);
  background: #fbfbf9;
  border-radius: 3px;
  padding: calc(var(--w) * 0.045) calc(var(--w) * 0.04);
  display: flex;
  flex-direction: column;
  gap: calc(var(--w) * 0.022);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  -webkit-mask:
    radial-gradient(circle calc(var(--w) * 0.018) at 50% 100%, #0000 97%, #000) bottom / calc(var(--w) * 0.036) calc(var(--w) * 0.018) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--w) * 0.018) no-repeat;
          mask:
    radial-gradient(circle calc(var(--w) * 0.018) at 50% 100%, #0000 97%, #000) bottom / calc(var(--w) * 0.036) calc(var(--w) * 0.018) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--w) * 0.018) no-repeat;
}
.receipt .r-logo { width: 42%; height: calc(var(--w) * 0.028); border-radius: 2px; background: #26242a; margin: 0 auto calc(var(--w) * 0.02); }
.receipt .r-line { display: flex; justify-content: space-between; gap: 8px; }
.receipt .r-line span { height: calc(var(--w) * 0.014); border-radius: 2px; background: #d9d5ce; }
.receipt .r-line span:first-child { width: 52%; }
.receipt .r-line span:last-child { width: 22%; }
.receipt .r-rule { height: 1px; background: repeating-linear-gradient(90deg, #cfcac2 0 4px, transparent 4px 8px); margin: calc(var(--w) * 0.015) 0; }
.receipt .r-sum { display: flex; justify-content: space-between; }
.receipt .r-sum span { height: calc(var(--w) * 0.024); border-radius: 2px; background: #26242a; }
.receipt .r-sum span:first-child { width: 30%; }
.receipt .r-sum span:last-child { width: 34%; background: var(--coral); }
.scan .beam {
  position: absolute;
  left: calc(var(--w) * -0.02);
  right: calc(var(--w) * -0.02);
  height: calc(var(--w) * 0.22);
  top: -25%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(242, 112, 92, 0.16) 55%, rgba(255, 255, 255, 0.9) 88%, rgba(242, 112, 92, 0.5) 100%);
  box-shadow: 0 2px 14px rgba(242, 112, 92, 0.75);
}
@media (prefers-reduced-motion: no-preference) {
  /* Lineal a propósito: un escáner recorre el papel a velocidad constante. */
  .scan .beam { animation: sweep 5s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .scan .beam { display: none; } }
@keyframes sweep {
  0% { top: -25%; opacity: 0; }
  8% { opacity: 1; }
  38% { top: 100%; opacity: 1; }
  46%, 100% { top: 100%; opacity: 0; }
}
.glass-list { display: grid; gap: calc(var(--w) * 0.022); width: calc(var(--w) * 0.64); }
.glass-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(var(--w) * 0.022) calc(var(--w) * 0.035);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: calc(var(--w) * 0.042);
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
}
.glass-list b { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .scan .glass-list li { animation: found 5s var(--ease) infinite; animation-delay: calc(var(--d) * 0.22s); }
  .pay .glass-list li { animation: got 5s var(--ease) infinite; animation-delay: calc(var(--d) * 0.2s); }
}
@media (prefers-reduced-motion: reduce) { .glass-list li { opacity: 1; } }
@keyframes found {
  0%, 30% { opacity: 0; transform: translateY(calc(var(--w) * 0.02)) scale(0.96); }
  40%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(calc(var(--w) * -0.01)); }
}
@keyframes got {
  0%, 26% { opacity: 0; transform: translateY(calc(var(--w) * 0.02)) scale(0.96); }
  38%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(calc(var(--w) * -0.01)); }
}

/* --- Escena: pago sin contacto -------------------------------------- */

.pay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--w) * 0.05);
  overflow: hidden;
  background: linear-gradient(180deg, #2a2a2e 0%, #1b1b1f 100%);
}
.pay .tap { position: relative; width: calc(var(--w) * 0.4); height: calc(var(--w) * 0.4); display: grid; place-items: center; flex: none; }
.pay .tap .card { width: calc(var(--w) * 0.16); fill: none; stroke: var(--coral); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pay .tap .arc { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--w) * 0.006) solid rgba(242, 112, 92, 0.6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pay .tap .arc { animation: tap-ring 5s var(--ease) infinite; }
  .pay .tap .arc:nth-child(2) { animation-delay: 0.26s; }
  .pay .tap .arc:nth-child(3) { animation-delay: 0.52s; }
  .pay .caption { animation: tap-caption 5s var(--ease) infinite; }
  .pay .ok { animation: pay-ok 5s var(--ease) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pay .tap .arc:first-child { opacity: 0.45; }
  .pay .ok { opacity: 1; }
}
@keyframes tap-ring {
  0% { transform: scale(0.34); opacity: 0; }
  5% { opacity: 0.95; }
  24%, 100% { transform: scale(1); opacity: 0; }
}
.pay .caption { font-size: calc(var(--w) * 0.045); color: rgba(255, 255, 255, 0.6); letter-spacing: 0.01em; }
@keyframes tap-caption { 0% { opacity: 0; } 6%, 26% { opacity: 1; } 40%, 100% { opacity: 0.28; } }
.pay .ok {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  padding: calc(var(--w) * 0.02) calc(var(--w) * 0.042);
  border-radius: 99px;
  background: rgba(242, 112, 92, 0.16);
  border: 1px solid rgba(242, 112, 92, 0.4);
  color: #fff;
  font-size: calc(var(--w) * 0.04);
  opacity: 0;
}
.pay .ok svg { width: calc(var(--w) * 0.045); fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pay-ok {
  0%, 62% { opacity: 0; transform: scale(0.92); }
  72%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* La bandeja: tres salidas, ninguna guarda nada sin ti. */
.inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.inbox-actions li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: var(--t-small);
}
.inbox-actions li b { font-weight: 600; }
.inbox-actions li span { color: var(--ink-2); }
.inbox-actions li.primary { background: var(--coral-cta); border-color: var(--coral-cta); color: #fff; }
.inbox-actions li.primary span { color: rgba(255, 255, 255, 0.8); }

/* --- Escena: teclado numérico -------------------------------------- */

.scene-keys {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  padding: calc(var(--w) * 0.24) calc(var(--w) * 0.06) calc(var(--w) * 0.08);
}
.scene-keys .k-amount {
  text-align: center;
  font-family: var(--rounded);
  font-size: calc(var(--w) * 0.15);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.scene-keys .k-amount .cur { color: var(--ink-2); font-weight: 600; }
.scene-keys .k-amount .n { display: inline-block; opacity: 0; }
.scene-keys .k-amount .caret {
  display: inline-block;
  width: calc(var(--w) * 0.008);
  height: 0.8em;
  margin-left: 2px;
  vertical-align: -0.06em;
  background: var(--coral);
}
.scene-keys .k-cats { display: flex; justify-content: center; gap: calc(var(--w) * 0.02); margin-top: calc(var(--w) * 0.04); }
.scene-keys .k-cats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: calc(var(--w) * 0.018) calc(var(--w) * 0.03);
  border-radius: 99px;
  background: #fff;
  font-size: calc(var(--w) * 0.036);
  font-weight: 500;
}
.scene-keys .k-cats span.sel { background: color-mix(in srgb, var(--c-sky) 16%, #fff); color: #1f5d99; }
.scene-keys .pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--w) * 0.02);
  margin-top: auto;
}
.scene-keys .pad span {
  display: grid;
  place-items: center;
  height: calc(var(--w) * 0.13);
  border-radius: calc(var(--w) * 0.035);
  background: #fff;
  font-family: var(--rounded);
  font-size: calc(var(--w) * 0.06);
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.scene-keys .pad span.go { background: var(--coral-cta); color: #fff; font-family: inherit; font-size: calc(var(--w) * 0.042); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .scene-keys .k-amount .n { animation: key-n 6s steps(1) infinite; }
  .scene-keys .k-amount .n:nth-of-type(2) { animation-name: key-n2; }
  .scene-keys .pad .p9 { animation: key-press 6s var(--ease) infinite; }
  .scene-keys .pad .p5 { animation: key-press 6s var(--ease) infinite 0.8s; }
  .scene-keys .pad .go { animation: key-press 6s var(--ease) infinite 2.2s; }
  .scene-keys .k-cats .sel { animation: key-sel 6s var(--ease) infinite; }
  .scene-keys .k-amount .caret { animation: caret 1s steps(1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .scene-keys .k-amount .n { opacity: 1; } }
@keyframes key-n { 0%, 8% { opacity: 0; } 9%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes key-n2 { 0%, 21% { opacity: 0; } 22%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes key-press { 0%, 6%, 14%, 100% { background: #fff; transform: none; } 9% { background: var(--bg-3); transform: scale(0.94); } }
@keyframes key-sel { 0%, 30% { background: #fff; color: var(--ink); } 36%, 92% { background: color-mix(in srgb, var(--c-sky) 16%, #fff); color: #1f5d99; } }
@keyframes caret { 50% { opacity: 0; } }

/* --- Compartidos: la cuenta dividida ------------------------------- */

.splitcard {
  width: min(380px, 100%);
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 30px 60px -34px rgba(0, 0, 0, 0.35);
}
.splitcard .top { display: flex; align-items: center; gap: 12px; }
.splitcard .top .emo { font-size: 20px; }
.splitcard .top b { display: block; font-size: var(--t-body); font-weight: 600; }
.splitcard .top span { font-size: var(--t-micro); color: var(--ink-2); }
.splitcard .top em { margin-left: auto; font-style: normal; font-family: var(--rounded); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.splitcard ul { margin-top: 18px; display: grid; }
.splitcard li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
  font-size: var(--t-small);
}
.splitcard .av {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--c-stone)) 18%, transparent);
  color: color-mix(in srgb, var(--c, var(--c-stone)) 70%, #000);
  font-size: 13px;
  font-weight: 600;
}
.splitcard li b { flex: 1; font-weight: 600; }
.splitcard li em { font-style: normal; font-family: var(--rounded); font-weight: 600; }
.splitcard .st {
  min-width: 82px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-2);
}
.splitcard .st.paid { background: rgba(52, 199, 89, 0.13); color: #1c7a38; }
.splitcard .foot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.splitcard .foot b { color: var(--coral-text); font-family: var(--rounded); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .splitcard .st.flip { animation: flip-paid 6s var(--ease) infinite; }
}
@keyframes flip-paid {
  0%, 45% { background: var(--bg-2); color: var(--ink-2); }
  50%, 100% { background: rgba(52, 199, 89, 0.13); color: #1c7a38; }
}

/* Lo que aprende: antes y después, en chips. */
.learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.learn article { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-card); background: var(--bg-2); }
.learn .pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s3); }
.learn .pair span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--bg);
  font-size: var(--t-small);
  font-weight: 500;
}
.learn .pair span.from { color: var(--coral-text); background: var(--coral-wash); }
.learn .pair .i { width: 18px; height: 18px; color: var(--ink-2); }
.learn h3 { font-size: var(--t-body); }
.learn p { margin-top: 6px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
@media (max-width: 880px) { .learn { grid-template-columns: minmax(0, 1fr); } }

/* --- Avisos: la pantalla bloqueada --------------------------------- */

.scene-lock {
  position: absolute;
  inset: 0;
  --sbar-ink: #fff;
  --home-ind: rgba(255, 255, 255, 0.7);
  color: #fff;
  background:
    radial-gradient(90% 60% at 20% 8%, rgba(255, 214, 200, 0.9) 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 100%, #b8412f 0%, transparent 70%),
    linear-gradient(170deg, #f4a390 0%, #e7765f 45%, #c9503d 100%);
}
.lk-time { position: absolute; top: calc(var(--w) * 0.2); left: 0; right: 0; text-align: center; }
.lk-time span { display: block; font-size: calc(var(--w) * 0.048); font-weight: 600; opacity: 0.9; }
.lk-time b { display: block; font-family: var(--rounded); font-size: calc(var(--w) * 0.25); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.lk-notifs {
  position: absolute;
  left: calc(var(--w) * 0.04);
  right: calc(var(--w) * 0.04);
  bottom: calc(var(--w) * 0.16);
  display: grid;
  gap: calc(var(--w) * 0.022);
}
.lk-notifs .notif {
  gap: calc(var(--w) * 0.03);
  padding: calc(var(--w) * 0.035) calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.06);
  font-size: calc(var(--w) * 0.038);
  background: rgba(255, 255, 255, 0.6);
}
.lk-notifs .notif img { width: calc(var(--w) * 0.09); height: calc(var(--w) * 0.09); border-radius: calc(var(--w) * 0.022); }
.lk-notifs .notif .n-app { font-size: calc(var(--w) * 0.03); }
@media (prefers-reduced-motion: no-preference) {
  .lk-notifs .notif { animation: lk-drop 10s var(--spring) infinite; animation-delay: calc(var(--n) * 1.6s); }
}
@keyframes lk-drop {
  0% { opacity: 0; transform: translateY(calc(var(--w) * -0.08)) scale(0.94); }
  5%, 76% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: scale(0.97); }
}

/* --- Avisos: suscripciones ----------------------------------------- */

.scene-list {
  position: absolute;
  inset: 0;
  padding: calc(var(--w) * 0.2) calc(var(--w) * 0.05) calc(var(--w) * 0.06);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--w) * 0.035);
}
.scene-list .h { font-size: calc(var(--w) * 0.085); font-weight: 700; letter-spacing: -0.02em; padding-inline: calc(var(--w) * 0.02); }
.scene-list .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * 0.025); }
.scene-list .tile { padding: calc(var(--w) * 0.04); border-radius: calc(var(--w) * 0.045); background: #fff; }
.scene-list .tile span { display: block; font-size: calc(var(--w) * 0.032); color: var(--ink-2); }
.scene-list .tile b { display: block; margin-top: 2px; font-family: var(--rounded); font-size: calc(var(--w) * 0.058); font-weight: 700; letter-spacing: -0.01em; }
.scene-list .lbl { font-size: calc(var(--w) * 0.04); font-weight: 600; color: var(--ink-2); padding-inline: calc(var(--w) * 0.02); margin-top: calc(var(--w) * 0.01); }
.scene-list .group { border-radius: calc(var(--w) * 0.045); background: #fff; overflow: hidden; }
.scene-list .group li {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.03);
  padding: calc(var(--w) * 0.032) calc(var(--w) * 0.04);
  font-size: calc(var(--w) * 0.042);
}
.scene-list .group li + li { border-top: 1px solid var(--line-2); }
.scene-list .group .emo { font-size: calc(var(--w) * 0.042); }
.scene-list .group b { display: block; font-weight: 600; }
.scene-list .group small { display: block; font-size: calc(var(--w) * 0.033); color: var(--ink-2); }
.scene-list .group small.soon { color: var(--coral-text); font-weight: 600; }
.scene-list .group .nm { flex: 1; min-width: 0; }
.scene-list .group em { font-style: normal; font-family: var(--rounded); font-weight: 600; text-align: right; }
.scene-list .group em small { font-family: -apple-system, system-ui, sans-serif; }
.up {
  display: inline-block;
  margin-top: 2px;
  padding: 1px calc(var(--w) * 0.018);
  border-radius: 99px;
  background: rgba(255, 159, 10, 0.16);
  color: #9a5b00;
  font-size: calc(var(--w) * 0.03);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim].play .scene-list .stagger { animation: step-in 0.6s var(--spring) both; animation-delay: calc(var(--d, 0) * 110ms); }
}

/* --- Avisos: presupuesto al 80 % ------------------------------------ */

@property --fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.8;
}
.scene-budget { justify-content: flex-start; padding-top: calc(var(--w) * 0.2); }
.scene-budget .notif {
  position: absolute;
  z-index: 4;
  top: calc(var(--w) * 0.14);
  left: calc(var(--w) * 0.04);
  right: calc(var(--w) * 0.04);
  padding: calc(var(--w) * 0.035) calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.06);
  font-size: calc(var(--w) * 0.038);
  background: rgba(255, 255, 255, 0.86);
}
.scene-budget .notif img { width: calc(var(--w) * 0.09); height: calc(var(--w) * 0.09); border-radius: calc(var(--w) * 0.022); }
.scene-budget .notif .n-app { font-size: calc(var(--w) * 0.03); }
.dial {
  --fill: 0.8;
  position: relative;
  width: calc(var(--w) * 0.5);
  aspect-ratio: 1;
  margin: calc(var(--w) * 0.12) auto calc(var(--w) * 0.03);
  border-radius: 50%;
  background: conic-gradient(var(--c-sage) calc(var(--fill) * 360deg), var(--bg-3) 0);
  display: grid;
  place-items: center;
}
.dial::before { content: ""; position: absolute; inset: calc(var(--w) * 0.04); border-radius: 50%; background: var(--bg-2); }
.dial .face { position: relative; font-size: calc(var(--w) * 0.12); }
.dial .mark80 {
  position: absolute;
  inset: 0;
  transform: rotate(288deg);
}
.dial .mark80::before {
  content: "";
  position: absolute;
  left: 50%; top: calc(var(--w) * -0.01);
  width: calc(var(--w) * 0.008);
  height: calc(var(--w) * 0.06);
  margin-left: calc(var(--w) * -0.004);
  border-radius: 2px;
  background: var(--ink);
}
.scene-budget .b-name { font-size: calc(var(--w) * 0.05); font-weight: 600; }
.scene-budget .b-amt { font-family: var(--rounded); font-size: calc(var(--w) * 0.072); font-weight: 700; letter-spacing: -0.01em; }
.scene-budget .b-amt small { font-size: 0.6em; color: var(--ink-2); font-weight: 600; }
.scene-budget .b-left { font-size: calc(var(--w) * 0.04); color: var(--ink-2); }
.scene-budget .b-strip {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  margin-top: calc(var(--w) * 0.06);
  padding: calc(var(--w) * 0.03) calc(var(--w) * 0.045);
  border-radius: 99px;
  background: #fff;
  font-size: calc(var(--w) * 0.036);
  color: var(--ink-2);
}
.scene-budget .b-strip b { color: var(--ink); font-weight: 600; }
.scene-budget .b-strip .i { width: calc(var(--w) * 0.05); height: calc(var(--w) * 0.05); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .scene-budget .dial { animation: dial 8s var(--ease) infinite; }
  .scene-budget .notif { animation: b-notif 8s var(--spring) infinite; }
}
@keyframes dial {
  0% { --fill: 0.52; }
  30%, 92% { --fill: 0.8; }
  100% { --fill: 0.52; }
}
@keyframes b-notif {
  0%, 32% { opacity: 0; transform: translateY(calc(var(--w) * -0.1)); }
  38%, 84% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(calc(var(--w) * -0.06)); }
}
@media (prefers-reduced-motion: reduce) { .scene-budget .notif { display: none; } }

/* Muro de avisos, como llegan de verdad. */
.notif-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
  max-width: 860px;
  margin-inline: auto;
}
.notif-wall .notif { padding: 14px 16px; font-size: var(--t-small); background: var(--bg); border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 34px -24px rgba(0, 0, 0, 0.35); }
.notif-wall .notif img { width: 38px; height: 38px; border-radius: 10px; }
.notif-wall .notif .n-app { font-size: 12px; }
.notif-wall .notif span { color: var(--ink-2); }
@media (max-width: 700px) { .notif-wall { grid-template-columns: minmax(0, 1fr); } }

/* --- Compras a meses: la compra repartida en plazos ----------------

   Doce barritas y no una barra al 33%: nadie dice "voy al 33% de la
   tele", dice "van cuatro, faltan ocho". */

.plan {
  max-width: 620px;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 44px -30px rgba(0, 0, 0, 0.3);
}
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.plan-what { font-size: var(--t-body); font-weight: 600; }
.plan-total { font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
.plan-total em { font-style: normal; font-weight: 500; color: var(--ink-2); }
.plan-terms { display: flex; gap: 4px; }
.plan-terms i { flex: 1; height: 10px; border-radius: 999px; background: var(--bg-3); transform-origin: left; }
.plan-terms i.on { background: var(--coral); }
.plan-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); }
.plan-foot b { color: var(--ink); font-weight: 600; }
.plan-foot b.accent { color: var(--coral-text); }
.plan-close { max-width: var(--maxw-text); margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .plan .plan-terms i.on { transform: scaleX(0); }
  .js .plan.in .plan-terms i.on { animation: grow 0.5s var(--ease) both; animation-delay: calc(220ms + var(--d, 0) * 110ms); }
}
@media (max-width: 620px) {
  .plan-head, .plan-foot { flex-direction: column; gap: 2px; }
  .plan-terms { gap: 3px; }
  .plan-terms i { height: 8px; }
}

/* --- El recuento: tres tarjetas que se pasan solas ------------------ */

.recap-head { margin-top: clamp(64px, 8vw, 104px); text-align: center; }
.recap-head h3 { font-size: var(--t-title); letter-spacing: -0.026em; }
.recap-head .lead { margin-inline: auto; }
.recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: clamp(32px, 4vw, 48px); }
.recap-card {
  display: flex;
  flex-direction: column;
  min-height: 218px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.recap-card .bar { display: block; height: 3px; margin-bottom: var(--s3); border-radius: 2px; background: var(--line); overflow: hidden; }
.recap-card .bar i { display: block; height: 100%; border-radius: 2px; background: var(--coral); transform-origin: left; }
.recap-card .k { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s2); }
.recap-card .big { font-size: clamp(29px, 3.3vw, 40px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.05; color: var(--ink); }
.recap-card .sub { margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.recap-bars { display: grid; gap: 13px; }
.recap-bars .lb { display: flex; justify-content: space-between; gap: var(--s2); margin-bottom: 5px; font-size: var(--t-small); color: var(--ink-2); }
.recap-bars .lb b { color: var(--ink); font-weight: 600; }
.recap-bars .b { display: block; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.recap-bars .b i { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--c); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .recap .bar i, .js .recap .recap-bars .b i { transform: scaleX(0); }
  .js .recap .recap-card > :not(.bar) { opacity: 0; }
  .js .recap.in .bar i { animation: grow 1.7s linear both; animation-delay: calc(var(--n, 0) * 1.7s); }
  .js .recap.in .recap-card > :not(.bar) { animation: rise 0.6s var(--spring) both; animation-delay: calc(var(--n, 0) * 1.7s + 120ms); }
  .js .recap.in .recap-bars .b i { animation: grow 0.9s var(--ease) both; animation-delay: calc(var(--n, 0) * 1.7s + 320ms + var(--d, 0) * 110ms); }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 880px) {
  .recap { grid-template-columns: minmax(0, 1fr); }
  .recap-card { min-height: 0; }
}

/* --- Experiencias: la cinta ----------------------------------------

   Una experiencia no es una pantalla: es un tramo del calendario. Por
   eso se dibuja tumbada, con los días en fila y la etiqueta cruzándolos. */

.tape {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 44px -30px rgba(0, 0, 0, 0.3);
}
.tape-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.tape-month { font-size: var(--t-small); font-weight: 600; }
.tape-legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-micro); color: var(--ink-2); }
.tape-legend i { flex: none; width: 20px; height: 6px; border-radius: 999px; background: var(--coral); }
.tape-track, .tape-days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.tape-track { margin-bottom: 8px; }
.tape-span {
  grid-column: 3 / 8;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--coral-cta);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 8px 20px -10px rgba(221, 83, 64, 0.75);
}
.tape-span em { font-style: normal; font-weight: 500; opacity: 0.72; }
.tape-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 2px 11px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid transparent;
}
.tape-day .dn { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.tape-day .dots { display: flex; gap: 3px; min-height: 5px; }
.tape-day .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, 0.16); }
.tape-day.on { background: var(--coral-wash); border-color: var(--coral-line); }
.tape-day.on .dn { color: var(--coral-text); }
.tape-day.on .dots i { background: var(--coral); }
.tape-sum { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); font-size: var(--t-small); color: var(--ink-2); }
.tape-sum b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js .tape .tape-span { clip-path: inset(0 100% 0 0); }
  .js .tape.in .tape-span { animation: tape-draw 0.85s var(--ease) 0.1s forwards; }
  .js .tape .tape-day,
  .js .tape .tape-day .dn,
  .js .tape .tape-day .dots i {
    transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms + 220ms);
  }
  .js .tape:not(.in) .tape-day.on { background: var(--bg-2); border-color: transparent; }
  .js .tape:not(.in) .tape-day.on .dn { color: var(--ink-2); }
  .js .tape:not(.in) .tape-day.on .dots i { background: rgba(0, 0, 0, 0.16); }
}
@keyframes tape-draw { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 620px) {
  .tape-track, .tape-days { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .tape-day.edge { display: none; }
  .tape-span { grid-column: 2 / 7; padding: 6px 10px; gap: 6px; }
  .tape-span em { display: none; }
  .tape-day { padding: 8px 1px 9px; gap: 5px; }
  .tape-day .dn { font-size: 10px; }
  .tape-day .dots { gap: 2px; }
  .tape-day .dots i { width: 4px; height: 4px; }
  .tape-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.catalog { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--s4); }
.catalog li { padding: 7px 14px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line-2); font-size: var(--t-small); color: var(--ink-2); }

/* --- Resumen: el mes contado ----------------------------------------- */

.tally {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 30px 60px -36px rgba(0, 0, 0, 0.35);
}
.tally .k { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-2); }
.tally .v {
  display: block;
  margin-top: 6px;
  font-family: var(--rounded);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tally .cmp { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 12px; border-radius: 99px; background: var(--bg-2); font-size: var(--t-micro); color: var(--ink-2); }
.tally .cmp b { color: var(--ink); font-weight: 600; }
.tally .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: var(--s3); }
.tally .tiles div { padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg-2); }
.tally .tiles span { display: block; font-size: 12px; color: var(--ink-2); }
.tally .tiles b { display: block; margin-top: 2px; font-family: var(--rounded); font-size: var(--t-sub); font-weight: 700; }
.tally .tiles small { display: block; font-size: 12px; color: var(--ink-2); }
.tally ul { display: grid; gap: 14px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.tally li .lb { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); margin-bottom: 7px; }
.tally li .lb .emo { font-size: 14px; }
.tally li .lb b { margin-left: auto; font-family: var(--rounded); font-weight: 600; }
.tally li .b { display: block; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.tally li .b i { display: block; height: 100%; width: var(--p); background: var(--c); border-radius: inherit; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .tally .b i { transform: scaleX(0); }
  .js .tally.in .b i { animation: grow 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 300ms); }
}

/* --- Resumen: las historias del reporte ----------------------------- */

.stories-stage { display: grid; justify-items: center; gap: var(--s2); }
.scene-story {
  position: absolute;
  inset: 0;
  --sbar-ink: #fff;
  --home-ind: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.st-bars {
  position: absolute;
  z-index: 4;
  top: calc(var(--w) * 0.14);
  left: calc(var(--w) * 0.05);
  right: calc(var(--w) * 0.05);
  display: flex;
  gap: calc(var(--w) * 0.012);
}
.st-bars i { flex: 1; height: calc(var(--w) * 0.008); border-radius: 99px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.st-bars i::after { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.st-bars i.done::after { transform: scaleX(1); }
.st-bars i.now::after { animation: grow var(--dur, 4.5s) linear forwards; }
.scene-story.paused .st-bars i.now::after { animation-play-state: paused; }
.light .st-bars i { background: rgba(0, 0, 0, 0.12); }
.light .st-bars i::after { background: var(--ink); }

.story-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--w) * 0.24) calc(var(--w) * 0.08) calc(var(--w) * 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.story-card.on { opacity: 1; visibility: visible; }
.story-card.coral { color: #fff; background: radial-gradient(90% 60% at 30% 20%, rgba(255, 255, 255, 0.2), transparent 60%), linear-gradient(170deg, #e8735d, #c44531); }
.story-card.paper { color: var(--ink); background: #fbf6f4; }
.story-card .sk { font-size: calc(var(--w) * 0.04); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }
.story-card.paper .sk { color: var(--coral-text); opacity: 1; }
.story-card h4 { margin-top: calc(var(--w) * 0.03); font-size: calc(var(--w) * 0.09); line-height: 1.12; letter-spacing: -0.02em; }
.story-card .sv { margin-top: calc(var(--w) * 0.03); font-family: var(--rounded); font-size: calc(var(--w) * 0.15); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.story-card .sf { margin-top: calc(var(--w) * 0.04); font-size: calc(var(--w) * 0.045); line-height: 1.4; opacity: 0.8; }
.story-card.paper .sf { color: var(--ink-2); opacity: 1; }
.story-card .sb2 { display: grid; gap: calc(var(--w) * 0.03); margin-top: calc(var(--w) * 0.06); }
.story-card .sb2 li { display: grid; grid-template-columns: calc(var(--w) * 0.2) 1fr auto; align-items: center; gap: calc(var(--w) * 0.025); font-size: calc(var(--w) * 0.038); }
.story-card .sb2 i { display: block; height: calc(var(--w) * 0.025); border-radius: 99px; background: var(--c); width: var(--p); transform-origin: left; }
.story-card .sb2 b { font-family: var(--rounded); font-weight: 600; }
.story-card .week { display: flex; align-items: flex-end; gap: calc(var(--w) * 0.02); height: calc(var(--w) * 0.3); margin-top: calc(var(--w) * 0.06); }
.story-card .week span { flex: 1; display: grid; justify-items: center; gap: 6px; font-size: calc(var(--w) * 0.03); color: var(--ink-2); height: 100%; align-content: end; }
.story-card .week i { display: block; width: 100%; height: var(--h); border-radius: calc(var(--w) * 0.015); background: var(--bg-3); transform-origin: bottom; }
.story-card .week span.top i { background: var(--coral); }
.story-card .week span.top { color: var(--coral-text); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .story-card.on .sk, .story-card.on h4, .story-card.on .sv, .story-card.on .sf, .story-card.on .sb2, .story-card.on .week {
    animation: step-in 0.55s var(--spring) both;
  }
  .story-card.on h4 { animation-delay: 80ms; }
  .story-card.on .sv { animation-delay: 160ms; }
  .story-card.on .sf { animation-delay: 240ms; }
  .story-card.on .sb2, .story-card.on .week { animation-delay: 200ms; }
  .story-card.on .sb2 i { animation: grow 0.8s var(--ease) both 0.4s; }
  .story-card.on .week i { animation: grow-y 0.7s var(--ease) both; animation-delay: calc(0.35s + var(--n, 0) * 60ms); }
}
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.stories-controls { display: flex; align-items: center; gap: var(--s1); }
.stories-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--t-small);
  font-weight: 500;
}
.stories-controls button:hover { border-color: var(--coral-line); color: var(--coral-text); }
/* `display` de la regla de arriba gana sobre el atributo `hidden`. */
.stories-controls button[hidden] { display: none; }
.stories-controls .i { width: 16px; height: 16px; }

/* --- Resumen: la pantalla de resumen -------------------------------- */

.scene-summary {
  position: absolute;
  inset: 0;
  padding: calc(var(--w) * 0.18) calc(var(--w) * 0.05) calc(var(--w) * 0.06);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--w) * 0.028);
  font-size: calc(var(--w) * 0.04);
}
.scene-summary .h { font-size: calc(var(--w) * 0.085); font-weight: 700; letter-spacing: -0.02em; padding-inline: calc(var(--w) * 0.02); }
.scene-summary .card { padding: calc(var(--w) * 0.045); border-radius: calc(var(--w) * 0.05); background: #fff; }
.scene-summary .mon { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--w) * 0.032); font-weight: 600; letter-spacing: 0.05em; color: var(--ink-2); }
.scene-summary .tot { display: block; margin-top: calc(var(--w) * 0.015); font-family: var(--rounded); font-size: calc(var(--w) * 0.1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.scene-summary .cmp { font-size: calc(var(--w) * 0.033); color: var(--ink-2); }
.scene-summary .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * 0.022); }
.scene-summary .grid4 div { padding: calc(var(--w) * 0.035); border-radius: calc(var(--w) * 0.04); background: #fff; }
.scene-summary .grid4 span { display: block; font-size: calc(var(--w) * 0.03); color: var(--ink-2); }
.scene-summary .grid4 b { display: block; font-family: var(--rounded); font-size: calc(var(--w) * 0.05); font-weight: 700; }
.scene-summary .grid4 small { display: block; font-size: calc(var(--w) * 0.028); color: var(--ink-2); }
.scene-summary .cats { display: grid; gap: calc(var(--w) * 0.03); }
.scene-summary .cats li .lb { display: flex; align-items: center; gap: calc(var(--w) * 0.02); font-size: calc(var(--w) * 0.038); }
.scene-summary .cats .emo { font-size: calc(var(--w) * 0.032); }
.scene-summary .cats b { margin-left: auto; font-family: var(--rounded); font-weight: 600; }
.scene-summary .cats .b { display: block; margin-top: calc(var(--w) * 0.015); height: calc(var(--w) * 0.018); border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.scene-summary .cats .b i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--c); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim].play .scene-summary .stagger { animation: step-in 0.6s var(--spring) both; animation-delay: calc(var(--d, 0) * 100ms); }
  .js [data-anim].play .scene-summary .cats .b i { animation: grow 0.9s var(--ease) both; animation-delay: calc(var(--d, 0) * 100ms + 300ms); }
}

/* Pregúntale: la demo sin la frase al lado, con sus preguntas. */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ask .chips { justify-content: flex-start; margin: var(--s4) 0 0; }
.ask .demo-phone .device { --w: clamp(250px, 24vw, 300px); }
@media (max-width: 880px) {
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask > div, .ask .chips { min-width: 0; }
  .ask .demo-phone { order: -1; }
  .ask .demo-phone .device { --w: min(260px, 64vw); }
}
@media (max-width: 620px) {
  /* La fila de preguntas llega al borde, como la de la portada. */
  .ask .chips { margin-inline: calc(var(--gutter) * -1); }
}

/* --- Resumen: exportar ------------------------------------------------ */

.csv {
  border-radius: var(--r-card);
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 50px -34px rgba(0, 0, 0, 0.3);
}
.csv-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; word-break: break-word; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--t-micro); font-weight: 600; background: var(--bg-2); }
.csv-name .i { width: 16px; height: 16px; color: var(--c-sage); }
.csv { min-width: 0; }
.csv-scroll { overflow-x: auto; }
.csv table { width: 100%; border-collapse: collapse; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; white-space: nowrap; }
.csv th, .csv td { padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--line-2); }
.csv th { font-weight: 600; color: var(--ink-2); }
.csv td:last-child, .csv th:last-child { text-align: right; }
.csv tr:last-child td { border-bottom: 0; }

/* --- Privacidad: por dónde pasan tus datos --------------------------- */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.flow-phone {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 36px);
  border-radius: 48px;
  background: var(--bg);
  border: 10px solid #1f1f23;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 40px 80px -40px rgba(0, 0, 0, 0.45);
}
.flow-phone::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  width: 90px; height: 26px;
  margin-left: -45px;
  border-radius: 99px;
  background: #000;
}
.flow-phone .k { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-2); }
.flow-phone .k .i { width: 16px; height: 16px; color: #34c759; }
.flow-steps { position: relative; display: grid; gap: 14px; margin-top: var(--s3); }
.flow-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--coral-line); }
.flow-steps .flow-row { position: relative; display: flex; align-items: center; gap: 14px; }
.flow-steps .i {
  flex: none;
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--coral-wash);
  color: var(--coral-text);
  border: 1px solid var(--coral-line);
}
.flow-steps b { display: block; font-size: var(--t-body); font-weight: 600; }
.flow-steps span { display: block; font-size: var(--t-micro); color: var(--ink-2); }
.flow-dot {
  position: absolute;
  left: 17px; top: 22px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(242, 112, 92, 0.2);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .flow-dot { animation: flow-down 4s var(--ease) infinite; }
  .flow-dot:nth-of-type(2) { animation-delay: 1.3s; }
  .flow-dot:nth-of-type(3) { animation-delay: 2.6s; }
}
@keyframes flow-down {
  0% { top: 22px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 32px); opacity: 0; }
}

.flow-out { display: grid; gap: 12px; }
.flow-out li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
}
.flow-out .i { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.flow-out b { display: block; font-size: var(--t-body); font-weight: 600; }
.flow-out span { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.flow-out li.yes .i { color: #34c759; }
.flow-out li.no { background: transparent; border-style: dashed; }
.flow-out li.no b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--coral); color: var(--ink-2); }
.flow-out li.no .i { color: var(--coral-text); }
@media (max-width: 880px) { .flow { grid-template-columns: minmax(0, 1fr); } }

.pledge { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 40px); }
.pledge h3 { font-size: var(--t-body); margin-bottom: 6px; }
.pledge p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.pledge .ic { color: var(--coral-text); margin-bottom: var(--s2); }
@media (max-width: 880px) { .pledge { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pledge { grid-template-columns: minmax(0, 1fr); } }

/* La etiqueta de la App Store, dibujada como la muestra la ficha. */
.store-label {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 560px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: 22px 24px;
  border-radius: var(--r-card);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 44px -30px rgba(0, 0, 0, 0.3);
  text-align: left;
}
.store-label .i { flex: none; width: 34px; height: 34px; color: #0a84ff; stroke-width: 1.5; }
.store-label .k { font-size: var(--t-micro); color: var(--ink-2); }
.store-label b { display: block; margin-top: 2px; font-size: var(--t-sub); font-weight: 600; }
.store-label p { margin-top: 4px; font-size: var(--t-small); color: var(--ink-2); }
.store-label small { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-2); }

/* --- Precio: el encabezado ------------------------------------------ */

.price-hero .page-hero-grid { align-items: center; }
.price-big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.14em;
  font-size: clamp(64px, 11vw, 136px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.price-big .cur { font-size: 0.5em; font-weight: 600; color: var(--ink-2); letter-spacing: -0.02em; margin-right: -0.1em; }
.price-big .once { display: inline-grid; font-size: 0.42em; letter-spacing: -0.03em; }
.price-big .once > * { grid-area: 1 / 1; }
.price-big .per { color: var(--ink-2); position: relative; justify-self: start; }
/* El texto tachado vive en CSS y no en el HTML: quien lee la página sin
   estilos —un buscador, un motor de respuesta— no debe leer «$149 al mes». */
.price-big .per::before { content: attr(data-t); }
.price-big .per::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  top: 55%;
  height: 0.09em;
  border-radius: 99px;
  background: var(--coral);
  transform-origin: left;
  transform: scaleX(1);
}
.price-big .yes { color: var(--coral-text); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .price-big .per::after { transform: scaleX(0); animation: grow 0.5s var(--ease) 0.9s forwards; }
  .price-big .per { animation: per-out 0.5s var(--ease) 1.6s forwards; }
  .price-big .yes { transform: translateY(0.3em); animation: yes-in 0.7s var(--spring) 1.8s forwards; }
}
@media (prefers-reduced-motion: reduce) { .price-big .per { opacity: 0; } .price-big .yes { opacity: 1; } }
@keyframes per-out { to { opacity: 0; transform: translateY(-0.3em); } }
@keyframes yes-in { to { opacity: 1; transform: none; } }

.price-card {
  position: relative;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 40px 80px -44px rgba(160, 50, 32, 0.45);
}
.price-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 0%, rgba(242, 112, 92, 0.35), transparent 70%);
  filter: blur(30px);
}
.price-card .top { display: flex; align-items: center; gap: 14px; }
.price-card .top img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4); }
.price-card .top b { display: block; font-size: var(--t-sub); font-weight: 600; }
.price-card .top span { font-size: var(--t-small); color: var(--ink-2); }
.price-card .amount { display: flex; align-items: baseline; gap: 8px; margin-top: var(--s3); }
.price-card .amount b { font-size: 52px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.price-card .amount span { font-size: var(--t-small); color: var(--ink-2); }
.price-card .sub { margin-top: 6px; font-size: var(--t-small); color: var(--ink-2); }
.price-card ul { display: grid; gap: 10px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.price-card li { display: flex; gap: 10px; font-size: var(--t-small); line-height: 1.45; }
.price-card li .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--coral-text); stroke-width: 2.2; }
.price-card .btn { width: 100%; margin-top: var(--s4); }
.price-card .fine { margin-top: 12px; text-align: center; font-size: var(--t-micro); color: var(--ink-2); }

/* Qué incluye, agrupado igual que el menú. */
.includes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.includes article { padding: clamp(22px, 2.4vw, 28px); border-radius: var(--r-card); background: var(--bg); }
.includes h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-body); }
.includes h3 a { color: var(--coral-text); }
.includes h3 .i { width: 18px; height: 18px; }
.includes ul { display: grid; gap: 9px; margin-top: var(--s2); }
.includes li { display: flex; gap: 8px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.4; }
.includes li .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--coral-text); stroke-width: 2.4; }
@media (max-width: 1040px) { .includes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .includes { grid-template-columns: minmax(0, 1fr); } }

/* --- Preguntas frecuentes ------------------------------------------- */

:root { interpolate-size: allow-keywords; }
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 22px 0;
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.014em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.6px 12px no-repeat,
    var(--bg-2);
  transition: transform 0.4s var(--spring), background-color var(--fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--coral-text); }
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq .a { padding: 0 48px 24px 0; color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; }
.faq .a p + p { margin-top: 0.7em; }
.faq .a a { color: var(--coral-text); text-decoration: underline; text-underline-offset: 3px; }
.faq .a strong { color: var(--ink); font-weight: 600; }

/* ===================================================================
   Septiembre 2026: Háblame de tu día, Apple Intelligence cuando duda,
   el Resumen rediseñado y el detalle de un presupuesto.
   =================================================================== */

/* --- Registrar: Háblame de tu día ------------------------------------ */

.scene-day { background: var(--bg-2); justify-content: flex-start; }
.scene-day .d-listen,
.scene-day .d-result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--w) * 0.2) calc(var(--w) * 0.06) calc(var(--w) * 0.08);
}
.scene-day .d-listen {
  color: #fff;
  background: radial-gradient(120% 70% at 50% 30%, #f7876f 0%, #ef6a54 55%, #e25640 100%);
  gap: calc(var(--w) * 0.05);
}
.scene-day .d-lock {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  font-size: calc(var(--w) * 0.038);
  font-weight: 600;
  opacity: 0.85;
}
.scene-day .d-lock .i { width: calc(var(--w) * 0.042); height: calc(var(--w) * 0.042); stroke: #fff; }
.scene-day .d-text {
  font-family: var(--rounded);
  font-size: calc(var(--w) * 0.06);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.scene-day .d-text span { opacity: 0.25; }
.scene-day .d-meter {
  position: relative;
  display: block;
  height: calc(var(--w) * 0.018);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  margin-top: auto;
}
.scene-day .d-meter i { position: absolute; inset: 0 auto 0 0; width: 64%; border-radius: inherit; background: #fff; }
.scene-day .d-hint { font-size: calc(var(--w) * 0.034); opacity: 0.8; }
.scene-day .d-mic {
  align-self: center;
  width: calc(var(--w) * 0.22);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  margin-top: calc(var(--w) * 0.04);
}
.scene-day .d-mic svg { width: 44%; height: 44%; stroke: var(--coral); stroke-width: 1.9; fill: none; }
.scene-day .d-result { gap: calc(var(--w) * 0.03); opacity: 0; }
.scene-day .d-toast {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  padding: calc(var(--w) * 0.028) calc(var(--w) * 0.045);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.3);
  font-size: calc(var(--w) * 0.036);
  font-weight: 600;
  margin-bottom: calc(var(--w) * 0.03);
}
.scene-day .d-toast svg { width: calc(var(--w) * 0.045); height: calc(var(--w) * 0.045); stroke: #3f9a63; stroke-width: 3; fill: none; }
.scene-day .d-rows { display: grid; gap: calc(var(--w) * 0.022); }
.scene-day .d-rows li {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.03);
  padding: calc(var(--w) * 0.032) calc(var(--w) * 0.04);
  border-radius: calc(var(--w) * 0.045);
  background: #fff;
  font-size: calc(var(--w) * 0.04);
}
.scene-day .d-rows .emo { font-size: calc(var(--w) * 0.042); }
.scene-day .d-rows b { flex: 1; min-width: 0; font-weight: 600; }
.scene-day .d-rows b span { display: block; font-weight: 400; font-size: calc(var(--w) * 0.032); color: var(--ink-2); }
.scene-day .d-rows em { font-style: normal; font-family: var(--rounded); font-weight: 600; }
.scene-day .d-rows small { display: block; font-size: calc(var(--w) * 0.028); color: var(--coral-text); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .scene-day .d-listen { animation: d-listen 13s var(--ease) infinite; }
  .scene-day .d-result { animation: d-result 13s var(--ease) infinite; }
  .scene-day .d-text span { animation: d-word 13s var(--ease) infinite; animation-delay: calc(var(--n) * 0.85s); }
  .scene-day .d-meter i { animation: d-meter 13s linear infinite; }
  .scene-day .d-rows li { animation: d-row 13s var(--spring) infinite; animation-delay: calc(var(--n) * 0.22s); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-day .d-listen { opacity: 0; }
  .scene-day .d-result { opacity: 1; }
}
@keyframes d-listen { 0%, 54% { opacity: 1; } 60%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes d-result { 0%, 55% { opacity: 0; transform: scale(1.02); } 61%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes d-word { 0% { opacity: 0.25; } 5%, 100% { opacity: 1; } }
@keyframes d-meter { 0% { width: 3%; } 50%, 100% { width: 68%; } }
@keyframes d-row { 0%, 58% { opacity: 0; transform: translateY(calc(var(--w) * 0.04)); } 63%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* --- Registrar: cuando Sonanta duda ---------------------------------- */

.scene-assist { justify-content: flex-start; padding-top: calc(var(--w) * 0.22); gap: calc(var(--w) * 0.04); }
.scene-assist .a-said {
  align-self: stretch;
  padding: calc(var(--w) * 0.04) calc(var(--w) * 0.05);
  border-radius: calc(var(--w) * 0.05);
  background: var(--coral-wash);
  color: var(--coral-text);
  font-size: calc(var(--w) * 0.042);
  font-weight: 500;
  line-height: 1.35;
}
.scene-assist .a-think {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--w) * 0.02);
  font-size: calc(var(--w) * 0.04);
  font-weight: 600;
  color: var(--coral-text);
  background: linear-gradient(90deg, var(--coral-text) 0%, var(--coral-text) 38%, #ffc2b5 50%, var(--coral-text) 62%, var(--coral-text) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scene-assist .a-think .spark { -webkit-text-fill-color: var(--coral-text); }
.scene-assist .card { display: grid; gap: calc(var(--w) * 0.03); }
.scene-assist .a-note {
  display: flex;
  gap: calc(var(--w) * 0.02);
  padding: calc(var(--w) * 0.028) calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.035);
  background: var(--coral-wash);
  font-size: calc(var(--w) * 0.032);
  line-height: 1.35;
  color: var(--ink-2);
}
.scene-assist .a-note i { font-style: normal; color: var(--coral-text); }
.scene-assist .a-amt { font-family: var(--rounded); font-size: calc(var(--w) * 0.1); font-weight: 700; text-align: center; letter-spacing: -0.02em; }
.scene-assist .a-fields { display: grid; gap: calc(var(--w) * 0.022); }
.scene-assist .a-fields li { display: flex; align-items: center; gap: calc(var(--w) * 0.02); font-size: calc(var(--w) * 0.036); }
.scene-assist .a-fields span { color: var(--ink-2); }
.scene-assist .a-fields b { margin-left: auto; font-family: inherit; font-weight: 600; text-align: right; }
.sug {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px calc(var(--w) * 0.018);
  border-radius: 99px;
  background: var(--coral-wash);
  color: var(--coral-text);
  font-style: normal;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: calc(var(--w) * 0.028);
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
}
.scene-assist .a-btn {
  display: block;
  padding: calc(var(--w) * 0.035);
  border-radius: 99px;
  background: var(--coral);
  color: #fff;
  text-align: center;
  font-size: calc(var(--w) * 0.042);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .scene-assist .a-said { animation: a-said 9s var(--ease) infinite; }
  .scene-assist .a-think { animation: a-think 9s var(--ease) infinite, a-shine 1.6s linear infinite; }
  .scene-assist .card { animation: a-card 9s var(--spring) infinite; }
}
@media (prefers-reduced-motion: reduce) { .scene-assist .a-think { display: none; } }
@keyframes a-said { 0% { opacity: 0; transform: translateY(calc(var(--w) * 0.03)); } 6%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes a-think { 0%, 8% { opacity: 0; } 12%, 44% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes a-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes a-card { 0%, 46% { opacity: 0; transform: translateY(calc(var(--w) * 0.12)); } 54%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* --- Resumen: la pantalla nueva -------------------------------------- */

.scene-summary .cmp-chip {
  display: inline-flex;
  margin-top: calc(var(--w) * 0.015);
  padding: calc(var(--w) * 0.008) calc(var(--w) * 0.025);
  border-radius: 99px;
  background: var(--bg-3);
  font-size: calc(var(--w) * 0.03);
  color: var(--ink-2);
}
.scene-summary .pace { display: block; width: 100%; height: auto; margin-top: calc(var(--w) * 0.03); overflow: visible; }
.scene-summary .pace .prev { fill: none; stroke: #b9b9be; stroke-width: 2.2; stroke-dasharray: 5 5; }
.scene-summary .pace .area { fill: url(#pace-fill); }
.scene-summary .pace .now { fill: none; stroke: var(--coral); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0; }
.scene-summary .pace .proj { fill: none; stroke: var(--coral); stroke-opacity: 0.5; stroke-width: 2.4; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.scene-summary .pace .halo { fill: var(--coral); fill-opacity: 0.2; }
.scene-summary .pace .dot { fill: var(--coral); }
.scene-summary .pace .axis { fill: #a1a1a6; font-size: 10px; font-family: -apple-system, system-ui, sans-serif; }
.scene-summary .proj-line { display: block; margin-top: calc(var(--w) * 0.012); font-size: calc(var(--w) * 0.029); color: var(--ink-2); }
.scene-summary .donut-card { display: flex; align-items: center; gap: calc(var(--w) * 0.05); }
.scene-summary .donut {
  --a: 0.24; --b: 0.16; --c2: 0.11; --d2: 0.11; --e: 0.1;
  flex: none;
  position: relative;
  width: calc(var(--w) * 0.34);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    var(--c-apricot) 0 24%, #fff 24% 24.6%,
    #8e8e93 24.6% 40%, #fff 40% 40.6%,
    var(--c-violet) 40.6% 51%, #fff 51% 51.6%,
    var(--c-sky) 51.6% 62%, #fff 62% 62.6%,
    var(--c-teal) 62.6% 72%, #fff 72% 72.6%,
    var(--c-sage) 72.6% 81%, #fff 81% 81.6%,
    var(--c-orchid) 81.6% 87%, #fff 87% 87.6%,
    var(--c-rose) 87.6% 93%, #fff 93% 93.6%,
    var(--c-gold) 93.6% 97%, #fff 97% 97.6%,
    var(--c-mocha) 97.6% 100%
  );
  display: grid;
  place-items: center;
}
.scene-summary .donut::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: #fff; }
.scene-summary .donut span { position: relative; display: grid; justify-items: center; font-size: calc(var(--w) * 0.028); line-height: 1.15; }
.scene-summary .donut .emo { font-size: calc(var(--w) * 0.06); }
.scene-summary .donut b { font-size: calc(var(--w) * 0.03); font-weight: 600; font-family: inherit; }
.scene-summary .donut small { color: var(--ink-2); font-size: calc(var(--w) * 0.024); }
.scene-summary .legend { flex: 1; display: grid; gap: calc(var(--w) * 0.018); font-size: calc(var(--w) * 0.033); }
.scene-summary .legend li { display: flex; align-items: center; gap: calc(var(--w) * 0.018); }
.scene-summary .legend li i { width: calc(var(--w) * 0.02); height: calc(var(--w) * 0.02); border-radius: 50%; background: var(--c); flex: none; }
.scene-summary .legend li b { margin-left: auto; font-family: var(--rounded); font-weight: 600; }
.scene-summary .legend li small { color: var(--ink-2); font-size: calc(var(--w) * 0.026); margin-left: calc(var(--w) * 0.012); }
.scene-summary .lbl { display: block; font-size: calc(var(--w) * 0.036); font-weight: 600; }
.scene-summary .fbar { display: flex; gap: 2px; height: calc(var(--w) * 0.026); margin: calc(var(--w) * 0.022) 0 calc(var(--w) * 0.015); border-radius: 99px; overflow: hidden; background: var(--bg-3); }
.scene-summary .fbar i { width: var(--p); background: var(--c); transform-origin: left; }
.scene-summary .fixed small { font-size: calc(var(--w) * 0.03); color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim].play .scene-summary .pace .now { animation: pace-draw 1.6s var(--ease) both 0.5s; }
  .js [data-anim].play .scene-summary .pace .area,
  .js [data-anim].play .scene-summary .pace .proj,
  .js [data-anim].play .scene-summary .pace .halo,
  .js [data-anim].play .scene-summary .pace .dot { animation: pace-fade 0.6s var(--ease) both 1.9s; }
  .js [data-anim].play .scene-summary .donut { animation: donut-in 1s var(--spring) both 0.6s; }
  .js [data-anim].play .scene-summary .fbar i { animation: grow 0.9s var(--ease) both 1s; }
}
@keyframes pace-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes pace-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes donut-in { from { transform: rotate(-60deg) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* Día por día, presupuestos y el gasto hormiga. */
/* `.rings` también nombra los aros de la demo de voz (absolutos, detrás
   del teléfono); aquí son una fila normal dentro de la tarjeta. */
.scene-summary .rings { position: static; inset: auto; z-index: auto; pointer-events: auto; display: flex; justify-content: space-between; }
.scene-summary .ring { display: grid; justify-items: center; gap: calc(var(--w) * 0.01); font-size: calc(var(--w) * 0.028); }
.scene-summary .ring .r {
  position: relative;
  width: calc(var(--w) * 0.17);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--f) * 360deg), color-mix(in srgb, var(--c) 16%, #fff) 0);
  display: grid;
  place-items: center;
}
.scene-summary .ring .r::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, #fff); }
.scene-summary .ring .r span { position: relative; font-size: calc(var(--w) * 0.055); }
.scene-summary .ring b { font-family: inherit; font-weight: 600; font-size: calc(var(--w) * 0.03); }
.scene-summary .ring small { color: var(--ink-2); font-size: calc(var(--w) * 0.025); }
.scene-summary .ring small.over { color: var(--coral-text); }
.scene-summary .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--w) * 0.012); margin-top: calc(var(--w) * 0.02); }
.scene-summary .cal i {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: calc(var(--w) * 0.024);
  font-weight: 500;
  background: color-mix(in srgb, var(--coral) calc(var(--v, 0) * 1%), var(--bg-3));
  color: var(--ink);
}
.scene-summary .cal i.hi { color: #fff; }
.scene-summary .cal i.fut { background: var(--bg-2); color: #c7c7cc; }
.scene-summary .cal i.today { box-shadow: inset 0 0 0 2px var(--coral); }
.scene-summary .habit {
  display: flex;
  gap: calc(var(--w) * 0.02);
  padding: calc(var(--w) * 0.03) calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.04);
  background: var(--coral-wash);
  font-size: calc(var(--w) * 0.03);
  line-height: 1.35;
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim].play .scene-summary .cal i { animation: cal-in 0.5s var(--spring) both; animation-delay: calc(var(--k, 0) * 25ms + 400ms); }
  .js [data-anim].play .scene-summary .ring .r { animation: donut-in 0.9s var(--spring) both; animation-delay: calc(var(--d, 0) * 120ms + 300ms); }
}
@keyframes cal-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }

/* --- Avisos: el detalle de un presupuesto --------------------------- */

.scene-budget .b-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: calc(var(--w) * 0.05);
  padding: calc(var(--w) * 0.035) calc(var(--w) * 0.02);
  border-radius: calc(var(--w) * 0.05);
  background: #fff;
  text-align: center;
}
.scene-budget .b-stats div + div { border-left: 1px solid var(--line-2); }
.scene-budget .b-stats b { display: block; font-family: var(--rounded); font-size: calc(var(--w) * 0.048); font-weight: 700; }
.scene-budget .b-stats b.ok { color: var(--c-sage); }
.scene-budget .b-stats b.warn { color: #b27a14; }
.scene-budget .b-stats span { display: block; margin-top: 2px; font-size: calc(var(--w) * 0.026); color: var(--ink-2); line-height: 1.2; padding-inline: calc(var(--w) * 0.01); }