/* ============================================================
   LIQUATUR LABS — hoja de estilos de marca para páginas estáticas
   Única fuente de verdad de la estética. La usan /ficha-ahora/ y
   cualquier página nueva creada a partir de plantilla-pagina.html.

   Los mismos tokens viven en src/index.css para la parte React:
   si cambias un color de marca, cámbialo en los dos sitios.
   ============================================================ */

:root {
  --liqua-red:    #FF003C;
  --liqua-orange: #FF8A00;
  --liqua-yellow: #FFD600;
}

[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { background-color: #050505; color: #ffffff; }

/* Texto con el degradado de marca (rojo → naranja → amarillo) */
.brand-text {
  background: linear-gradient(to right, var(--liqua-red), var(--liqua-orange), var(--liqua-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fondo ambiental (brasas + malla) — el canvas lo crea liquatur.js */
#ambient-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Reveal al hacer scroll — mismo easing expo-out que Reveal.tsx (React) */
.lq-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.lq-reveal.lq-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lq-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}