@media (max-width: 991px) {
  #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a {
      color: #fff !important;
  }
  #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active {
      color: #000 !important;
  }  
}

@media (min-width: 768px) {
  .custom-ms-md-6 {
    /* Usa 4rem o el valor exacto que querías para "6" */
    /* Usamos margin-inline-start para compatibilidad LTR/RTL */
    margin-inline-start: 4rem !important;
    /* Probablemente necesites !important para asegurar que
       sobrescribe la regla de ms-0 en pantallas medianas/grandes */
  }
}

@media (max-width: 575px) {
  /* Tus estilos CSS que SOLO quieres aplicar en pantallas extra pequeñas van aquí */
  /* Por ejemplo: */
  .custom-pos-3 {
      margin-top: -20px;
  }
  .custom-pos-4 {
      margin-top: 0!important;
      margin-bottom: -100px!important;
  }
  .bg-svg-esquina-inf-izq {
    background-image: url('/img/fondo-nh.svg')!important; /* <-- ¡IMPORTANTE: Cambia esta ruta! */
    background-repeat: no-repeat;                      /* Evita que se repita */
    background-position: left bottom;                  /* Alinea a la izquierda e inferior */
    background-size: auto;                           /* Usa el tamaño original del SVG. Puedes ajustarlo si es necesario (ej: '150px', 'contain', '30% auto', etc.) */

    /* Opcional: Si el SVG debe estar pegado al borde ignorando el padding interno */
    /* background-origin: border-box; */
  } 
  .hero-background-section {
    background-size: 100% auto; /* Ancho 100%, altura automática */
    background-position: center top; /* A menudo 'center top' o 'center center' se ve mejor en móvil con esta configuración */
    min-height: 35vh!important; /* AJUSTA ESTA ALTURA para móvil.
                         Podrías necesitar experimentar para que se vea bien
                         con la altura proporcional de tu imagen al 100% de ancho.
                         O prueba 'auto' si no hay otro contenido que le dé altura,
                         aunque para un hero es común querer una altura mínima. */
    /* Ejemplo: Si tu imagen es muy panorámica, 50vh podría ser demasiado.
                Si es más cuadrada, 50vh podría estar bien. */
  }
  .hero-background-section-home {
    background-size: 100% auto; /* Ancho 100%, altura automática */
    background-position: center top; /* A menudo 'center top' o 'center center' se ve mejor en móvil con esta configuración */
    min-height: 35vh!important; /* AJUSTA ESTA ALTURA para móvil.
                         Podrías necesitar experimentar para que se vea bien
                         con la altura proporcional de tu imagen al 100% de ancho.
                         O prueba 'auto' si no hay otro contenido que le dé altura,
                         aunque para un hero es común querer una altura mínima. */
    /* Ejemplo: Si tu imagen es muy panorámica, 50vh podría ser demasiado.
                Si es más cuadrada, 50vh podría estar bien. */
  }
  .hero-background-section-rac {
    background-size: 100% auto; /* Ancho 100%, altura automática */
    background-position: center top; /* A menudo 'center top' o 'center center' se ve mejor en móvil con esta configuración */
    min-height: 35vh!important; /* AJUSTA ESTA ALTURA para móvil.
                         Podrías necesitar experimentar para que se vea bien
                         con la altura proporcional de tu imagen al 100% de ancho.
                         O prueba 'auto' si no hay otro contenido que le dé altura,
                         aunque para un hero es común querer una altura mínima. */
    /* Ejemplo: Si tu imagen es muy panorámica, 50vh podría ser demasiado.
                Si es más cuadrada, 50vh podría estar bien. */
  }
  .hero-background-section-pfq {
    background-size: 100% auto; /* Ancho 100%, altura automática */
    background-position: center top; /* A menudo 'center top' o 'center center' se ve mejor en móvil con esta configuración */
    min-height: 35vh!important; /* AJUSTA ESTA ALTURA para móvil.
                         Podrías necesitar experimentar para que se vea bien
                         con la altura proporcional de tu imagen al 100% de ancho.
                         O prueba 'auto' si no hay otro contenido que le dé altura,
                         aunque para un hero es común querer una altura mínima. */
    /* Ejemplo: Si tu imagen es muy panorámica, 50vh podría ser demasiado.
                Si es más cuadrada, 50vh podría estar bien. */
  }
  .hero-background-section-elecm {
    background-size: 100% auto; /* Ancho 100%, altura automática */
    background-position: center top; /* A menudo 'center top' o 'center center' se ve mejor en móvil con esta configuración */
    min-height: 35vh!important; /* AJUSTA ESTA ALTURA para móvil.
                         Podrías necesitar experimentar para que se vea bien
                         con la altura proporcional de tu imagen al 100% de ancho.
                         O prueba 'auto' si no hay otro contenido que le dé altura,
                         aunque para un hero es común querer una altura mínima. */
    /* Ejemplo: Si tu imagen es muy panorámica, 50vh podría ser demasiado.
                Si es más cuadrada, 50vh podría estar bien. */
  }
  .hero-background-section-proy {
    background-size: 100% auto; /* Ancho 100%, altura automática */
    background-position: center top; /* A menudo 'center top' o 'center center' se ve mejor en móvil con esta configuración */
    min-height: 35vh!important; /* AJUSTA ESTA ALTURA para móvil.
                         Podrías necesitar experimentar para que se vea bien
                         con la altura proporcional de tu imagen al 100% de ancho.
                         O prueba 'auto' si no hay otro contenido que le dé altura,
                         aunque para un hero es común querer una altura mínima. */
    /* Ejemplo: Si tu imagen es muy panorámica, 50vh podría ser demasiado.
                Si es más cuadrada, 50vh podría estar bien. */
  }     
  .custom-border-bottom-2 {
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
.custom-border-bottom-3 {
    border-bottom: 3px solid rgba(255, 255, 255, 0.1)!important;
    width: 100%!important;
  }
}

.text-resp-225 {
    line-height: 1;
    font-size: clamp(112.5px, 37.5px + 0.15625 * 100vw, 225px);
}

  .custom-pos-4 {
      margin-top: -280px;
  }


.text-gradient-silver {
  /* 1. Aplica tu degradado como fondo */
  background-image: linear-gradient(180deg, #E6E6E6 0%, #C9C9C9 100%);

  /* 2. Recorta el fondo a la forma del texto */
  -webkit-background-clip: text; /* Para navegadores WebKit */
  background-clip: text;

  /* 3. Haz el color del texto transparente para que se vea el fondo */
  color: transparent;
  opacity: 0.4; /* <-- Añade esta línea */

  /* Opcional: A veces ayuda asegurar que el elemento se comporte bien */
  /* display: inline-block; */ /* Descomenta si tienes problemas, aunque h2 es bloque */
}

.custom-mask-img-2 {
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 80%;
            mask-size: 80%;
    -webkit-mask-position: center;
            mask-position: center;
}

.custom-mask-img-5 {
    -webkit-mask-image: url(/img/mascara-imagen-5.png);
    mask-image: url(/img/mascara-imagen-5.png);
}

.custom-mask-img-7 {
    -webkit-mask-image: url(/img/mascara-imagen-7.png);
    mask-image: url(/img/mascara-imagen-7.png);
}

.custom-cascading-images-wrapper-2 {
    padding: 50% 0% 0 0%;
}

.hero-background-section-home {
    background-size: cover;           /* Hace que la imagen cubra todo el área */
    background-position: center right; /* Centra la imagen */
    background-repeat: no-repeat;     /* Evita que la imagen se repita */
    width: 100%;                      /* Asegura que ocupe todo el ancho */
    margin-top: 150px;
    min-height: 75vh;
    background-image: -webkit-image-set(
      url("/img/hero-image-equipo-prosuma_q100.webp") type("image/webp"),
      url("/img/hero-image-equipo-prosuma.png") type("image/png")
    );
    background-image: image-set(
      url("/img/hero-image-equipo-prosuma_q100.webp") type("image/webp"),
      url("/img/hero-image-equipo-prosuma.png") type("image/png")
    );
}

.hero-background-section {
    background-size: cover;           /* Hace que la imagen cubra todo el área */
    background-position: center right; /* Centra la imagen */
    background-repeat: no-repeat;     /* Evita que la imagen se repita */
    width: 100%;                      /* Asegura que ocupe todo el ancho */
    margin-top: 150px;
    min-height: 75vh;
}


/* Gradient */
.custom-bg-gradient-2 {
    background-image: linear-gradient(90deg, #008AD4 0%, #1C278B 100%) !important;
}

#intro {
    position: relative;
    z-index: 1; /* O un número mayor si .custom-pos-4 tiene z-index */
}

.thumb-info.thumb-info-bottom-info-purple .thumb-info-title {
  background: #360039;
  color: #fff;
}

.bg-svg-esquina-inf-izq {
  background-image: url('/img/fondo-curva-nh.svg'); /* <-- ¡IMPORTANTE: Cambia esta ruta! */
  background-repeat: no-repeat;                      /* Evita que se repita */
  background-position: left bottom;                  /* Alinea a la izquierda e inferior */
  background-size: auto;                           /* Usa el tamaño original del SVG. Puedes ajustarlo si es necesario (ej: '150px', 'contain', '30% auto', etc.) */

  /* Opcional: Si el SVG debe estar pegado al borde ignorando el padding interno */
  /* background-origin: border-box; */
}

.bg-menu {
  background-size: cover;           /* Hace que la imagen cubra todo el área */  
  background-image: url('/img/fondo-menu.png'); /* <-- ¡IMPORTANTE: Cambia esta ruta! */
  background-repeat: no-repeat;                      /* Evita que se repita */
  background-position: center top;                  /* Alinea a la izquierda e inferior */
  /*  background-size: auto;*/
  /* Opcional: Si el SVG debe estar pegado al borde ignorando el padding interno */
  /* background-origin: border-box; */
}

.bg-servicios {
  background-size: cover;           /* Hace que la imagen cubra todo el área */  
  background-image: url('/img/fondo-servicios.png'); /* <-- ¡IMPORTANTE: Cambia esta ruta! */
  background-repeat: no-repeat;                      /* Evita que se repita */
  background-position: center top;                  /* Alinea a la izquierda e inferior */
  /*  background-size: auto;*/
  /* Opcional: Si el SVG debe estar pegado al borde ignorando el padding interno */
  /* background-origin: border-box; */
}

html.side-header-overlay-full-screen #header .header-row-side-header {
  flex: 0 0 80%!important;
}

.sticky-wrapper.sticky-wrapper-effect-1.sticky-wrapper-effect-1-gradient.sticky-effect-active .sticky-body {
  background-image: linear-gradient(90deg, #008AD4 0%, #1C278B 100%) !important;
}

.btn-gradient-custom {
  background-image: linear-gradient(180deg, #00DCFF 0%, #0046FE 100%) !important; /* Usamos !important para asegurar que sobreescriba el fondo de .btn-dark si no lo quitas */
  background-size: 100% 100%; /* Asegura que el gradiente cubra bien */
  color: #ffffff !important; /* Texto blanco para buen contraste, !important por si .btn-dark lo interfiere */
  border: none; /* Opcional: si quieres quitar cualquier borde que .btn o .btn-dark puedan añadir */
  transition: filter 0.3s ease-out, background-image 0.3s ease-out; /* Para un hover suave */
  /* Mantenemos las propiedades de .btn y .btn-dark para padding, forma, etc., o las definimos aquí si quitamos .btn-dark */
}

.btn-gradient-custom:hover,
.btn-gradient-custom:focus { /* :focus es bueno para accesibilidad */
  color: #ffffff !important; /* Mantenemos texto blanco */

  /* Opción 1: Oscurecer ligeramente el degradado (ajusta los colores) */
  background-image: linear-gradient(180deg, #00c5e6 0%, #0038d7 100%) !important; /* Colores ligeramente más oscuros */

  /* Opción 2: Usar un filtro para oscurecer/aclarar (más simple) */
  /* filter: brightness(90%); */ /* Para oscurecer un 10% */
  /* filter: brightness(110%); */ /* Para aclarar un 10% */

  /* Opción 3: Cambiar la opacidad */
  /* opacity: 0.85; */

  /* Opción 4: Si quieres que el fondo de .btn-swap-1 tome precedencia en hover y solo cambie el icono, */
  /* entonces no necesitas definir background-image aquí en el hover. */
}


.text-fill-viewport-mobile {
  /* El valor XXvw es el que tendrás que ajustar. Empieza con algo y ve probando. */
  /* Para "PROSUMA" (7 letras), un valor entre 18vw y 25vw podría ser un buen inicio. */
  font-size: 19vw; /* <--- ¡ESTE VALOR ES CLAVE Y NECESITA AJUSTE! */
  line-height: 1;  /* Para que no ocupe demasiado alto */
  text-align: center; /* Para centrar el bloque de texto si no llena exactamente */
  white-space: nowrap; /* Evita que la palabra "PROSUMA" se parta si el cálculo la hace muy ancha */
  margin: 0; /* Quita márgenes por si acaso */
  padding: 0; /* Quita paddings por si acaso */
}

.text-fill-viewport-mobile-2 {
  /* El valor XXvw es el que tendrás que ajustar. Empieza con algo y ve probando. */
  /* Para "PROSUMA" (7 letras), un valor entre 18vw y 25vw podría ser un buen inicio. */
  font-size: 17vw; /* <--- ¡ESTE VALOR ES CLAVE Y NECESITA AJUSTE! */
  line-height: 1;  /* Para que no ocupe demasiado alto */
  text-align: center; /* Para centrar el bloque de texto si no llena exactamente */
  white-space: nowrap; /* Evita que la palabra "PROSUMA" se parta si el cálculo la hace muy ancha */
  margin: 0; /* Quita márgenes por si acaso */
  padding: 0; /* Quita paddings por si acaso */
}


@keyframes shake-effect {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-2px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(2px);
  }
}

/* Clase para aplicar la animación */
.svg-shake {
  /* Cambiamos 'infinite' por un número, por ejemplo '4' */
  animation: shake-effect 0.2s linear 1; /* Nombre, duración, tipo, NÚMERO DE REPETICIONES */
}

.bg-divisiones-galeria {
  background-size: cover;           /* Hace que la imagen cubra todo el área */  
  background-image: url('/img/grandiente-blur-fondo-menu.png'); /* <-- ¡IMPORTANTE: Cambia esta ruta! */
  background-repeat: no-repeat;                      /* Evita que se repita */
  background-position: right top;                  /* Alinea a la izquierda e inferior */
  /*  background-size: auto;*/
  /* Opcional: Si el SVG debe estar pegado al borde ignorando el padding interno */
  /* background-origin: border-box; */
}

.custom-border-bottom-3 {
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    width: 50%;
    margin: auto;
    text-align: center;
    padding-bottom: 10px;
}

.bg-ingenieria-y-proyectos {
  background-image: -webkit-image-set(
    url("/img/fondo-sliders_q100.webp") type("image/webp"),
    url("/img/fondo-sliders.png") type("image/png")
  );
  background-image: image-set(
    url("/img/fondo-sliders_q100.webp") type("image/webp"),
    url("/img/fondo-sliders.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
}

.hero-background-section-rac {
    background-size: cover;           /* Hace que la imagen cubra todo el área */
    background-position: center right; /* Centra la imagen */
    background-repeat: no-repeat;     /* Evita que la imagen se repita */
    width: 100%;                      /* Asegura que ocupe todo el ancho */
    margin-top: 150px;
    min-height: 75vh;
    background-image: -webkit-image-set(
      url("/img/hero-rac_q100.webp") type("image/webp"),
      url("/img/hero-rac.png") type("image/png")
    );
    background-image: image-set(
      url("/img/hero-rac_q100.webp") type("image/webp"),
      url("/img/hero-rac.png") type("image/png")
    );
}

.hero-background-section-pfq {
    background-size: cover;           /* Hace que la imagen cubra todo el área */
    background-position: center right; /* Centra la imagen */
    background-repeat: no-repeat;     /* Evita que la imagen se repita */
    width: 100%;                      /* Asegura que ocupe todo el ancho */
    margin-top: 150px;
    min-height: 75vh;
    background-image: -webkit-image-set(
      url("/img/presuarizacion_11_q80.webp") type("image/webp"),
      url("/img/presuarizacion_11.png") type("image/png")
    );
    background-image: image-set(
      url("/img/presuarizacion_11_q80.webp") type("image/webp"),
      url("/img/presuarizacion_11.png") type("image/png")
    );
}

.hero-background-section-elecm {
    background-size: cover;           /* Hace que la imagen cubra todo el área */
    background-position: center right; /* Centra la imagen */
    background-repeat: no-repeat;     /* Evita que la imagen se repita */
    width: 100%;                      /* Asegura que ocupe todo el ancho */
    margin-top: 150px;
    min-height: 75vh;
    background-image: -webkit-image-set(
      url("/img/electromecanica_18_q80.webp") type("image/webp"),
      url("/img/electromecanica_18.png") type("image/png")
    );
    background-image: image-set(
      url("/img/electromecanica_18_q80.webp") type("image/webp"),
      url("/img/electromecanica_18.png") type("image/png")
    );
}

.hero-background-section-proy {
    background-size: cover;           /* Hace que la imagen cubra todo el área */
    background-position: center right; /* Centra la imagen */
    background-repeat: no-repeat;     /* Evita que la imagen se repita */
    width: 100%;                      /* Asegura que ocupe todo el ancho */
    margin-top: 150px;
    min-height: 75vh;
    background-image: -webkit-image-set(
      url("/img/proyectos-hero_q100.webp") type("image/webp"),
      url("/img/proyectos-hero.png") type("image/png")
    );
    background-image: image-set(
      url("/img/proyectos-hero_q100.webp") type("image/webp"),
      url("/img/proyectos-hero.png") type("image/png")
    );
}