/* hoja de estilos sistema */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #7560aa;
  --bs-btn-border-color: #7560aa;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5d4b8a;
  --bs-btn-hover-border-color: #5d4b8a;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5d4b8a;
  --bs-btn-active-border-color: #5d4b8a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #7560aa;
  --bs-btn-disabled-border-color: #7560aa;
}

.bg-eb {
  background-color: #7560aa !important;
}


.bg-eb-secundary {
  background-color: #82888f !important;
}

.bg-eb-secundary-2 {
  background-color: #4f4d4d !important;
}

.bg-eb-title {
  background-color: #5d4b8a !important;
}

.border1 {
  border: solid 1.5px #5252528a;
}
.border-purple {
  border-color: #7560aa !important;
}

/*Socios comerciales*/

/* Estilos para el logotipo */
.logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 40%;
  /* Ajusta el tamaño del logotipo según sea necesario */
  height: auto;
  /* Ajusta el tamaño del logotipo según sea necesario */
}

/* Estilo para el fondo con desvanecimiento */
.background-container {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: calc(100vh / 2);
  /* Divide la altura del viewport entre el número de filas */
}

/* Estilo para la desvanecimiento */
.fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #7560AA;
  opacity: 0.7;
  /* Ajusta la opacidad según sea necesario */
  z-index: 0;
}

/* Estilo para las imágenes de fondo */
.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*Collage*/

.collage-container {
  position: relative;
  width: 100%;
  /* Ajustar el ancho del contenedor del collage */
  height: 400px;
  /* Ajusta la altura según sea necesario */
  overflow: hidden;
  /* Ocultar parte de la imagen que sale del contenedor */
}

.image-1,
.image-2,
.image-3 {
  position: absolute;
}

.image-1 {
  left: -80px;
  /* Ajustar más hacia la derecha */
  top: 30px;
  /* Ajustar para que se mueva más hacia abajo */
  width: 350px;
  /* Ajustar el tamaño para que llegue al borde izquierdo */
  height: 262.5px;
  /* Proporción 4:3 */
  transform: rotate(-11.51deg);
  border-radius: 20px;
  z-index: 1;
}

.image-2 {
  left: 180px;
  /* Ajustar más hacia la derecha */
  top: 180px;
  /* Ajustar posición más hacia abajo */
  width: 270px;
  /* Ajustar tamaño más grande */
  height: 202.5px;
  /* Proporción 4:3 */
  transform: rotate(-4.23deg);
  border-radius: 20px;
  z-index: 2;
}

.image-3 {
  left: 350px;
  /* Ajustar más hacia la derecha */
  top: 30px;
  /* Ajustar para que se mueva más hacia abajo */
  width: 350px;
  /* Ajustar tamaño */
  height: 262.5px;
  /* Proporción 4:3 */
  transform: rotate(11.51deg);
  border-radius: 20px;
  z-index: 1;
}

.texto-derecha {
  max-width: 700px;
  /* Ancho máximo para el cuadro de texto */
  padding: 50px;
  background-color: rgba(79, 77, 77, 0.7);
  /* Fondo negro con transparencia */
  color: white;
  border-radius: 20px;
  margin-left: auto;
  /* Alinea a la derecha */
  margin-right: auto;
  /* Alinea al centro de la columna */
}

.texto-izquierda {
  max-width: 700px;
  /* Ancho máximo para el cuadro de texto */
  padding: 30px;
  background-color: rgba(93, 75, 138, 0.7);
  /* Fondo negro con transparencia */
  color: white;
  border-radius: 20px;
  margin-left: auto;
  /* Alinea a la derecha */
  margin-right: auto;
  /* Alinea al centro de la columna */
}

.fs-title-eb {
  font-size: calc(2.5rem + 1.5vw) !important;
}

.text-shadow {
  text-shadow:
    1px 1px 1px black,
    0 0 1em black,
    0 0 0.2em black;
}

.text-eb {
  color: #5d4b8a;
}

.text-eb-secundary {
  color: #4F4D4D;
  ;
}

/* clase de contenerdor para las vacantes */
.img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* estilos para la animacion de la barra de navegacion */

.uk-button-text {
  /* 1 */
  padding: 0;
  line-height: 1.5;
  background: none;
  /* 2 */
  color: rgba(255, 255, 255, 0.55);
  position: relative;
}

.uk-button-text::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  border-bottom: 1px solid #fff;
  transition: right 0.3s ease-out;
}

a.nav-link:hover,
.dropdown-item:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
}

.marco-foto {
  border: 5px solid white;
  border-bottom: 30px solid white;
}