/* Generated by tools/export-community-bolso.mjs. */
.community-bolso { scroll-margin-top: 88px; overflow: clip; padding-block: 64px 28px; background: var(--color-navy-950); color: white; }
  .bolso-layout { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 64px; row-gap: 28px; align-items: center; }
  .bolso-copy h2 { max-width: 20ch; font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
  .bolso-copy h2 span { display: block; color: var(--color-mint); }
  .bolso-copy > p { margin-top: 24px; font-size: 18px; line-height: 1.65; color: var(--color-navy-100); }
  .bolso-copy > p strong { font-weight: 550; color: white; }
  .bolso-graphic { position: relative; grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: 420px; justify-self: end; }
  .bolso-graphic figure { position: relative; margin: 0; }
  .bolso-counter { display: flex; align-items: baseline; justify-content: space-between; color: var(--color-navy-100); font-size: 16px; }
  .bolso-counter strong { color: var(--color-mint); font-size: 32px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .bolso-counter strong > span + span { color: var(--color-navy-100); font-size: 18px; font-weight: 450; }
  .bolso-streak > p { margin-top: 10px; color: var(--color-navy-100); font-size: 14px; }
  .bolso-marks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 10px; }
  .bolso-marks span { height: 9px; border-radius: 2px; background: var(--color-mint); transform-origin: left center; }
  .bolso-marks [data-paid='false'] { opacity: .18; transform: scaleY(.65); }
  .bolso-result { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
  .bolso-result img { width: 132px; height: auto; flex: none; }
  .bolso-result > div { flex: 1; min-width: 0; }
  .bolso-diamond { color: white; font-size: 18px; font-weight: 550; }
  .bolso-zero { display: block; margin-left: -4px; color: var(--color-mint); font-size: 128px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .bolso-percent { font-size: .6em; font-weight: 550; }
  .bolso-fee { min-height: 32px; margin-top: 4px; color: white; font-size: 22px; font-weight: 800; }
  [data-bolso-motion='playing'] .bolso-fee { color: var(--color-navy-100); font-size: 15px; font-weight: 450; }
  [data-bolso-motion='playing'] .bolso-zero { color: white; }
  [data-bolso-motion='playing'] .bolso-result img { opacity: .25; filter: saturate(.2); }
  .bolso-replay { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 0 auto; color: var(--color-navy-100); font-size: 13px; cursor: pointer; }
  .bolso-replay[hidden] { display: none; }
  .bolso-replay:hover { color: white; }
  .bolso-confetti { position: absolute; left: 65%; top: 55%; pointer-events: none; }
  .bolso-actions { grid-column: 1; }
  .bolso-action { min-height: 54px; font-size: 17px; }
  .bolso-action:hover svg { translate: 4px 0; }
  .bolso-conditions { grid-column: 1 / -1; display: flex; align-items: center; gap: 32px; justify-content: space-between; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgb(196 208 248 / 25%); color: var(--color-navy-100); font-size: 13px; line-height: 1.55; }
  .bolso-conditions p { max-width: 74ch; }
  .bolso-conditions button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: none; color: white; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  #tu-bolso :focus-visible { outline-color: var(--color-mint); }
  @media (prefers-reduced-motion: no-preference) {
    .bolso-marks span { transition: opacity 180ms ease-out, transform 180ms ease-out; }
    .bolso-result img { transition: opacity 350ms ease-out, filter 350ms ease-out; }
    [data-bolso-motion='complete'] .bolso-zero { animation: bolso-win 650ms var(--ease-out-expo); }
    @keyframes bolso-win { from { transform: scale(.82); } to { transform: scale(1); } }
  }
  @media (max-width: 1023px) {
    .bolso-layout { column-gap: 32px; grid-template-columns: 1.2fr 1fr; }
    .bolso-copy h2 { font-size: 40px; }
    .bolso-result { gap: 12px; }
    .bolso-result img { width: 88px; }
    .bolso-zero { font-size: 96px; }
    .bolso-fee { font-size: 20px; }
    .bolso-diamond { font-size: 16px; }
    .bolso-conditions { gap: 20px; }
  }
  @media (max-width: 767px) {
    .community-bolso { padding-block: 40px 20px; }
    .bolso-layout { grid-template-columns: 1fr; gap: 24px; }
    .bolso-copy h2 { font-size: clamp(2rem, 8.8vw, 2.75rem); max-width: 22ch; }
    .bolso-copy > p { margin-top: 16px; font-size: 16px; line-height: 1.6; }
    .bolso-graphic { grid-column: auto; grid-row: auto; justify-self: stretch; max-width: none; padding-top: 0; }
    .bolso-counter { font-size: 14px; }
    .bolso-counter strong { font-size: 28px; }
    .bolso-streak > p { font-size: 13px; }
    .bolso-marks { gap: 5px; margin-top: 10px; }
    .bolso-result { gap: 20px; margin-top: 20px; }
    .bolso-result img { width: clamp(88px, 25vw, 112px); }
    .bolso-zero { font-size: clamp(84px, 26vw, 112px); }
    .bolso-action { width: 100%; min-height: 52px; font-size: 16px; padding-inline: 16px; }
    .bolso-conditions { display: block; margin-top: 0; padding-top: 16px; font-size: 12px; }
    .bolso-conditions button { margin-top: 2px; }
  }