/* La Family Shop — efectos visuales. Todo cuelga de html.lfsfx (lo pone efectos.js). */

/* 1. líquido bajo el banner */
.lfsfx-liq{position:relative;height:0;z-index:6;pointer-events:none}
.lfsfx-liq svg{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none}

/* 2. onda en botones */
.lfsfx-rip-layer{position:absolute;z-index:2147483000;overflow:hidden;pointer-events:none}
.lfsfx-rip{position:absolute;border-radius:50%;opacity:.32;transform:scale(0);animation:lfsfx-rip .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes lfsfx-rip{to{transform:scale(1);opacity:0}}

/* 3. aparición al hacer scroll */
html.lfsfx .lfsfx-r{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.lfsfx .lfsfx-r.is-in{opacity:1;transform:none}

/* 5. cinta de ventajas (se pinta desde el servidor; sin JS se ve quieta y se puede deslizar) */
.lfsfx-cinta{background:#dd3333;color:#fff;overflow:hidden;white-space:nowrap;font:700 12.5px/34px Quicksand,system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase;height:34px;position:relative;z-index:1}
.lfsfx-cinta-track{display:inline-flex;will-change:transform}
.lfsfx-cinta-grupo{display:inline-flex;flex:0 0 auto}
.lfsfx-cinta-i{display:inline-flex;align-items:center;gap:8px;padding:0 22px}
.lfsfx-cinta-i::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);margin-left:22px}
.lfsfx-cinta-i svg{width:16px;height:16px;flex:0 0 16px}
html.lfsfx:not(.lfsfx-rm) .lfsfx-cinta-track{animation:lfsfx-cinta var(--lfsfx-cinta-dur,32s) linear infinite}
html.lfsfx .lfsfx-cinta:hover .lfsfx-cinta-track{animation-play-state:paused}
@keyframes lfsfx-cinta{to{transform:translateX(-50%)}}
html:not(.lfsfx) .lfsfx-cinta,html.lfsfx-rm .lfsfx-cinta{overflow-x:auto;scrollbar-width:none}
html:not(.lfsfx) .lfsfx-cinta-grupo[aria-hidden],html.lfsfx-rm .lfsfx-cinta-grupo[aria-hidden]{display:none}
@media (max-width:767px){.lfsfx-cinta{font-size:11.5px;line-height:30px;height:30px}.lfsfx-cinta-i{padding:0 16px}.lfsfx-cinta-i::after{margin-left:16px}}

@media (prefers-reduced-motion:reduce){.lfsfx-cinta-track{animation:none!important}.lfsfx-rip{display:none}}