/* --- Estilos GLOBALES para todo el sitio --- */

/*-------------------------------------------El SCROLL-------------------------------------------------------------------------*/


#content-scroll {
    z-index: 1;
    position: relative;
}

.smooth-scroll #content-scroll {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden; /* Este puede ocultar el scroll si no lo maneja tu JS */
}

.scroll-content {
    cursor: default !important;
}

.scale-up .scroll-content {
    cursor: grabbing !important;
}

/* Fondo del scroll */
.scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Parte que se mueve del scroll */
.scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 50px; /* Ajusta según lo necesario, o puede ser dinámico */
    background: rgba(255, 255, 255, 0.5); /* Blanco visible sobre fondo oscuro */
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Hover para mejor experiencia */
.scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

/*------------------------------------------------------------------------------------------------------------------*/

/* --- Estilos solo para la página con ID 3129 (Home) --- */

.clapat-class-id-3129 #hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 55%; /* o 'contain' si prefieres ver toda la imagen */
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.8;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}


/* --- Estilos para la frase "redefiniendo perspectivas--- */
#clapat-page-content.clapat-class-id-3129 .text-align-center span {
  font-size: calc(1rem + 2vw); /* ajusta a gusto */
	font-family: "Montserrat";
  font-style: normal;
  text-transform: lowercase;
  font-weight: 100; /* 150 no es válido, puedes usar 100, 200, 300, etc. */
  letter-spacing: 8px; /* ajusta a gusto */
	 
}
/*------------------------------------------------------------------------------------------------------------------*/




/*-------------------------------------------Página Somos Originantes-------------------------------------------------------------------------*/




#clapat-page-content.clapat-class-id-3101 #hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 45%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.8;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

#clapat-page-content.clapat-class-id-3101 .hero-title {
  position: absolute !important;
  top: 600px;   /* Ajusta el texto para que se ponga a la altura del header/HERO, o puede ser dinámico */
  left: 50%;
  transform: translateX(-50%) scale(1);
  transform-origin: center center;
  font-size: calc(1rem + 1.5vw);
  line-height: calc(1.2rem + 1.5vw);
  text-align: center;
  z-index: 10;
  pointer-events: none;
		
}

#clapat-page-content.clapat-class-id-3101 #hero-caption {
  display: flex;
  justify-content: center !important;
  /*align-items: center !important;*/
	align-items: flex-start; /* alinea el contenido arriba */
  text-align: center;
	height: 900px !important; /* más bajo que los 1200px originales */
  transform: translateY(0%) !important; /* evita que JS lo desplace hacia abajo */
  opacity: 1 !important;
}


/*------------------------------------------------------------------------------------------------------------------*/