/* =========================================================
   SUSLIMP — Fondos "liquid glass": blobs animados en CSS
   puro + superficies de vidrio esmerilado (backdrop-filter).
   Sin librerías externas, degrada con elegancia si el
   navegador no soporta backdrop-filter.
   ========================================================= */

/* ---------- Fondo único y fijo para todo el sitio ---------- */
.page-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background: var(--color-white);
}
.page-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  will-change: transform;
}

/* Variantes de color */
.blob-yellow { background: radial-gradient(circle at 35% 35%, var(--color-yellow-strong), transparent 72%); }
.blob-yellow-soft { background: radial-gradient(circle at 35% 35%, var(--color-yellow-soft), transparent 72%); }
.blob-dark { background: radial-gradient(circle at 35% 35%, var(--color-black), transparent 72%); opacity: 0.14; }
.blob-white { background: radial-gradient(circle at 35% 35%, #ffffff, transparent 72%); }

/* ---------- Animaciones de deriva (fondo vivo) ---------- */
@keyframes drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(55%, 40%) scale(1.15); }
  50%  { transform: translate(20%, 85%) scale(0.9); }
  75%  { transform: translate(-40%, 30%) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-60%, 35%) scale(1.1); }
  60%  { transform: translate(-30%, -55%) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes drift-c {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(45%, -45%) scale(0.95); }
  70%  { transform: translate(-25%, -20%) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}

.page-bg .blob-1 { animation: drift-a 22s ease-in-out infinite; }
.page-bg .blob-2 { animation: drift-b 26s ease-in-out infinite; }
.page-bg .blob-3 { animation: drift-c 20s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .page-bg .blob { animation: none !important; }
}

/* ---------- Superficies de vidrio esmerilado ---------- */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.glass-dark {
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Header flotante con vidrio esmerilado */
.site-header {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Menú móvil como panel de vidrio */
.main-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
@media (min-width: 900px) {
  .main-nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Cards de vidrio */
.card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.section-alt .card,
.section:not(.section-alt) .card {
  border-color: rgba(26, 26, 26, 0.06);
}

.step {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Toolbar del visor de PDF con vidrio oscuro */
.pdf-toolbar-top {
  background: rgba(26, 26, 26, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.pdf-viewer {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.pdf-toolbar-bottom {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.pdf-viewer.is-fullscreen .pdf-toolbar-bottom {
  background: rgba(255, 255, 255, 0.85);
}
.pdf-thumbs-drawer {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Fallback: si el navegador no soporta backdrop-filter, subir opacidad para mantener legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .main-nav,
  .card,
  .step,
  .pdf-toolbar-top,
  .pdf-viewer,
  .pdf-toolbar-bottom,
  .pdf-thumbs-drawer {
    background: var(--color-white);
  }
  .pdf-toolbar-top { background: var(--color-dark); }
}