/* ============================================================
   Fondo de caústicas — Zafira Belleza & Tendencias
   El efecto del estudio "Caustic Pool" (red de luz hecha de ondas)
   como capa fija detrás de todo el contenido.

   Regla de oro: esta hoja NO toca colores, tipografía ni estructura.
   Solo define la capa y los colores con los que el shader dibuja el
   patrón, tomados de la paleta que la página ya tiene:
     - claro  → multiply: rosa de los valles, blanco en las crestas
     - oscuro → filamentos de luz sobre el tinte de la marca
   ============================================================ */

:root {
  /* Catálogo claro (index, stock): papel + fucsia + rosa de apoyo */
  --cau-linea: #C1006B;              /* = --cat-fucsia */
  --cau-luz:   #F8CFE4;              /* rosa claro de apoyo */
  --cau-valle: #F6C6DE;              /* rosa de los valles (multiply) */
  --cau-alpha: .55;                  /* intensidad de las caústicas */
  --cau-op:    .85;                  /* opacidad de la capa completa */
}

/* Revista (fondo oscuro): el lienzo toma el tinte de la marca abierta y
   las caústicas se dibujan con el COLOR de esa misma marca (antes iban en
   verde fijo y por eso el contorno de la revista árabe salía verde). */
html.cau-osc {
  --cau-linea: var(--rv-marca, #ECF7EE);
  --cau-luz:   var(--rv-marca-luz, #6FA98A);
  --cau-alpha: .40;
  --cau-op:    .90;
  background-color: var(--rv-marca-tinte, #141815);
}
/* el color de fondo pasa a <html> para que la capa (z-index -1) se vea.
   Solo cuando el script activó el fondo: con ?cau=off el tema queda intacto. */
html.cau-osc body.rv { background: transparent; }

.cau-fondo {
  position: fixed;
  /* OJO: con `inset: 0` la capa sigue al viewport DINÁMICO del celular, que cambia
     cuando la barra del navegador se oculta al hacer scroll: el lienzo cambia de
     caja y el patrón salta (se ve "un corte"). Con `vh`/`lvh` la caja queda fija al
     viewport grande, así que no se mueve ni se re-escala durante el scroll. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Sin `contain: paint`: en móvil el lienzo fijo se recorta y deja bandas al
     hacer scroll. `transform`/`will-change` lo promueven a capa compuesta para
     que el navegador no lo repinte en cada cuadro de scroll. */
  contain: layout style;
  transform: translateZ(0);
  will-change: transform;
}
.cau-fondo canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--cau-op);
}
/* La capa se pinta semitransparente sobre la malla del catálogo (blend normal):
   es la intensidad aprobada — rosa pálido con las crestas en blanco.
   No lleva mix-blend-mode a propósito: `contain: strict` aísla el grupo y el
   resultado cambiaría según el navegador. */

/* Sin WebGL2: mismo tono, quieto (nunca deja el fondo en blanco) */
.cau-fondo.cau-sin-webgl {
  background:
    radial-gradient(38% 44% at 16% 10%, var(--cau-luz), transparent 68%),
    radial-gradient(46% 50% at 86% 82%, var(--cau-linea), transparent 72%);
  opacity: .18;
}

/* Menos movimiento: el script dibuja un solo cuadro fijo */
@media (prefers-reduced-motion: reduce) {
  .cau-fondo canvas { opacity: calc(var(--cau-op) * .9); }
}

/* En pantallas muy chicas la capa baja un poco para no competir con el texto */
@media (max-width: 560px) {
  :root { --cau-op: .78; }
  html.cau-osc { --cau-op: .85; }
}