body .has-surface-backdrop { position:relative; isolation:isolate; }
/* The explicit surface role takes precedence over each snapshot's old background. */
body .has-surface-backdrop[data-surface-tone="light"] { background:var(--surface-base, #FCFBF8) !important; }
surface-backdrop {
  display:block;position:absolute;inset:0;z-index:-1;
  border-radius:inherit;overflow:hidden;pointer-events:none;
}
surface-backdrop[tone="light"] {
  max-height:900px;
  background:var(--surface-base, #FCFBF8);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 100px),transparent 100%);
}
surface-backdrop > feature-backdrop {
  display:block;position:absolute;inset:0;border-radius:inherit;
  background:
    radial-gradient(ellipse 620px 380px at 120px 280px, rgb(114 220 175 / 45%), transparent),
    radial-gradient(ellipse 640px 390px at calc(100% - 130px) 110px, rgb(151 204 246 / 52%), transparent),
    var(--surface-base, #FCFBF8);
}
surface-backdrop > feature-backdrop canvas { width:100%;height:100%; }
.surface-backdrop__texture {
  position:absolute;inset:0 0 auto;display:block;height:900px;
  background:url('../../recursos/assets/surfaces/mosaic-top.svg') center top / 1600px 900px no-repeat;
  opacity:var(--surface-texture-opacity, .19);
  mask-image:linear-gradient(to bottom,#000 0,#000 260px,transparent 580px);
}
surface-backdrop[tone="dark"] .surface-backdrop__texture {
  top:auto;bottom:calc(-1 * var(--surface-bottom-offset, 0px));
  background-image:url('../../recursos/assets/surfaces/mosaic-bottom.svg');
  background-position:center bottom;
  opacity:var(--surface-texture-opacity, .216);
  mask-image:linear-gradient(to top,#000 0,#000 220px,transparent 520px);
}