/* Web ANLOK 2026 · metal.css — el borde de degradado que gira de los botones (27/10/2026, a partir del GradientButton
   que pasó Xuban; antes era un aro cromado, el LiquidMetalButton). El original es React + Tailwind; aquí es CSS puro y
   vale para todos los botones menos los dos de la portada de inicio, que son de perla (perla.css).
   Cada botón lleva su aro con SUS colores: tres tonos (--a1 base, --a2 claro, --a3 oscuro) en un degradado cónico que
   gira; al pasar por encima gira más deprisa y al pulsar sale una onda (metal.js).
   También deja los botones finos: tamaño mínimo de 44 px para el dedo, sin espera de doble toque en el móvil y foco
   visible. Va después de site.css y de las hojas de cada pieza. */

@property --lm-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn-p,.btn-pp{min-height:44px}

.btn:not(.btn-enlace,.btn-perla){position:relative;isolation:isolate}
/* paletas: lila por defecto (los botones principales); va en .btn sola para que cada variante de abajo la pise */
.btn{--grosor:3px;--a1:#6C63FF;--a2:#CFCBFF;--a3:#3B32B8}
.btn-g:not(.btn-perla),.pack-comprar{--grosor:4px}
.btn-p,.btn-pp,.btn-redondo{--grosor:2.5px}
/* botones claros (blanco, secundario, suave) sobre fondo claro: su lila */
.btn-sec,.btn-blanco,.btn-suave{--a1:#8C85FF;--a2:#E4E1FF;--a3:#5B51F0}
/* sobre fondo oscuro o lila, los de contorno blanco: blanco */
.btn-fantasma,
:is(.s-grafito,.s-noche,.tarjeta-noche,.s-lila) .btn-sec,
:is(.s-grafito,.s-noche,.tarjeta-noche,.pie) .btn-suave{--a1:rgba(255,255,255,.5);--a2:#FFFFFF;--a3:rgba(255,255,255,.14)}
.pack-comprar-ambar{--a1:#FAAA2F;--a2:#FFE2A8;--a3:#C77A00}
.pack-comprar-gris{--a1:#C9CBD6;--a2:#FFFFFF;--a3:#7D8092}
.medida__btn{--a1:#CFCBFF;--a2:#FFFFFF;--a3:#8C85FF}
.tk-papel .tk-comprar{--a1:#4A4956;--a2:#B9B8C8;--a3:#0E0E13}
.tk-ticket-anual .tk-comprar{--a1:#6C63FF;--a2:#CFCBFF;--a3:#3B32B8}

/* el aro: el degradado recortado a un anillo del grosor de cada botón, con un brillo que da la vuelta.
   Hay dos: el lento (::before, siempre) y el rápido (.lm-ondas::before), que aparece fundido al pasar por encima.
   Cambiar la duración de una sola animación haría saltar el brillo de golpe; así acelera sin tirones. */
.btn:not(.btn-enlace,.btn-perla)::before,.lm-ondas::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:var(--grosor);
  background:conic-gradient(from var(--lm-a),var(--a3) 0deg,var(--a1) 70deg,var(--a2) 125deg,var(--a1) 175deg,
    var(--a3) 235deg,var(--a1) 300deg,var(--a3) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:lm-giro 5s linear infinite;
}
.lm-ondas::before{z-index:0;opacity:0;animation-duration:1.6s;animation-play-state:paused;transition:opacity .35s ease}
.btn:hover > .lm-ondas::before,.btn:focus-visible > .lm-ondas::before{opacity:1;animation-play-state:running}
.btn:not(.btn-enlace,.btn-perla) > :not(.lm-ondas){position:relative;z-index:2}
@keyframes lm-giro{to{--lm-a:360deg}}

/* la onda al pulsar (metal.js crea .lm-ondas en cada botón: recorta la onda sin tocar el overflow del botón) */
.lm-ondas{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit;pointer-events:none}
.lm-onda{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);animation:lm-onda .6s ease-out forwards}
:is(.btn-sec,.btn-blanco,.btn-suave,.pack-comprar-gris,.medida__btn) .lm-onda{background:radial-gradient(circle,rgba(108,99,255,.32) 0%,rgba(108,99,255,0) 70%)}
@keyframes lm-onda{0%{transform:scale(0);opacity:.7}100%{transform:scale(7);opacity:0}}

/* foco de teclado visible en todos */
.btn:focus-visible{outline:3px solid #FAAA2F;outline-offset:3px}

@media print{.btn::before,.lm-ondas{display:none}}