/* locodea. — «Marca sobre datos» (va con marca-sobre-datos.js) */

/* Contenedor: alto calculado por el script para llegar al borde inferior de la ventana (sin scroll) */
.mds{position:relative;width:100%;height:var(--mds-h,420px);z-index:1}

/* Lienzo a sangre (todo el ancho de la ventana) que sube por detrás de los botones;
   la máscara deja transparente esa franja de arriba y funde los bordes y el pie. */
.mds-cv{position:absolute;display:block;pointer-events:none;
  top:calc(-1 * var(--mds-sube,40px));height:calc(100% + var(--mds-sube,40px));
  left:calc(50% - var(--vw,100vw) / 2);width:var(--vw,100vw);
  -webkit-mask-image:radial-gradient(70% 85% at 50% 72%,#000 50%,transparent 100%),linear-gradient(transparent 0,transparent 16%,#000 42%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(70% 85% at 50% 72%,#000 50%,transparent 100%),linear-gradient(transparent 0,transparent 16%,#000 42%,#000 84%,transparent);
  mask-composite:intersect}