/* ==========================================================================
   MAGIVERCOL · EFECTOS DE PROFUNDIDAD — v1 (29 sep 2026)
   Miguel: "sigo sintiendo que se ve muy plana". Eligió de la vista previa
   los efectos 2, 3, 4, 5 y 6 (descartó el 1, aura). Enfoque móvil (390 px).
   Va con magivercol-efectos-v1.js (números que cuentan + inclinación 3D).
   Nada de texto con degradado. Solo refina lo que ya existe.
   ========================================================================== */

/* --- 2 · Cuadrícula gamer tenue con un destello que la recorre ----------
   Solo en las secciones que ya tienen fondo blanco pleno. --------------- */
body.template-home .mg-sec{position:relative;overflow:hidden}
body.template-home .mg-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(125,134,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,134,255,.07) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 100%);
}
body.template-home .mg-sec::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:60%;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent 0%,rgba(163,102,255,.09) 50%,transparent 100%);
  animation:mgLuz 6s linear infinite;
}
body.template-home .mg-sec>.mg-wrap{position:relative;z-index:1}
@keyframes mgLuz{to{left:110%}}

/* --- 3 · Tarjetas: entran en escalera y se les dibuja un borde iridiscente */
.mg-plat-card,.mg-step,.mg-acc__item{position:relative}
.mg-plat-card.mg-reveal,.mg-step.mg-reveal{
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),
             border-color .45s ease,box-shadow .45s ease;
}
.mg-plat-card.mg-reveal:nth-child(2),.mg-step.mg-reveal:nth-child(2){transition-delay:.12s}
.mg-plat-card.mg-reveal:nth-child(3),.mg-step.mg-reveal:nth-child(3){transition-delay:.24s}
.mg-plat-card::after,.mg-step::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#2f6bff,#7d86ff,#a366ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .9s ease .35s;
}
.mg-plat-card.is-in::after,.mg-step.is-in::after{opacity:.85}
.mg-plat-card.mg-reveal:nth-child(2)::after,.mg-step.mg-reveal:nth-child(2)::after{transition-delay:.47s}
.mg-plat-card.mg-reveal:nth-child(3)::after,.mg-step.mg-reveal:nth-child(3)::after{transition-delay:.59s}
.mg-step.is-in,.mg-plat-card.is-in{box-shadow:0 1px 2px rgba(17,17,19,.05),0 22px 44px -30px rgba(46,86,184,.35)}

/* --- 4 · Números de confianza que cuentan (el JS anima el texto) -------- */
.mg-trust b{font-variant-numeric:tabular-nums;display:inline-block;min-width:3ch}

/* --- 5 · Tarjetas de juego: inclinación 3D al tocar/pasar el mouse ------ */
.mg-grid,.js-product-table,[data-store="home-products-featured"] .mg-wrap{perspective:900px}
.mg-card{transform-style:preserve-3d;will-change:transform}
.mg-card.mg-3d{transition:transform .12s ease-out,box-shadow .25s ease!important}
.mg-card.mg-3d-fin{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease!important}
.mg-card .mg-brillo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.55),transparent 55%);
  opacity:0;transition:opacity .25s}
.mg-card.mg-3d .mg-brillo{opacity:1}

/* --- 6 · Separadores con energía entre secciones del inicio ------------- */
body.template-home .mg-sec+.mg-sec>.mg-wrap::before{
  content:"";display:block;height:2px;border-radius:99px;margin:0 auto 34px;max-width:280px;
  background:linear-gradient(90deg,transparent,#2f6bff,#7d86ff,#a366ff,transparent);
  background-size:200% 100%;animation:mgEnergia 3.2s linear infinite;
}
@keyframes mgEnergia{from{background-position:200% 0}to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  body.template-home .mg-sec::after{animation:none;display:none}
  body.template-home .mg-sec+.mg-sec>.mg-wrap::before{animation:none}
  .mg-card.mg-3d{transform:none!important}
}