html, body { overflow-x: clip; } /* Tarjeta de fidelización final. */
body[data-page="digital-card"] { color: var(--color-text-main); background: var(--color-bg); font-family: var(--font-body); }
.loyalty-card-hero h1, .loyalty-card-definition h2, .loyalty-card-section-head h2, .loyalty-card-benefits h2,
.loyalty-card-wallets h2, .loyalty-card-faq h2, .loyalty-card-final h2 {
    min-width: 0; margin: 0; overflow-wrap: anywhere; font-family: var(--font-display);
    font-style: normal; font-weight: 700; letter-spacing: -.04em; line-height: 1.02;
}
.loyalty-card-hero { padding: 10rem 0 var(--space-2xl); border-bottom: 1px solid var(--color-border); }
.loyalty-card-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); gap: var(--space-3xl); align-items: center; }
.loyalty-card-hero h1 { max-width: 14ch; font-size: clamp(3.25rem, 5.8vw, 5.25rem); }
.loyalty-card-hero__copy > p:not(.site-eyebrow) { max-width: 38rem; margin: var(--space-l) 0 0; color: var(--color-text-muted); font-size: var(--txt-l); line-height: 1.55; }
.loyalty-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }
.loyalty-card-demo { position: relative; min-height: 26rem; }
.loyalty-card-pass { position: absolute; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.loyalty-card-pass--back { top: 1.5rem; right: 0; width: 78%; min-height: 13rem; padding: var(--space-l); color: var(--color-surface); background: var(--color-boutique); transform: rotate(4deg); }
.loyalty-card-pass--back span, .loyalty-card-pass__reward span { display: block; font-family: var(--font-label); font-size: var(--txt-xs); letter-spacing: .1em; text-transform: uppercase; }
.loyalty-card-pass--back strong { display: block; margin-top: var(--space-m); font-family: var(--font-display); font-size: var(--txt-2xl); }
.loyalty-card-pass--front { right: 8%; bottom: 0; width: 82%; min-height: 20rem; overflow: hidden; color: var(--color-coffee-dark); background: var(--color-coffee-cream); transform: rotate(-2deg); }
.loyalty-card-pass--front header { display: flex; gap: var(--space-s); align-items: center; padding: var(--space-m); border-bottom: 1px solid rgb(51 33 23 / 18%); font-size: var(--txt-l); }
.loyalty-card-pass__logo { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--color-coffee-cream); background: var(--color-coffee); border-radius: var(--radius-pill); font-weight: 700; }
.loyalty-card-pass__stamps { display: flex; justify-content: space-between; gap: .5rem; padding: var(--space-l) var(--space-m); background: var(--color-coffee); }
.loyalty-card-pass__stamps i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--color-coffee-dark); background: var(--color-coffee-cream); border-radius: 50%; font-style: normal; }
.loyalty-card-pass__stamps i:nth-child(n+4) { opacity: .42; }
.loyalty-card-pass__reward { padding: var(--space-m); }
.loyalty-card-pass__reward strong { display: block; margin-top: var(--space-3xs); font-size: var(--txt-xl); }
.loyalty-card-definition { padding-block: var(--space-3xl); }
.loyalty-card-definition > div { max-width: 58rem; }
.loyalty-card-definition h2, .loyalty-card-section-head h2 { max-width: 18ch; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.loyalty-card-definition div > p { max-width: 58ch; margin: var(--space-l) 0 0; color: var(--color-text-muted); font-size: var(--txt-l); line-height: 1.65; }
.loyalty-card-flow { padding-block: var(--space-3xl); color: var(--color-surface); background: var(--color-text-main); }
.loyalty-card-flow .site-eyebrow, .loyalty-card-benefits .site-eyebrow { color: var(--color-primary); }
.loyalty-card-flow__list { margin-top: var(--space-2xl); border-top: 1px solid rgb(255 255 255 / 25%); }
.loyalty-card-flow__list article { display: grid; grid-template-columns: minmax(9rem, .4fr) minmax(0, 1.6fr); gap: var(--space-l); padding: var(--space-l) 0; border-bottom: 1px solid rgb(255 255 255 / 20%); }
.loyalty-card-flow__list strong { font-family: var(--font-display); font-size: var(--txt-xl); }
.loyalty-card-flow__list p { max-width: 60ch; margin: 0; color: var(--color-border); line-height: 1.6; }
.loyalty-card-compare, .loyalty-card-cases { padding-block: var(--space-3xl); }
.loyalty-card-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2xl); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.loyalty-card-compare__grid article { min-height: 24rem; padding: var(--space-xl); }
.loyalty-card-compare__new { color: var(--color-surface); background: var(--color-text-main); }
.loyalty-card-compare__grid span { font-family: var(--font-label); font-size: var(--txt-xs); letter-spacing: .1em; text-transform: uppercase; }
.loyalty-card-compare__grid h3 { max-width: 17ch; margin: var(--space-xl) 0 var(--space-m); font-family: var(--font-display); font-size: var(--txt-2xl); line-height: 1.1; }
.loyalty-card-compare__grid p { max-width: 48ch; margin: 0; color: var(--color-text-muted); line-height: 1.65; }
.loyalty-card-compare__new p { color: var(--color-border); }
.loyalty-card-benefits { padding-block: var(--space-3xl); color: var(--color-surface); background: var(--color-text-main); }
.loyalty-card-benefits__intro { max-width: 60rem; }
.loyalty-card-benefits h2 { max-width: 18ch; font-size: clamp(2.7rem, 5vw, 4.5rem); }
.loyalty-card-benefits__list { max-width: 60rem; margin-top: var(--space-2xl); border-top: 2px solid var(--color-primary); }
.loyalty-card-benefits__list article { padding: var(--space-l) 0; border-bottom: 1px solid rgb(255 255 255 / 20%); }
.loyalty-card-benefits__list h3 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--txt-xl); }
.loyalty-card-benefits__list p { max-width: 58ch; margin: 0; color: var(--color-border); line-height: 1.6; }
.loyalty-card-cases__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2xl); border-top: 2px solid var(--color-text-main); }
.loyalty-card-cases__grid article { padding: var(--space-l); border-bottom: 1px solid var(--color-border); }
.loyalty-card-cases__grid article:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--color-border); }
.loyalty-card-cases__grid h3 { margin: 0 0 var(--space-s); font-family: var(--font-display); font-size: var(--txt-xl); }
.loyalty-card-cases__grid p { max-width: 52ch; margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.loyalty-card-wallets { padding-block: var(--space-2xl); background: var(--color-surface-soft); }
.loyalty-card-wallets__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; }
.loyalty-card-wallets h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.loyalty-card-wallets__names { display: flex; gap: var(--space-s); }
.loyalty-card-wallets__names strong { padding: var(--space-s) var(--space-m); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); white-space: nowrap; }
.loyalty-card-faq { padding-block: var(--space-3xl); }
.loyalty-card-faq h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.loyalty-card-faq__list { max-width: 60rem; margin-top: var(--space-2xl); border-top: 2px solid var(--color-text-main); }
.loyalty-card-faq details { border-bottom: 1px solid var(--color-border); }
.loyalty-card-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: var(--space-m); padding: var(--space-m) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--txt-l); font-weight: 700; }
.loyalty-card-faq summary::-webkit-details-marker { display: none; }
.loyalty-card-faq summary::after { content: "+"; }
.loyalty-card-faq details[open] summary::after { content: "−"; }
.loyalty-card-faq details p { max-width: 60ch; margin: 0; padding: 0 var(--space-xl) var(--space-m) 0; color: var(--color-text-muted); line-height: 1.65; }
.loyalty-card-final { padding-block: var(--space-2xl); color: var(--color-surface); background: var(--color-primary-hover); }
.loyalty-card-final h2 { max-width: 18ch; font-size: clamp(2.7rem, 5vw, 4.75rem); }
.loyalty-card-final p { max-width: 52ch; margin: var(--space-m) 0 var(--space-l); color: var(--color-surface-soft); font-size: var(--txt-l); }
.loyalty-card-final .site-button { color: var(--color-text-on-primary); background: var(--color-surface); border-color: var(--color-surface); }
.loyalty-card-footer { padding-bottom: var(--space-l); color: var(--color-border); background: var(--color-text-main); }
.loyalty-card-footer a { color: var(--color-surface-soft); }
.loyalty-card-faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
@media (max-width: 900px) {
    .loyalty-card-hero__inner, .loyalty-card-wallets__inner { grid-template-columns: minmax(0, 1fr); }
    .loyalty-card-hero { padding-top: 8.5rem; }
    .loyalty-card-demo { width: min(100%, 34rem); margin-inline: auto; }
}
@media (max-width: 600px) {
    .loyalty-card-hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
    .loyalty-card-hero__copy > p:not(.site-eyebrow) { font-size: var(--txt-m); }
    .loyalty-card-actions { flex-direction: column; }
    .loyalty-card-actions .site-button { width: 100%; }
    .loyalty-card-demo { min-height: 21.5rem; }
    .loyalty-card-pass--front { right: 2%; width: 92%; min-height: 18rem; }
    .loyalty-card-pass--back { width: 82%; }
    .loyalty-card-pass__stamps i { width: 2rem; height: 2rem; }
    .loyalty-card-flow__list article { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
    .loyalty-card-compare__grid, .loyalty-card-cases__grid { grid-template-columns: minmax(0, 1fr); }
    .loyalty-card-compare__grid article { min-height: 0; }
    .loyalty-card-cases__grid article, .loyalty-card-cases__grid article:nth-child(odd) { padding-inline: 0; border-right: 0; }
    .loyalty-card-wallets__names { align-items: stretch; flex-direction: column; }
    .loyalty-card-final .site-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }