/* Efectos del logo de la tienda (6-oct-2026, Estudio de marca). No van horneados en la imagen: la apariencia guarda `logoFx` y `logoFondo`,
   vestir() (tienda/estilos.js) los pone como data-logofx / data-logofondo en <html> (o en la vista previa del estudio) y aquí se pintan.
   Cada efecto es UNA animación CSS de transform u opacidad sobre una capa del tamaño del logo (nada de requestAnimationFrame): en un
   celular cuesta lo mismo que un GIF de 46 px. Con prefers-reduced-motion quedan quietos.
   Color, opacidad y fuerza (6-oct-2026, noche): vestir() → varsLogo() en tienda/estilos.js pone --fx-color (partículas, reflejo, contorno,
   segundo tono de la aurora), --fx-color2/3 (sus otros tonos), --fx-luz (el destello), --fx-op (opacidad), --fx-amp y --fx-vel (fuerza). */
.logo-c{position:relative;display:inline-grid;flex:0 0 auto;border-radius:min(var(--r,999px),50%);isolation:isolate}
html[data-forma=redonda] .logo-c,html:not([data-forma]) .logo-c,.lfx-redondo .logo-c{border-radius:50%}
/* forma del logo, independiente de la de los botones (data-logoforma, tienda/estilos.js → formaLogo) */
[data-logoforma=redondo] .logo-c,[data-logoforma=redondo] .logo-c>img{border-radius:50%!important}
[data-logoforma=redondeado] .logo-c,[data-logoforma=redondeado] .logo-c>img{border-radius:24%!important}
[data-logoforma=cuadrado] .logo-c,[data-logoforma=cuadrado] .logo-c>img{border-radius:3px!important}
[data-logoforma=cuadrado] .logo-c::before,[data-logoforma=redondeado] .logo-c::before{border-radius:inherit}
.logo-c>img{grid-area:1/1}
.logo-c[hidden]{display:none}
.logo-c .lfx{grid-area:1/1;position:relative;pointer-events:none;border-radius:inherit}
.logo-c::before,.logo-c::after,.logo-c .lfx::before,.logo-c .lfx::after{content:none;pointer-events:none}

/* fondo del logo: transparente / color de la marca / blanco (vacío = como venía: el color de las tarjetas con su filete) */
/* El color va en el círculo (.logo-c) y el logo se MEZCLA con él (multiply): así se ve también en los logos que traen su propio fondo
   claro (crema, blanco), que es lo más común; las letras oscuras quedan igual. 6-oct: antes el color iba detrás de un logo opaco y no se veía.
   Un logo de fondo oscuro casi no cambia (multiply no aclara): en el estudio se dice. */
[data-logofondo] .logo-c>img{background:transparent!important;mix-blend-mode:multiply}
[data-logofondo=transparente] .logo-c{background:var(--fondo,transparent)}[data-logofondo=transparente] .logo-c>img{border-color:transparent!important}
[data-logofondo=marca] .logo-c{background:var(--logo-f,var(--c,#C9A84C))}[data-logofondo=marca] .logo-c>img{border-color:transparent!important}
[data-logofondo=blanco] .logo-c{background:#fff}

/* destello: una franja de luz cruza el logo y descansa (6 s) */
[data-logofx=brillo] .logo-c{overflow:hidden}
[data-logofx=brillo] .logo-c::after{content:"";grid-area:1/1;z-index:2;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--fx-luz,#fff) 75%,transparent) 48%,color-mix(in srgb,var(--fx-luz,#fff) 20%,transparent) 56%,transparent 70%);transform:translateX(-120%);animation:lfx-brillo calc(6s / var(--fx-vel,1)) ease-in-out infinite;opacity:var(--fx-op,1)}
@keyframes lfx-brillo{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

/* brillitos: cuatro chispas de cuatro puntas alrededor, se encienden por turnos */
[data-logofx=brillitos] .logo-c::before,[data-logofx=brillitos] .logo-c::after,[data-logofx=brillitos] .logo-c .lfx::before,[data-logofx=brillitos] .logo-c .lfx::after{content:"";position:absolute;z-index:2;width:36%;aspect-ratio:1;background:color-mix(in srgb,var(--fx-color,var(--c,#C9A84C)) 88%,#fff);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);transform:scale(0);opacity:0;animation:lfx-chispa calc(2.8s / var(--fx-vel,1)) ease-in-out infinite;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.28)) drop-shadow(0 0 3px rgba(255,255,255,.9))}
[data-logofx=brillitos] .logo-c::before{top:-8%;right:-6%}
[data-logofx=brillitos] .logo-c::after{bottom:-4%;left:-8%;width:26%;animation-delay:1s}
[data-logofx=brillitos] .logo-c .lfx::before{top:4%;left:-12%;width:22%;animation-delay:1.9s}
[data-logofx=brillitos] .logo-c .lfx::after{bottom:-10%;right:6%;width:24%;animation-delay:.5s}
@keyframes lfx-chispa{0%,100%{transform:scale(0) rotate(0);opacity:0}14%{transform:scale(1) rotate(30deg);opacity:var(--fx-op,1)}30%{transform:scale(.85) rotate(60deg);opacity:calc(.9 * var(--fx-op,1))}44%{transform:scale(0) rotate(90deg);opacity:0}}

/* halo: un resplandor del color de la marca que respira (la capa de atrás cambia de opacidad y tamaño) */
[data-logofx=halo] .logo-c::before{content:"";grid-area:1/1;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--fx-color,var(--c,#C9A84C)) 55%,transparent);transform:scale(1.05);opacity:.25;animation:lfx-halo calc(3.6s / var(--fx-vel,1)) ease-in-out infinite}
@keyframes lfx-halo{0%,100%{transform:scale(1.04);opacity:calc(.22 * var(--fx-op,1))}50%{transform:scale(calc(1 + .32 * var(--fx-amp,1)));opacity:calc(.6 * var(--fx-op,1))}}

/* flotar: sube y baja con una leve inclinación (6-oct, Mauro: "casi no se ve"): 7 px en Normal, en píxeles y no en % para que un logo
   pequeño también se mueva lo suficiente */
[data-logofx=flotar] .logo-c{animation:lfx-flotar calc(3.6s / var(--fx-vel,1)) ease-in-out infinite}
@keyframes lfx-flotar{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(calc(-7px * var(--fx-amp,1))) rotate(calc(-1.6deg * var(--fx-amp,1)))}70%{transform:translateY(calc(-5px * var(--fx-amp,1))) rotate(calc(1.4deg * var(--fx-amp,1)))}}

/* ---------- intensidad (6-oct-2026): Suave · Normal · Fuerte. k = amplitud, v = velocidad, o = opacidad ---------- */
/* los valores van en línea desde varsLogo(); esto queda de respaldo para una muestra que solo trae el atributo */
[data-logofxint=suave]{--fx-amp:.6;--fx-vel:.8}[data-logofxint=normal]{--fx-amp:1;--fx-vel:1}[data-logofxint=fuerte]{--fx-amp:1.6;--fx-vel:1.3}

/* ---------- efectos nuevos (6-oct-2026, Mauro: "demos más"). Uno por animación, solo transform u opacidad sobre capas del tamaño del
   logo; ninguno usa requestAnimationFrame ni filtros animados en áreas grandes. ---------- */

/* luz: reflejo de vidrio. Un brillo fijo arriba a la izquierda (la luz que le cae) y una franja que lo cruza en diagonal cada 5 s; la franja
   lleva el color de los efectos y una sombra fina al lado para que se vea también sobre logos claros (crema, blanco) */
[data-logofx=luz] .logo-c{overflow:hidden}
[data-logofx=luz] .logo-c::before{content:"";grid-area:1/1;z-index:2;border-radius:inherit;background:radial-gradient(ellipse 70% 50% at 28% 12%,rgba(255,255,255,calc(.5 * var(--fx-op,1))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(.14 * var(--fx-op,1))),transparent 45%)}
[data-logofx=luz] .logo-c::after{content:"";grid-area:1/1;z-index:3;width:220%;height:220%;margin:-60% 0 0 -60%;background:linear-gradient(135deg,transparent 36%,rgba(0,0,0,calc(.08 * var(--fx-op,1))) 43%,color-mix(in srgb,var(--fx-color,#E2C46A) 55%,#fff) 47.5%,var(--fx-luz,#fff) 50%,color-mix(in srgb,var(--fx-color,#E2C46A) 55%,#fff) 52.5%,transparent 60%);opacity:calc(.85 * var(--fx-op,1));transform:translate(-55%,-55%);animation:lfx-luz calc(5s / var(--fx-vel,1)) cubic-bezier(.45,0,.25,1) infinite}
@keyframes lfx-luz{0%,55%{transform:translate(-55%,-55%)}85%,100%{transform:translate(35%,35%)}}

/* neón: un contorno del color de los efectos que late */
[data-logofx=neon] .logo-c::before{content:"";grid-area:1/1;z-index:2;border-radius:inherit;box-shadow:0 0 0 calc(2px * var(--fx-amp,1)) var(--fx-color,#E2C46A),0 0 calc(10px * var(--fx-amp,1)) calc(2px * var(--fx-amp,1)) var(--fx-color,#E2C46A),inset 0 0 calc(8px * var(--fx-amp,1)) color-mix(in srgb,var(--fx-color,#E2C46A) 60%,transparent);opacity:.35;animation:lfx-neon calc(2.4s / var(--fx-vel,1)) ease-in-out infinite}
@keyframes lfx-neon{0%,100%{opacity:calc(.3 * var(--fx-op,1))}45%{opacity:var(--fx-op,1)}55%{opacity:calc(.75 * var(--fx-op,1))}}

/* latido: crece y vuelve, suave */
[data-logofx=latido] .logo-c{animation:lfx-latido calc(1.8s / var(--fx-vel,1)) ease-in-out infinite}
@keyframes lfx-latido{0%,40%,100%{transform:scale(1)}15%{transform:scale(calc(1 + .04 * var(--fx-amp,1)))}28%{transform:scale(calc(1 + .015 * var(--fx-amp,1)))}}

/* giro: se inclina en 3D de un lado al otro, como una moneda que muestra el brillo */
[data-logofx=giro] .logo-c{animation:lfx-giro calc(4.5s / var(--fx-vel,1)) ease-in-out infinite}
@keyframes lfx-giro{0%,100%{transform:perspective(420px) rotateY(calc(-10deg * var(--fx-amp,1)))}50%{transform:perspective(420px) rotateY(calc(10deg * var(--fx-amp,1)))}}

/* aurora: detrás del logo, un degradado de dos tonos de la marca que gira lento (se ve en logos transparentes y en el borde) */
[data-logofx=aurora] .logo-c{overflow:hidden}
[data-logofx=aurora] .logo-c::before{content:"";grid-area:1/1;z-index:-1;width:170%;height:170%;margin:-35% 0 0 -35%;background:conic-gradient(from 0deg,var(--fx-color,#E2C46A),var(--fx-color2,#F4EEE2),var(--c,#C9A84C),var(--fx-color2,#F4EEE2),var(--fx-color,#E2C46A));opacity:calc(.85 * var(--fx-op,1));animation:lfx-aurora calc(9s / var(--fx-vel,1)) linear infinite}
[data-logofx=aurora] .logo-c>img{position:relative;z-index:1;transform:scale(.9);border-radius:inherit}
@keyframes lfx-aurora{to{transform:rotate(1turn)}}

/* anillo: aro degradado que gira alrededor, como una historia de Instagram */
[data-logofx=anillo] .logo-c::before{content:"";position:absolute;inset:calc(-3px - 3px * var(--fx-amp,1));z-index:-1;border-radius:50%;background:conic-gradient(var(--fx-color,#E2C46A),var(--fx-color2,#F4EEE2),var(--fx-color3,var(--c,#C9A84C)),var(--fx-color,#E2C46A));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px - 2px * var(--fx-amp,1)),#000 calc(100% - 1px - 2px * var(--fx-amp,1)));mask:radial-gradient(farthest-side,transparent calc(100% - 2px - 2px * var(--fx-amp,1)),#000 calc(100% - 1px - 2px * var(--fx-amp,1)));opacity:var(--fx-op,1);animation:lfx-anillo calc(3.2s / var(--fx-vel,1)) linear infinite}
[data-logoforma=cuadrado][data-logofx=anillo] .logo-c::before,[data-logoforma=redondeado][data-logofx=anillo] .logo-c::before{border-radius:28%}
@keyframes lfx-anillo{to{transform:rotate(1turn)}}

/* polvo: partículas del color de los efectos que caen despacio sobre el logo (dos capas de puntos hechos con box-shadow, sin JS) */
[data-logofx=polvo] .logo-c{overflow:visible}
[data-logofx=polvo] .logo-c .lfx::before,[data-logofx=polvo] .logo-c .lfx::after{content:"";position:absolute;left:0;top:-12%;width:3px;height:3px;border-radius:50%;background:var(--fx-color,#E2C46A);
  box-shadow:12px 4px 0 0 var(--fx-color,#E2C46A),30px -6px 0 -.5px var(--fx-color,#E2C46A),46px 8px 0 .5px var(--fx-color,#E2C46A),58px -2px 0 -.5px var(--fx-luz,#fff),22px 16px 0 -1px var(--fx-luz,#fff),40px 22px 0 0 var(--fx-color,#E2C46A),8px 26px 0 -.5px var(--fx-color,#E2C46A),52px 30px 0 -1px var(--fx-luz,#fff);
  opacity:0;animation:lfx-polvo calc(4.2s / var(--fx-vel,1)) linear infinite}
[data-logofx=polvo] .logo-c .lfx::after{left:42%;animation-delay:calc(-2.1s / var(--fx-vel,1));transform:scale(.8)}
@keyframes lfx-polvo{0%{transform:translateY(0);opacity:0}15%{opacity:calc(.95 * var(--fx-op,1))}80%{opacity:calc(.7 * var(--fx-op,1))}100%{transform:translateY(calc(var(--lt,64px) * .9));opacity:0}}

/* entrada: una sola vez al abrir la tienda aparece con un destello y luego queda quieta */
[data-logofx=entrada] .logo-c{animation:lfx-entrada calc(1.1s / var(--fx-vel,1)) cubic-bezier(.2,.9,.3,1.2) 1 both}
[data-logofx=entrada] .logo-c::after{content:"";grid-area:1/1;z-index:2;border-radius:inherit;background:radial-gradient(circle,color-mix(in srgb,var(--fx-luz,#fff) 95%,transparent),color-mix(in srgb,var(--fx-color,#E2C46A) 70%,transparent) 45%,transparent 70%);opacity:0;animation:lfx-entrada-luz calc(1.1s / var(--fx-vel,1)) ease-out .25s 1 both}
@keyframes lfx-entrada{0%{transform:scale(.55);opacity:0}60%{transform:scale(calc(1 + .06 * var(--fx-amp,1)));opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes lfx-entrada-luz{0%{opacity:0;transform:scale(.4)}35%{opacity:var(--fx-op,1);transform:scale(1.1)}100%{opacity:0;transform:scale(1.5)}}

/* con la pestaña escondida (tienda.js pone data-oculto en <html>) nada se anima */
:root[data-oculto] [data-logofx] .logo-c,:root[data-oculto] [data-logofx] .logo-c::before,:root[data-oculto] [data-logofx] .logo-c::after,:root[data-oculto] [data-logofx] .logo-c .lfx::before,:root[data-oculto] [data-logofx] .logo-c .lfx::after,
:root[data-oculto][data-logofx] .logo-c,:root[data-oculto][data-logofx] .logo-c::before,:root[data-oculto][data-logofx] .logo-c::after,:root[data-oculto][data-logofx] .logo-c .lfx::before,:root[data-oculto][data-logofx] .logo-c .lfx::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  [data-logofx] .logo-c,[data-logofx] .logo-c::before,[data-logofx] .logo-c::after,[data-logofx] .logo-c .lfx::before,[data-logofx] .logo-c .lfx::after{animation:none!important}
  [data-logofx=brillo] .logo-c::after{content:none}
  [data-logofx=brillitos] .logo-c::before,[data-logofx=brillitos] .logo-c .lfx::after{transform:scale(.8) rotate(45deg);opacity:calc(.85 * var(--fx-op,1))}
  [data-logofx=halo] .logo-c::before{transform:scale(1.18);opacity:calc(.4 * var(--fx-op,1))}
  [data-logofx=luz] .logo-c::after,[data-logofx=polvo] .logo-c .lfx::before,[data-logofx=polvo] .logo-c .lfx::after,[data-logofx=entrada] .logo-c::after{content:none}
  [data-logofx=neon] .logo-c::before{opacity:calc(.8 * var(--fx-op,1))}[data-logofx=giro] .logo-c,[data-logofx=latido] .logo-c{transform:none}[data-logofx=entrada] .logo-c{opacity:1;transform:none}
}