.embla {
  /* max-width: 40rem; */
  margin: auto;
  --slide-height: 450px;
  --slide-spacing: 1rem;
  --slide-size: 100%;
}
.embla__viewport {
  overflow: hidden;
}
.embla__container {
  display: flex;
  height: 450px;
  align-items: flex-end;
}

.embla__slide {
  flex: 0 0 100%; /* Slide covers 50% of the viewport */
  margin-right: 10px;
  transition: transform 0.2s;
}

.embla__slide__card {
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  font-size: 4rem;
  font-weight: 600;
  display: flex;
  align-items: end;
  justify-content: start;
  height: 400px;
  user-select: none;

  background-position: center center;
  background-size: cover;
  text-decoration: none!important;
  filter: grayscale(80%);

  padding: 15px 10px;

  position: relative;
  overflow: hidden;
}

.embla__slide__card:hover{
    cursor: pointer;
    filter: none;
}



.embla__carousel__contenido{
    color: #fff!important;
    /* text-shadow: 1px 1px 2px #000!important; */
    font-size: 18px;
    font-weight: 400;
    display: none;
    transition: opacity 0.3s;
}

/*
.embla__slide__card:hover .embla__carousel__contenido {
    display: block; 
    opacity: 1; 
}*/

.embla__carousel__contenido--titulo{
    font-size: 14px!important;
    color: #fff!important;
    text-transform: uppercase!important;
    font-weight: 700;
}
.embla__carousel__contenido--descripcion{
    font-size: 14px!important;
    color: #fff;
    font-weight: 400;
}
.embla__carousel__contenido--enlace{
    text-decoration: none!important;
    font-size: 12px!important;
    position: relative;
    color: #fff;
    z-index: 3;
    text-transform: uppercase!important;
}

@media(min-width: 768px){
  .embla__slide {
flex: 0 0 33%; /* Slide covers 50% of the viewport */
margin-right: 10px;
}
}
@media(min-width: 1024px){
  .embla__slide {
flex: 0 0 25%; /* Slide covers 50% of the viewport */
margin-right: 10px;
transition: transform 1s; 
}
.embla__slide__card{
height: 400px;
}

/* Con esto lo hago crecer */
/* .embla__slide:hover{
  flex: 0 0 25%;
  height: 550px;
}
.embla__slide__card:hover{
  height: 550px;
} */
}


.embla__carousel__selected{
  flex: 0 0 30%;
  height: 450px;
}
.embla__slide__card__selected{
  height: 450px;
}
.embla__slide__card__selected--filter{
  filter: none;
}
.embla__slide__card__selected-movil{
  filter: none;
}


.embla__carousel__contenido__selected{
  display: block; 
  opacity: 1; 
  position: absolute;
  padding: 10px;
}

.bgvideo {
position: absolute;
left: 0px;
bottom: -35px;
max-height: 130%;
z-index:-10;
width: 100%;
}

@media(max-width: 769px){
  .bgvideo{
    max-height: unset;
  }
}

.embla__slide-link{
  height: 100%;
  width: 100%;
  text-decoration: none;
  position: relative;
  z-index: 1;
}


/* CSS para las flechas */
.embla__prev, .embla__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 1rem;
  cursor: pointer;
  z-index: 2;
  font-size: 2rem;
  line-height: 1;
  transition: background-color 0.3s;
}

.embla__prev:hover, .embla__next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.embla__prev {
  left: 10px;
}

.embla__next {
  right: 10px;
}

.embla__prev:disabled, .embla__next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}