:root {
  /* Sube este valor (0 a 1) para oscurecer más el vídeo del hero, bájalo para menos */
  --hero-video-darkness: 0.65;
  /* Opacidad de los puntos (0 a 1) */
  --hero-dot-opacity: 0.20;
}

/* =========================================================
   Oscurecer el vídeo del hero (mejora la legibilidad del texto blanco)
   Opción A: filtro directo sobre el <video>. Ajusta brightness (más bajo = más oscuro)
   ========================================================= */
.tmp-banner-area-realstate-one .large-video-playing video {
  /* Descomenta esta línea si quieres oscurecer con filter en vez de con la capa de abajo */
  /* filter: brightness(0.55); */
}

/* =========================================================
   Opción B (alternativa a la A, no uses ambas a la vez si quieres
   controlar el oscurecido por separado del patrón de puntos):
   una capa de color oscuro semitransparente, independiente del vídeo.
   Para usarla, quita el filter de arriba y añade este div, o
   simplemente combínalo con el patrón de puntos de abajo.
   ========================================================= */

/* =========================================================
   Patrón de puntos sobre el vídeo del hero
   ========================================================= */
.dot-pattern-overlay {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* no bloquea clics/hover del hero */
  z-index: 1; /* por encima del video dentro de .large-video-playing */

  /* Capas combinadas: 1) tinte oscuro uniforme  2) rejilla de puntos
     El único número que necesitas tocar normalmente es --hero-video-darkness
     arriba, en :root. */
  background-image:
    linear-gradient(rgba(0, 0, 0, var(--hero-video-darkness)), rgba(0, 0, 0, var(--hero-video-darkness))),
    radial-gradient(rgba(255, 255, 255, var(--hero-dot-opacity)) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 18px 18px;
  background-position: 0 0, 0 0;
}

/* Opcional: puntos más pequeños/juntos en móvil */
@media only screen and (max-width: 767px) {
  .dot-pattern-overlay {
    background-size: 12px 12px;
  }
}


/* ===== Arreglos de desborde horizontal en móviles ===== */

/* 1. Palabras rotativas del hero: más pequeñas en móvil para que quepan en una línea */
@media only screen and (max-width: 767px) {
    .tmp-banner-area-realstate-one .realstate-banner-style-one .title .cd-words-wrapper,
    .tmp-banner-area-realstate-one .realstate-banner-style-one .title .cd-words-wrapper b {
        font-size: clamp(22px, 6.8vw, 44px);
        line-height: 1.25;
    }
    .cd-words-wrapper {
        max-width: 100%;
    }
}

/* 2. Texto gigante sobre el video: se recorta dentro de su sección */
.tmp-video-section-start-one {
    overflow: hidden;
}
.text-split-wrap-video {
    left: 0;
    width: 100%; /* 100vw incluye la barra de scroll y se pasa unos píxeles */
}

/* 3. Red de seguridad: nada dentro de la página puede ensanchar la pantalla.
      "clip" (a diferencia de "hidden") no rompe el header sticky */
.page-wrapper {
    overflow-x: clip;
}