/* Right floating cards */
    .floating-cards {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      width: min(100%, 565px);
      gap: 16px;
    }

    .float-card {
      --float-offset: -9px;
      --float-duration: 4.8s;
      --float-delay: .35s;

      min-width: 0;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 16px;
      color: #fff;
      font-family: var(--ont-family-primary);
      background: var(--ink2);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 40px -12px rgb(0 0 0 / 56%);
      translate: 0 0;
      scale: 1;
      animation: float-y var(--float-duration) ease-in-out var(--float-delay) infinite;
      transition: scale 300ms cubic-bezier(.4, 0, .2, 1);
    }

    /* scale y translate se componen: el hover ya no cancela la flotación. */
    .float-card:hover { scale: 1.03; }

    .float-card--limit { padding: 16px; }
    .float-card--transactions { padding: 14px; }
    .float-card--connected { padding: 20px; text-align: center; }
    .float-card--ethereum { padding: 16px; }
    .float-card--reviews { padding: 14px 20px; }
    .float-card--debit { padding: 16px; }

    .float-card:nth-child(1) {
      --float-offset: -9px;
      --float-duration: 4.8s;
      --float-delay: .35s;
    }
    .float-card:nth-child(2) {
      --float-offset: -12px;
      --float-duration: 5.4s;
      --float-delay: .7s;
    }
    .float-card:nth-child(3) {
      --float-offset: -6px;
      --float-duration: 6s;
      --float-delay: 1.05s;
    }
    .float-card:nth-child(4) {
      --float-offset: -9px;
      --float-duration: 6.6s;
      --float-delay: 1.4s;
    }
    .float-card:nth-child(5) {
      --float-offset: -12px;
      --float-duration: 7.2s;
      --float-delay: 1.75s;
    }
    .float-card:nth-child(6) {
      --float-offset: -6px;
      --float-duration: 7.8s;
      --float-delay: 2.1s;
    }

    @keyframes float-y {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 var(--float-offset); }
    }

    .row {
      display: flex;
      align-items: center;
    }

    .row--between { justify-content: space-between; }
    .row--end { align-items: flex-end; }
    .gap-2 { gap: 8px; }
    .gap-10 { gap: 10px; }

    p { margin: 0; }

    .text-xs {
      font-size: 12px;
      line-height: 16px;
    }

    .text-medium { font-weight: 500; }
    .text-muted { color: rgba(255, 255, 255, .50); }
    .text-soft { color: rgba(255, 255, 255, .75); }
    .text-right { text-align: right; }

    .icon-box {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      color: var(--white);
      background: var(--brand);
    }

    .icon-box--circle { border-radius: 50%; }
    .icon-box--neutral {
      color: #fff;
      background: rgba(255, 255, 255, .12);
    }
    .icon-box--connected {
      width: 34px;
      height: 34px;
      margin-inline: auto;
      border-radius: 50%;
    }
    .icon-box--card {
      width: 32px;
      height: 24px;
      color: #fff;
      background: rgba(255, 255, 255, .15);
    }

    .icon-12 { width: 12px; height: 12px; }
    .icon-14 { width: 14px; height: 14px; }
    .icon-15 { width: 15px; height: 15px; }
    .icon-18 { width: 18px; height: 18px; }

    .slider {
      position: relative;
      height: 6px;
      margin-top: 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .15);
    }

    .slider-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 62.5%;
      border-radius: inherit;
      background: var(--brand);
      animation: slider-width 10.472s ease-in-out infinite;
    }

    .slider-knob {
      position: absolute;
      top: 50%;
      left: 62.5%;
      width: 14px;
      height: 14px;
      margin-left: -7px;
      border: 3px solid var(--lime);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .30);
      translate: 0 -50%;
      animation: slider-left 10.472s ease-in-out infinite;
    }

    @keyframes slider-width {
      0%, 50%, 100% { width: 62.5%; }
      25% { width: 67.5%; }
      75% { width: 57.5%; }
    }

    @keyframes slider-left {
      0%, 50%, 100% { left: 62.5%; }
      25% { left: 67.5%; }
      75% { left: 57.5%; }
    }

    .transaction {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .06);
    }

    .transaction + .transaction { margin-top: 8px; }

    .connected-title { margin-top: 10px; }

    .eth-bars {
      height: 48px;
      margin-top: 12px;
      display: flex;
      align-items: flex-end;
      gap: 4px;
    }

    .eth-bar {
      width: 4px;
      height: var(--bar-height);
      border-radius: 2px;
      background: var(--bar-color);
      animation: bar-pulse var(--bar-duration) ease-in-out var(--bar-delay) infinite;
    }

    @keyframes bar-pulse {
      0%, 100% { height: var(--bar-height); }
      50% { height: var(--bar-peak); }
    }

    .price { margin-top: 12px; }

    .stars {
      display: flex;
      align-items: center;
      gap: 2px;
      color: var(--lime);
    }

    .reviews-copy { margin-top: 4px; }
    .debit-details { margin-top: 12px; }

    @media (min-width: 640px) {
      .floating-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 1024px) {
      .floating-cards {
        display: block;
        height: 440px;
      }

      .float-card { position: absolute; }
      .float-card:nth-child(1) { top: -12px; left: 40px; width: 340px; }
      .float-card:nth-child(2) { bottom: 0px; left: 20px; width: 340px; }
      .float-card:nth-child(3) { top: 96px; right: 0; width: 160px; }
      .float-card:nth-child(4) { top: 160px; right: 8px; width: 176px; }
      .float-card:nth-child(5) { bottom: 64px; left: 0; width: 192px; }
      .float-card:nth-child(6) { bottom: 32px; left: 224px; width: 208px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .float-card,
      .slider-fill,
      .slider-knob,
      .eth-bar { animation: none; }
      .float-card { transition: none; }
    }