/* Close Connect Landing System · background.css
   Capa de fondo fija (imagen) con disolución configurable y velo de color.
   Variables inyectadas por js/lib/theme.js:
   --cc-bg-image, --cc-bg-position, --cc-bg-size, --cc-bg-repeat, --cc-bg-overlay */
.cc-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Imagen de fondo */
.cc-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cc-bg-image, none);
  background-position: var(--cc-bg-position, center);
  background-size: var(--cc-bg-size, cover);
  background-repeat: var(--cc-bg-repeat, no-repeat);
}

/* Velo de color (suaviza la imagen sin afectar a los botones, que quedan por encima) */
.cc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cc-bg-overlay, transparent);
}

/* Disolución de la imagen hacia el color de fondo.
   edges  = visible en los bordes, limpia en el centro (donde están logo y botones)
   top    = visible arriba, se disuelve hacia abajo
   none   = sin máscara */
.cc-bg[data-fade="edges"]::before {
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 52%, transparent 18%, rgba(0, 0, 0, 0.55) 62%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 52% at 50% 52%, transparent 18%, rgba(0, 0, 0, 0.55) 62%, #000 100%);
}
.cc-bg[data-fade="top"]::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 78%);
}