html{height:100vh;margin:0;overflow:hidden;}body{height:100vh;overflow:auto;scroll-snap-type:y mandatory;scroll-padding:182px;}:root{--page-title-display:none;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:center;scroll-snap-stop:always;}@media(max-width:1024px){.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}@media(max-width:767px){.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}/* Start custom CSS *//* Cada panel ocupa el 100% de la pantalla */
.panel {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Capa del fondo (parallax) */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* un poquito más grande para que tenga espacio al moverse */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;

  /* Aquí está el truco: usamos la variable que controla el movimiento */
  transform: translateY(var(--parallax-offset, 0));
  transition: transform 0.1s linear;
}

/* Paneles con imágenes distintas */
#panel1::before {
  background-image: url("URL-DE-TU-IMAGEN-1");
}

#panel2::before {
  background-image: url("URL-DE-TU-IMAGEN-2");
}

#panel3::before {
  background-image: url("URL-DE-TU-IMAGEN-3");
}

#panel4::before {
  background-image: url("URL-DE-TU-IMAGEN-4");
}

#panel5::before {
  background-image: url("URL-DE-TU-IMAGEN-5");
}/* End custom CSS */