/* =============================================================
   Fondo animado PVM (Pasión · Visión · Misión)
   Reutilizable: aplica .pvm-bg a un div absoluto dentro
   de una sección con .pvm-bg-host.
   Diseño origen: Claude Design (seccion.html)
   ============================================================= */

.pvm-bg-host {
  position: relative;
  isolation: isolate;
}
.pvm-bg-host > :not(.pvm-bg) {
  position: relative;
  z-index: 1;
}

.pvm-bg {
  --pvmbg-terracota: #c9623f;
  --pvmbg-terracota-soft: #e08660;
  --pvmbg-verde: #2f8a7a;
  --pvmbg-azul: #2d6e9a;
  --pvmbg-bg-base: #0e1620;
  --pvmbg-bg-top: #121a22;
  --pvmbg-bg-mid: #0e1620;
  --pvmbg-bg-bottom: #111a23;
  --pvmbg-text: #f4ece0;

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--pvmbg-bg-base);
  pointer-events: none;
}

.pvm-bg::before {
  content: "";
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(201,98,63,.15), transparent 65%),
    radial-gradient(ellipse 80% 65% at 50% 100%, rgba(45,110,154,.15), transparent 65%),
    linear-gradient(180deg, var(--pvmbg-bg-top) 0%, var(--pvmbg-bg-mid) 50%, var(--pvmbg-bg-bottom) 100%);
}

.pvm-bg__blobs {
  position: absolute; inset: -15%; z-index: -2;
  filter: blur(90px) saturate(1.25);
  pointer-events: none;
  mix-blend-mode: screen;
}
.pvm-bg__blob {
  position: absolute; width: 720px; height: 720px; border-radius: 50%;
  will-change: transform; opacity: .9;
}
.pvm-bg__blob--a { background: radial-gradient(circle, var(--pvmbg-terracota) 0%, transparent 70%); top: -15%; left: -8%; animation: pvmbg-drift-a 16s ease-in-out infinite; }
.pvm-bg__blob--b { background: radial-gradient(circle, var(--pvmbg-verde) 0%, transparent 70%); top: 15%; right: -12%; animation: pvmbg-drift-b 19s ease-in-out infinite; }
.pvm-bg__blob--c { background: radial-gradient(circle, var(--pvmbg-azul) 0%, transparent 70%); bottom: -20%; left: 25%; width: 820px; height: 820px; animation: pvmbg-drift-c 22s ease-in-out infinite; }
.pvm-bg__blob--d { background: radial-gradient(circle, var(--pvmbg-terracota-soft) 0%, transparent 70%); top: 55%; left: -5%; width: 420px; height: 420px; opacity: .75; animation: pvmbg-drift-d 14s ease-in-out infinite; }

@keyframes pvmbg-drift-a { 0%,100%{transform:translate(0,0) scale(1);} 25%{transform:translate(120px,60px) scale(1.15);} 50%{transform:translate(80px,160px) scale(.95);} 75%{transform:translate(-60px,120px) scale(1.08);} }
@keyframes pvmbg-drift-b { 0%,100%{transform:translate(0,0) scale(1);} 30%{transform:translate(-140px,90px) scale(1.2);} 60%{transform:translate(-60px,-80px) scale(.92);} 85%{transform:translate(80px,-40px) scale(1.05);} }
@keyframes pvmbg-drift-c { 0%,100%{transform:translate(0,0) scale(1);} 25%{transform:translate(90px,-110px) scale(.9);} 50%{transform:translate(-80px,-60px) scale(1.15);} 75%{transform:translate(-130px,40px) scale(1);} }
@keyframes pvmbg-drift-d { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(200px,-80px) scale(1.25);} 66%{transform:translate(380px,60px) scale(.9);} }

.pvm-bg__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.pvm-bg__spark {
  position: absolute; z-index: -1; width: 3px; height: 3px; border-radius: 50%;
  background: var(--pvmbg-text); opacity: 0; pointer-events: none;
}
.pvm-bg__spark--1 { top: 18%; left: 12%; animation: pvmbg-spark 11s ease-in-out infinite; }
.pvm-bg__spark--2 { top: 72%; left: 78%; animation: pvmbg-spark 14s ease-in-out infinite 3s; }
.pvm-bg__spark--3 { top: 40%; left: 55%; animation: pvmbg-spark 17s ease-in-out infinite 7s; }

@keyframes pvmbg-spark {
  0%,100% { opacity: 0; transform: translateY(0); }
  20%     { opacity: .4; }
  50%     { opacity: .08; transform: translateY(-30px); }
  80%     { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .pvm-bg__blob, .pvm-bg__spark { animation: none !important; }
}