/* Difuminados progresivos para las escenas de video por scroll.
   En lugar de una franja con blur parejo (que velaba la camioneta y marcaba un
   borde), el desenfoque y el tono crecen poco a poco hacia abajo. Se dibujan en
   un ::before para que la máscara no afecte al texto. */

/* hero del patio */
#inicio .hero-bottom { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate; }
#inicio .hero-bottom::before {
  content: ""; position: absolute; inset: -60px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(18, 24, 33, 0), rgba(18, 24, 33, .42) 38%, rgba(18, 24, 33, .78));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
          mask-image: linear-gradient(transparent, #000 55%);
}

/* contacto: tono blanco que sube suave, sin velar la camioneta */
#contacto .contact-stage .contact-grid { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate; }
#contacto .contact-stage .contact-grid::before {
  content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .82) 34%, #fff 78%);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
          mask-image: linear-gradient(transparent, #000 45%);
}

/* carretera: el texto de cobertura con el mismo desvanecido progresivo */
.coverage-copy { isolation: isolate; }
@media (max-width: 760px) {
  .coverage-copy { background: none !important; }
  .coverage-copy::before {
    content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(7, 19, 35, 0), rgba(7, 19, 35, .6) 40%, rgba(7, 19, 35, .9));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(transparent, #000 50%);
            mask-image: linear-gradient(transparent, #000 50%);
  }
}

/* teléfono: el tono oscuro sube de forma progresiva para dar contraste a las letras gigantes */
@media (max-width: 760px) {
  #inicio .hero-bottom::before {
    inset: -40vh 0 0;
    background: linear-gradient(rgba(18, 24, 33, 0), rgba(18, 24, 33, .5) 40%, rgba(18, 24, 33, .82) 70%);
    -webkit-mask-image: linear-gradient(transparent, #000 45%);
            mask-image: linear-gradient(transparent, #000 45%);
  }
}