/* Animaciones «Liquid Glass + Materializar» (Nati, 31/10/2026): todo cuelga de html.fx, que pone fx.js solo con la prueba prendida
   y sin «reducir movimiento». Apagadas, este archivo no cambia nada. Mismo archivo en la app y en la web (assets/fx.css). */
html.fx .fx-pos{position:relative}
/* las capas de luz son <span>: que no hereden nada de los estilos de cada página para «.tarjeta span» (en la portada, la etiqueta
   de cada etapa tiene vidrio esmerilado y desenfocaba la foto entera: Nati, 31/10). Las reglas de cada capa van después y mandan. */
html.fx .card-aura,html.fx .card-filo,html.fx .card-luz{margin:0;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  filter:none;transform:none;font-size:0;line-height:0;letter-spacing:0;text-transform:none;color:inherit;width:auto;height:auto}
/* colores de la luz: en fondos claros (casi toda la marca) un toque malva para que se vea; en lo oscuro, blanco */
html.fx{--fx-luz:rgba(169,158,192,.16);--fx-borde:rgba(169,158,192,.75)}
html.fx .osc,html.fx .hero-glass{--fx-luz:rgba(255,255,255,.14);--fx-borde:rgba(255,255,255,.6)}

/* 2 · luz que sigue al mouse o al dedo (fondo + borde) */
html.fx .card-luz{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),var(--fx-luz,rgba(255,255,255,.14)),transparent 65%)}
html.fx .card-luz::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),var(--fx-borde,rgba(255,255,255,.7)),transparent 70%);
  -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)}
@media (hover:hover){
  html.fx .fx-pos:hover>.card-luz,html.fx :hover>.card-luz{opacity:1}
}
html.fx .fx-toca>.card-luz{opacity:1}

/* micro-elevación al pasar el mouse y presión al tocar (translate y scale sueltos: no pisan los transform de cada tarjeta) */
html.fx .fx-card{transition:translate .28s cubic-bezier(.2,.8,.2,1),scale .18s ease,box-shadow .28s ease}
@media (hover:hover) and (pointer:fine){ html.fx .fx-card:hover{translate:0 -2px} }
html.fx .fx-card.fx-toca{scale:.985}

/* 4 · destello en la punta de la barra cuando termina de crecer */
html.fx .fx-chispa{position:relative}
html.fx .fx-chispa::after{content:"";position:absolute;right:-3px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle,#fff 0,rgba(255,255,255,.7) 35%,transparent 70%);animation:fx-chispa .65s ease-out forwards;pointer-events:none}
@keyframes fx-chispa{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}

/* 4 · mientras cargan los datos: barras que respiran con un barrido de luz (en vez de la ruedita) */
@keyframes fx-barrido{0%{background-position:120% 0}100%{background-position:-20% 0}}
@keyframes fx-respira{0%,100%{opacity:.55}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html.fx .card-luz{display:none}
  html.fx .fx-card{transition:none;translate:none!important;scale:none!important}
}

/* app: mientras carga, en vez de la ruedita, tres barras de esqueleto que respiran con un barrido de luz */
html.fx .spin{width:auto;height:auto;border:0;border-radius:0;animation:none;margin:22px 0;display:grid;gap:12px}
html.fx .spin::before,html.fx .spin::after{content:"";display:block;height:86px;border-radius:20px;
  background:linear-gradient(100deg,rgba(255,255,255,.35) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.35) 70%) 0 0/250% 100%,var(--line,#E7E3EC);
  animation:fx-barrido 1.4s ease-in-out infinite,fx-respira 1.8s ease-in-out infinite}
html.fx .spin::after{height:58px;width:72%;animation-delay:.15s,.3s}

/* 6 · vida (Nati, 31/10: «sutil, sofisticado, que no sea todo tan estático») */
/* aura: una luz suave que se mueve muy despacio adentro del vidrio (cada tarjeta en otro momento del recorrido) */
html.fx .card-aura{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
html.fx .card-aura::before{content:"";position:absolute;width:75%;aspect-ratio:1;left:-20%;top:-35%;border-radius:50%;
  background:radial-gradient(circle,var(--fx-aura,rgba(255,255,255,.2)),transparent 66%);
  animation:fx-aura 18s ease-in-out infinite alternate;animation-delay:calc(var(--fx-i,0) * -3.6s)}
@keyframes fx-aura{0%{translate:0 0}30%{translate:75% 35%}60%{translate:25% 85%}100%{translate:95% 15%}}
/* filo: un brillo recorre el borde una vez y descansa; cada tarjeta a su tiempo */
@property --fx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
html.fx .card-filo{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:0;
  background:conic-gradient(from var(--fx-ang),transparent 0 68%,var(--fx-filo,rgba(255,255,255,.9)) 80%,transparent 90%);
  -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:fx-filo 10s linear infinite;animation-delay:calc(1.2s + var(--fx-i,0) * 1.4s)}
@keyframes fx-filo{0%{--fx-ang:0deg;opacity:0}6%{opacity:1}36%{opacity:1}44%{--fx-ang:360deg;opacity:0}100%{--fx-ang:360deg;opacity:0}}
/* tilt: en la compu, la tarjeta se inclina apenas hacia el mouse y vuelve suave */
@media (hover:hover) and (pointer:fine){
  html.fx .fx-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1),translate .28s cubic-bezier(.2,.8,.2,1),scale .18s ease,box-shadow .28s ease}
  html.fx .fx-tilt:not(:hover){--rx:0deg;--ry:0deg}
}
/* paralaje: la foto queda un poco más grande para moverse sin dejar bordes */
html.fx .fx-px{scale:1.05;transition:translate .12s linear}
/* en fondos claros el aura y el filo van en malva; sobre fotos o fondos oscuros, en blanco */
html.fx{--fx-aura:rgba(169,158,192,.16);--fx-filo:rgba(150,136,180,.85)}
html.fx .vidrio li,html.fx .osc,html.fx .hero-glass{--fx-aura:rgba(255,255,255,.2);--fx-filo:rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){ html.fx .card-aura,html.fx .card-filo{display:none} html.fx .fx-tilt{transform:none} html.fx .fx-px{scale:1;translate:none} }
/* zoom lentísimo en las fotos grandes (portada): casi no se nota, pero la foto respira */
html.fx .fx-kb{animation:fx-kb 24s ease-in-out infinite alternate;transform-origin:50% 35%}
@keyframes fx-kb{0%{scale:1}100%{scale:1.05}}
@media (prefers-reduced-motion:reduce){ html.fx .fx-kb{animation:none} }