/* Contenedor principal */

.flecha-azul {
  background-color: var(--color-azulterciary);
  color: var(--color-whiteforwhite);
}
.flecha-amarilla {
  background-color: var(--color-buttonorangeterciary);
  color: var(--color-whiteforwhite);
}
.flecha-violeta {
  background-color: var(--color-violetabutton);
  color: var(--color-whiteforwhite);
}
.flecha-roja {
  background-color: var(--color-buttonredprimari);
  color: var(--color-whiteforwhite);
}

#cont-principal {
  font-family: Outfit, sans-serif;
  color: var(--color-textocard);
  z-index: 2;
}

.cont-principal-cards {
  position: relative !important;
  padding: 0px 30px !important;
}

/* Contenedor del carrusel (aplica a cualquier contenedor cuyo id inicie con "swipe-card") */
[id^="swipe-card"] {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0 !important;
  z-index: -1 !important;
}

/* Cada slide respeta el ancho de la card */
.swiper-slide {
  width: auto !important;
  display: flex;
  justify-content: center;
}

/* Card con tamaño fijo (para cualquier id que comience con "card-unic") */
[id^="card-unic"] {
  width: 100% !important;
  min-width: 295px !important;
  max-width: 296px !important;
  min-height: 463px !important;
  max-height: 464px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  background-color: var(--color-cardeventos) !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  padding: 0 !important;
  color: var(--color-textocard) !important;
  text-align: start !important;
  margin: 0 0.3rem !important;
}
[id^="card-unic-min"] {

  /*min-height: 412px !important*/;
  overflow: hidden !important;

}
[id^="card-unic-med"] {

  min-height: 432px !important;
  overflow: hidden !important;

}

#card-href{
  z-index: 50 !important;
}
[id^="card-unic"] img {
  width: 100%;
  height: 156px !important;
  object-fit: cover;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Contenido interno de la card (para cualquier id que comience con "card-content") */
[id^="card-content"] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  flex-grow: 1;
}

[id^="card-content"]>p {
  margin-top: 10px;
  padding-bottom: 10px;
}


/* Badge "Nuevo" (para cualquier id que comience con "span-new") */
[id^="span-new"] {
  padding: 6px 15px !important;
  background-color: var(--color-nuevo-badge) !important;
  color: var(--color-text-oscuroprimerio) !important;
  border: 2px solid !important;
  border-radius: 25px !important;
  border-color: var(--color-borderspan) !important;
}

/* Alineación del contenido en la card */
[id^="card-content"] .row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 0 !important;
}

[id^="card-content"] .col-10 {
  margin-bottom: 10px;
}

[id^="card-content"] .col-2 {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  white-space: normal;
  word-break: break-word;

}

.card-text {
  margin-bottom: auto;
  font-size: 16px;
   /* Evita que el texto se envuelva en varias líneas */
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  background: none;
  width: auto;
  height: auto;
}

#cont-principal h1 {
  font-size: 36px;
}

#cont-principal p {
  font-family: Outfit;
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.5px;

}

.boton-amarillo {
  background-color: var(--color-buttonorangeterciary);
  color: var(--color-whiteforwhite);
}

.btn-ver-mas {
  border-radius: 25px;
  padding: 8px 15px;
  border: none;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: none;
}

.btn-clickeable{
  z-index: 2 !important;
  pointer-events: auto !important;
}

/*  propiedades para los botones */
/*flecha next*/
.btn-cards{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2 !important;
  pointer-events: auto !important;
  font: -webkit-small-control !important;
  text-align: -webkit-center;
  -webkit-writing-mode: vertical-lr;
}

/*flecha prev*/
.btn-cards-prev{
  text-align: -webkit-center;
  -webkit-writing-mode: vertical-lr;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Más alto que la sombra */
}

.btn-sombra {
  position: absolute;
  left: 73%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gradiant-shadowcards);
  background-blend-mode: multiply;
  border: none;
  width: 350px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* Más alto que la sombra */
}

.btn-sombra-izq {
  position: absolute;
  right: 73%;
  top: 44%;
  transform: translateY(-50%);
  background: var(--gradiant-shadowcards-izq);
  background-blend-mode: multiply;
  border: none;
  width: 350px;
  height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}



/* Ocultar el botón de navegación previo */
.swiper-button-prev {
  display: none;
}





