/* Hero LAOGANMA — fiel a Hero.tsx (agnóstico) */

.lg-hero{position:relative;min-height:100svh;overflow:hidden;color:#fff;isolation:isolate}

/* Fondos por escena (crossfade del gradiente) */
.lg-bg{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--lg-ease);z-index:-2}
.lg-bg.is-active{opacity:1}
.lg-halo{position:absolute;top:48%;left:50%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 68%);filter:blur(20px);z-index:-1;pointer-events:none}

/* Flechas laterales */
.lg-arrow{position:fixed;top:50%;z-index:40;width:56px;height:160px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;line-height:1;border:0;cursor:pointer;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.05));backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,.1)}
.lg-arrow--prev{left:0;border-radius:0 24px 24px 0;border-right:1px solid rgba(255,255,255,.3);transform:translateY(-50%);animation:lg-wig-l 2s ease-in-out infinite}
.lg-arrow--next{right:0;border-radius:24px 0 0 24px;border-left:1px solid rgba(255,255,255,.3);transform:translateY(-50%);animation:lg-wig-r 2s ease-in-out infinite}
@keyframes lg-wig-r{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}}
@keyframes lg-wig-l{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-3px)}}

/* Escenas */
.lg-stage{position:absolute;inset:0}
.lg-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--lg-ease)}
.lg-scene.is-active{opacity:1;visibility:visible}
.lg-scene__jar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:62vh;max-height:560px;animation:lg-float 4s ease-in-out infinite;will-change:transform}
.lg-scene__jar img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 30px 55px rgba(0,0,0,.5))}
@keyframes lg-float{0%,100%{transform:translate(-50%,-50%) translateY(-12px)}50%{transform:translate(-50%,-50%) translateY(12px)}}
.lg-scene__title{position:absolute;left:64px;top:50%;transform:translateY(-50%);margin:0;font-family:var(--lg-serif);font-weight:500;font-size:clamp(56px,7vw,96px);line-height:.96;display:flex;flex-direction:column;text-shadow:0 8px 30px rgba(0,0,0,.15)}
.lg-scene__tag{position:absolute;left:66px;top:calc(50% + clamp(78px,9.5vw,120px));margin:0;font-family:var(--lg-sans);font-weight:300;text-transform:uppercase;letter-spacing:.05em;font-size:18px;color:rgba(255,255,255,.7)}

/* Selector de sabor (desktop) */
.lg-flavors{position:absolute;right:64px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.lg-flavor{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:#fff;font-family:var(--lg-sans);text-transform:uppercase;letter-spacing:.12em;font-size:12px;opacity:.5;transition:opacity .2s}
.lg-flavor:hover{opacity:.8}
.lg-flavor.is-active{opacity:1;font-weight:700;font-size:14px}
.lg-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}
.lg-flavor.is-active .lg-dot{width:16px;height:16px;background:#fff;border:0;box-shadow:0 0 15px rgba(255,255,255,.5)}
.lg-overview{margin-top:14px;font-size:12px;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}

/* Barra inferior */
.lg-bar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 48px}
.lg-bar__trust{display:flex;align-items:center;gap:16px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.lg-bar__trust i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.lg-bar__price{font-family:var(--lg-sans);font-weight:700;font-size:48px;letter-spacing:-.025em}
.lg-buy{display:flex;align-items:center;gap:8px;padding:7px;border-radius:var(--lg-radius-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.lg-qty{display:flex;align-items:center;gap:14px;padding:0 14px}
.lg-qty__btn{background:none;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;width:24px;height:28px}
.lg-qty__n{min-width:16px;text-align:center;font-weight:500}
.lg-buy__cta{background:#fff;color:var(--lg-cta);border-radius:var(--lg-radius-pill);padding:12px 32px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transition:transform .2s}
.lg-buy__cta:hover{transform:scale(1.05)}
.lg-buy__cta:active{transform:scale(.95)}

/* Pago rápido (móvil) */
.lg-express{display:none}

/* MÓVIL */
@media (max-width:860px){
	.lg-arrow{width:40px;height:128px;font-size:26px}
	.lg-scene__title{left:0;right:0;top:7%;transform:none;text-align:center;align-items:center;font-size:44px}
	.lg-scene__tag{left:0;right:0;top:calc(7% + 100px);text-align:center;font-size:12px}
	.lg-scene__jar{top:45%;height:36vh}
	.lg-flavors{display:none}
	.lg-bar{flex-direction:column;gap:14px;padding:0 24px;bottom:118px;background:none}
	.lg-bar__trust{display:none}
	.lg-bar__price{font-size:38px}
	.lg-buy{width:100%;justify-content:space-between}
	.lg-buy__cta{flex:1;text-align:center;margin-left:8px}
	.lg-express{display:block;position:absolute;left:24px;right:24px;bottom:28px;z-index:30}
	.lg-express__label{text-align:center;font-size:9px;color:rgba(255,255,255,.5);margin-bottom:8px}
	.lg-express__row{display:flex;gap:8px}
	.lg-express__btn{flex:1;text-align:center;padding:9px;border-radius:var(--lg-radius-pill);font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(4px)}
	.lg-express__btn--pp{background:rgba(0,112,186,.9);border:0}
}

@media (prefers-reduced-motion:reduce){.lg-scene__jar,.lg-arrow{animation:none!important}}