/* Estilo base para la capa de texto y enlaces */
.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(175, 195, 56, 0.5); /* Color de fondo #AFC338 con transparencia */
  display: none; /* Inicialmente oculta */
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white; /* Color de texto */
  cursor: pointer; /* Cambiar el cursor al estilo "hand" en hover */
  transform-style: preserve-3d; /* Mantener las transformaciones 3D */
  transform-origin: center center; /* Origen de las transformaciones 3D en el centro */
  backface-visibility: hidden; /* Ocultar el reverso en 3D */
}

/* Estilo para mostrar la capa al pasar el puntero sobre la tarjeta */
.carousel__slider__item:hover .overlay {
  display: flex; /* Hacer visible en hover */
  transform: rotateY(0deg) translate3d(0, 0, 0); /* Restablecer transformaciones en hover */
}

/* Estilo para los iconos de redes sociales */
.social-icon {
  margin-top: 15px;
  margin: 8px;
  width: 30px; /* Tamaño deseado */
  height: auto; /* Mantener la proporción original */
  transition: transform 0.2s, box-shadow 0.2s; /* Agregar transición para un efecto suave */
}

.overlay h4,h6{
  margin-left: 10px;
  margin-right: 10px;
  font-family: 'Dela Gothic One', cursive;
}
.overlay-content{
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 100px;
}


/* Efecto de sombra y escala al pasar el puntero sobre los iconos */
.social-icon:hover {
  transform: scale(1.2); /* Aumenta el tamaño al 110% */
}

/* Efecto de sombra y escala al pasar el puntero sobre los enlaces */
.social-links-row a:hover {
  transform: scale(1.2); /* Aumenta el tamaño al 110% */
}

/* Nuevo estilo para pantallas pequeñas */
@media (max-width: 768px) {
  .carousel__slider__item .overlay {
    display: flex; /* Muestra la capa en pantallas pequeñas sin necesidad de hover */
  }
}

/*======================Diseños generales de todo el slider======================*/
.seccion-equipo{
margin-top: 30px;
margin-bottom: 100px;
}

.carousel__body .carousel__slider__item {
  width: 80%; /* Adjust the percentage as needed */

}

/* For screens smaller than 768px */
@media (max-width: 768px) {
  .carousel__body .carousel__slider__item {
    width: 90%; /* Adjust the percentage as needed for smaller screens */
    font-size: 1em; /* Adjust font size for smaller screens */
  }
}

.image-container {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.carousel {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.carousel__prev, .carousel__next {
  position: absolute;
  bottom: -20%;
  transition: transform 0.25s ease;
}
.carousel__prev i, .carousel__next i {
  font-size: 60px;
  color:#AFC338;
  cursor: pointer;
}
.carousel__prev:hover, .carousel__next:hover {
  transform: scale(1.25);
}
.carousel__prev {
  left: 40%;
}
.carousel__next {
  right: 40%;
}

/* Media query para pantallas de 760px hacia abajo */
@media (max-width: 760px) {
  .carousel__prev,
  .carousel__next {
    bottom: -2%;
    z-index: 300;
  }  
   
}


.carousel__body {
  width: 100%;
  padding: 20px 0 20px 0;
  overflow: hidden;
}
.carousel__body .carousel__slider {
  position: relative;
  transition: transform 1s ease-in-out;
  background: var(--crsl-bg);
}
.carousel__body .carousel__slider__item {
  position: relative;
  display: block;
  float: left;
  box-sizing: border-box;
  margin-left: 20px; 
  margin-right: 20px;
}
.carousel__body .carousel__slider__item .item__3d-frame {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.carousel__body .carousel__slider__item .item__3d-frame:after {
  content: "";
  position: absolute;
  bottom: -15%;
  width: 100%;
  height: 40px;
  background: var(--box-shadow);
  box-shadow: 0px 0px 5px 5px var(--box-shadow);
  transform: rotateX(90deg) translate3d(0px, -20px, 0px);
  opacity: 0.85;
}
.carousel__body .carousel__slider__item .item__3d-frame__box {
  display: flex;
  align-items: center;
  vertical-align: middle;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-color: var(--box-border);
  background: var(--box-bg);
  border-width: 3px;
  border-style: solid;
}
/* Media query para pantallas de 760px hacia abajo */
@media (max-width: 760px) {
  .carousel__body .carousel__slider__item .item__3d-frame__box {
    height: 75%; /* Ajusta la altura a "auto" en pantallas más pequeñas */
  }
  .overlay{
    height: 75%;
  }
}
.carousel__body .carousel__slider__item .item__3d-frame__box h1 {
  font-size: 7em;
  width: 100%;
  color: var(--box-border);
}
.carousel__body .carousel__slider__item .item__3d-frame__box--right, .carousel__body .carousel__slider__item .item__3d-frame__box--left {
  top: 0;
  width: 40px;
  backface-visibility: hidden;
}
.carousel__body .carousel__slider__item .item__3d-frame__box--left {
  left: 0;
  background-image:url('../img/Trama01.png');
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center; 
  border-left-width: 5px;
  transform: translate3d(1px, 0, -40px) rotateY(-90deg);
  transform-origin: 0%;
}
.carousel__body .carousel__slider__item .item__3d-frame__box--right {
  right: 0;
  background-image:url('../img/Trama01.png');
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center; 
  border-right-width: 5px;
  transform: translate3d(-1px, 0, -40px) rotateY(90deg);
  transform-origin: 100%;
}