/* Botón para ver todas */
.btn-cambiar {
  background-color: var(--color-Body);
  color: var(--color-textocard);
  border-radius: 20px;
  padding: 7px 20px 7px 20px !important;
  border: none;
  margin: 20px auto;
  font-size: 16px;
  border: 2px solid;
  border-color: var(--color-buttonborder) !important;
  font-weight: 600;
}

.btn-cambiar:hover {
  background-color: #cacaca;
}

/* boton ver todas se expande a toda la pantalla al llegar a 380px*/
@media (max-width: 380px) {
  .btn-cambiar {
    width: 100%;
  }
}

/* Adaptaciones para distintos anchos del carrusel */

@media (max-width: 360px) {
  [id^="swipe-card"] {
    max-width: calc(1.5 * 295px + 0px);
  }

  .cont-principal-cards {
    position: relative !important;
    padding: 0px 0px !important;
  }
  .btn-cards,.btn-cards-prev {
    background-color: transparent !important;
  }


}


@media (max-width: 600px) {
  [id^="swipe-card"] {
    max-width: 296px;
    z-index: 0 !important;
    /* 1 card */
  }

  #cont-principal {
    max-width: 100% !important;
  }

  .swiper-button-next {
    display: none !important;
  }
  .btn-sombra, .btn-sombra-izq {
   display: none !important;
  }
  .btn-cards, .btn-cards-prev {
    display: none !important;
  }
  .carousel-control-next-icon{
    background-image: none;
  }
  .carousel-control-prev-icon {
    background-image: none;
  }
}

@media (max-width: 903px) {
  [id^="swipe-card"] {
    max-width: calc(2.3 * 295px + 10px);
  }


  .btn-sombra {
    left: 84%;
    width: 110px ;
  }
  .btn-sombra-izq{
    right: 84%;
    width: 110px ;
  }
  .btn-cards {
    right: 35px !important;
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
  .btn-cards-prev {
    left: 35px !important;
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
}

@media (min-width: 904px) {
  [id^="swipe-card"] {
    max-width: calc(2.3 * 295px + 2 * 10px);
    margin: 0 2.2rem;
  }


  .btn-sombra  {
    left: 90%;
    width: 104px ;
  }

  .btn-sombra-izq{
    right: 90%;
    width: 104px ;
  }
  .btn-cards {
    right: 0px ;
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
  .btn-cards-prev {
    left: 0px ;
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
}



@media (min-width: 1024px) {
  [id^="swipe-card"] {
    max-width: calc(3.5 * 295px + 2 * 0px);
    margin: 0 2.2rem;
  }


  .btn-sombra {
    left: 75%;
    width: 320px;
  }
  .btn-sombra-izq{
    right: 75%;
    width: 360px;
  }
  .btn-cards {
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
  .btn-cards-prev {
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
}

@media (min-width: 1240px) and (max-width: 1440px) {
  [id^="swipe-card"] {
    max-width: calc(3.5 * 295px + 2 * 10px);
    margin: 0 2.2rem;
  }



  .btn-sombra {
    left: 76%;
    width: 300px;
  }
  .btn-sombra-izq{
    right: 75%;
    width: 300px;
  }
  .btn-cards {
    right: 50px;
      text-align: -webkit-center;
      -webkit-writing-mode: vertical-lr;
  }
  .btn-cards-prev {
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
    left: 50px;
  }

}

@media(min-width: 1440px){
  [id^="swipe-card"] {
    max-width: calc(3.5 * 295px + 2 * 20px);
    margin: 0 2.2rem;
  }


  .btn-sombra {
    left: 75%;
    width: 350px;
  }

  .btn-sombra-izq {
    right: 75%;
    width: 350px;
  }

  .btn-cards {
    /*right: 200px;*/
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }
  .btn-cards-prev {
    text-align: -webkit-center;
    -webkit-writing-mode: vertical-lr;
  }

}
  @media (min-width: 2560px) {
    [id^="swipe-card"] {
      max-width: calc(4 * 295px + 2 * 10px);
      margin: 0 2.2rem;
    }



    .btn-sombra {
      left: 70%;
      width: 350px;
      /* z-index: 1; */
    }

    .btn-sombra-izq {
      right: 70%;
      width: 350px;
    }

    .btn-cards {
      right: 200px;
      text-align: -webkit-center;
      -webkit-writing-mode: vertical-lr;
    }
    .btn-cards-prev {
      left: 200px;
      text-align: -webkit-center;
      -webkit-writing-mode: vertical-lr;
    }


  }