/* ===== Efectos visuales: carga, entradas, scroll y hover ===== */

/* Pantalla de carga */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#2a1550 0%,var(--bg) 65%);
  transition:opacity .6s ease,visibility .6s;animation:loaderOut .5s ease 2.2s forwards}
#loader .lk{display:flex;flex-direction:column;align-items:center;gap:18px}
#loader img{width:64px;height:auto;animation:lpulse 1.2s ease-in-out infinite}
#loader b{font-family:var(--display);font-stretch:118%;font-weight:850;letter-spacing:.18em;font-size:14px;color:var(--fg);opacity:.9}
#loader .lbar{width:140px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
#loader .lbar i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,#8b5cf6,#ec4899);animation:lbar 1s ease-in-out infinite}
html.ready #loader{opacity:0;visibility:hidden}
@keyframes lpulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 18px rgba(157,107,240,.7))}}
@keyframes lbar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* Barra de progreso de scroll */
#sprog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#8b5cf6,#ec4899,#22c55e);pointer-events:none}

/* Encabezado al hacer scroll */
.top{transition:box-shadow .3s,background-color .3s}
.top.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Entrada de la portada */
html.anim .st-copy>*{opacity:0;transform:translateY(22px)}
html.anim .st-view{opacity:0;transform:scale(.94)}
html.anim.ready .st-copy>*{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
html.anim.ready .st-view{opacity:1;transform:none;transition:opacity 1s ease .25s,transform 1.1s cubic-bezier(.2,.8,.2,1) .25s}
html.anim.ready .st-copy>*:nth-child(2){transition-delay:.08s}
html.anim.ready .st-copy>*:nth-child(3){transition-delay:.16s}
html.anim.ready .st-copy>*:nth-child(4){transition-delay:.24s}
html.anim.ready .st-copy>*:nth-child(5){transition-delay:.32s}
html.anim.ready .st-copy>*:nth-child(6){transition-delay:.40s}
html.anim.ready .st-copy>*:nth-child(7){transition-delay:.48s}

/* Aparición al hacer scroll */
html.anim .rv{opacity:0;transform:translateY(28px)}
html.anim .rv.in{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}

/* Tarjetas: brillo que sigue al cursor */
.card,.pcard{position:relative;isolation:isolate}
.card::after,.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:2;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(157,107,240,.18),transparent 60%)}
.card{transition:border-color .2s,transform .25s ease,box-shadow .25s}

/* Imagen cargando: brillo tipo esqueleto */
.shot.loading::before,.pshot.loading::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%) #ececf1;background-size:200% 100%;animation:shim 1.1s linear infinite}
.pshot.loading::before{background-color:#1d1930;background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%)}
.shot img,.pshot img{transition:opacity .4s ease}
.shot.loading img,.pshot.loading img{opacity:0}
@keyframes shim{to{background-position:-200% 0}}

/* Destello en botones de WhatsApp */
.btn-wa{position:relative;overflow:hidden}
.btn-wa::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}

/* Pestañas del catálogo: transición suave */
.seg button{transition:background-color .25s,color .25s}

/* Producto abierto desde un enlace */
.card.flash,.pcard.flash{animation:flash 2.4s ease}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px #ec4899,0 0 40px rgba(236,72,153,.55)}100%{box-shadow:none}}

@media (prefers-reduced-motion: reduce){
  #loader{display:none}
  html.anim .rv,html.anim .st-copy>*,html.anim .st-view{opacity:1!important;transform:none!important}
  .btn-wa::after,.shot.loading::before,.pshot.loading::before{animation:none}
}

/* ===== Pulido visual ===== */
html.anim .rv{transform:translateY(16px)}
html.anim .rv.in{transition-duration:.5s}
.btn{min-height:44px}
.btn .i{flex-shrink:0}
.btn-cart .i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card .pricebar{flex-direction:column;align-items:stretch;gap:10px}
.card .pbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card .pbtns .btn{justify-content:center}
.chip{min-height:34px}
/* Pestañas: indicador de que se puede deslizar */
.win-bar{position:relative}
@media (max-width: 760px){
  .seg{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
}
/* Teléfono: catálogo en 2 columnas compactas */
@media (max-width: 580px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:10px;gap:8px;border-radius:16px}
  .card .shot{aspect-ratio:1/1;border-radius:10px}
  .card .shot img{padding:8%}
  .card .badge{font-size:9px;padding:3px 7px;left:6px;top:6px}
  .card h3{font-size:17px;line-height:1.1}
  .card .sub{font-size:11px;margin-top:-4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card .opt-label{font-size:9px;margin-bottom:4px}
  .card .chips{gap:4px}
  .card .chip{font-size:11px;padding:4px 7px;min-height:28px;gap:4px}
  .card .chip .sw{width:9px;height:9px}
  .card .pricebar{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
  .card .p{font-size:24px}
  .card .pbtns{grid-template-columns:1fr;gap:6px}
  .card .pbtns .btn{width:100%;justify-content:center;padding:8px 10px;font-size:13px;min-height:40px}
  .card:hover{transform:none}
}
/* Teléfono: promo HSO en carrusel deslizable */
@media (max-width: 580px){
  .promo-grid{display:grid;grid-auto-flow:column;grid-auto-columns:80%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .promo-grid::-webkit-scrollbar{display:none}
  .pcard{scroll-snap-align:start}
}

/* Hover solo con mouse: en táctil se queda pegado tras tocar */
@media (hover:hover) and (pointer:fine){
  .card:hover::after,.pcard:hover::after{opacity:1}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
}

/* Portada fuera de pantalla: pausa las animaciones infinitas */
html.hero-off .st-track,html.hero-off .st-shadow{animation-play-state:paused}