/* --------------------------------- 
Para swiper de la tarjeta
--------------------------------- */
#tarjetas {
  height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra horizontalmente al hijo */
  align-items: center; /* centra verticalmente al hijo */
  background-color: rgba(255, 255, 255,1);  
}

#tarjetas .titulo {
  padding: 30px 30px 18px;
}

#tarjetas .titulo h1 {
  text-align: center;
  font-size: 15px;
  color: rgba(0,0,0,0.8);
}

#tarjetas .titulo h2 {
  text-align: center;
  font-size: 10px;
  color: rgba(0,0,0,0.6);
}

/* El Swiper (no se debe incluir el swiper-wrapper en el CSS) */
.swiper-tarjeta {
  width: 50%;
  height: 80%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Cada slide */
.swiper-tarjeta .swiper-slide {
  position: relative;
  height: 100%;
  border-radius: 7.5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.swiper-tarjeta .swiper-slide img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantiene proporción, recorta si sobra */
  object-position: center;
  display: block;
  z-index: 1;
}

/* --------------------------------- 
Para swiper de la portada
--------------------------------- */

/* El contenedor del swiper */
#carrusel {
  height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra horizontalmente al hijo */
  align-items: center; /* centra verticalmente al hijo */
  background-color: rgba(255, 255, 255,1);
}

#carrusel .titulo {
  padding: 30px 30px 18px;
}

#carrusel .titulo h1 {
  text-align: center;
  font-size: 15px;
  color: rgba(0,0,0,0.8);
}

#carrusel .titulo h2 {
  text-align: center;
  font-size: 10px;
  color: rgba(0,0,0,0.6);
}

/* El Swiper (no se debe el incluir swiper-wrapper en el CSS, sino ir directo de aquí a los slides) */
.swiper-portada {
  width: 88%;
  height: 80%;
  border-radius: 7.5px;
  overflow: hidden;
}

/* Cada slide */
.swiper-portada .swiper-slide {
  position: relative;
  height: 100%;
  border-radius: 7.5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-portada .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;   /* Atajo para top: 0; right: 0; bottom: 0; y left: 0; */  
  background: linear-gradient(
    to bottom,
    rgba(20,91,93,0.75) 0%,
    rgba(20,91,93,0.55) 10%,
    rgba(20,91,93,0.35) 20%,
    rgba(20,91,93,0.20) 30%,
    rgba(20,91,93,0.00) 40%,
    rgba(20,91,93,0.00) 50%,
    rgba(20,91,93,0.00) 60%,
    rgba(20,91,93,0.20) 70%,
    rgba(20,91,93,0.35) 80%,
    rgba(20,91,93,0.55) 90%,
    rgba(20,91,93,0.75) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.swiper-portada .swiper-slide img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantiene proporción, recorta si sobra */
  object-position: center;
  display: block;
  z-index: 1;
}

.swiper-portada .swiper-slide h1 {
  position: absolute;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 12px;
  padding: 0px 45px;
  top: 25px;
  z-index: 3;
}

.swiper-portada .swiper-slide span {
  position: absolute;
  z-index: 3;
  bottom: 72px;
  font-size: 25px;
  border: 1.5px solid rgba(255,255,255,1); /* solid para una línea, double para dos líneas */
  background-color: rgba(255, 255, 255, 0.1);
  padding: 6px 6px;
  border-radius: 2px;
}

.swiper-portada .swiper-slide a {
  position: absolute;
  z-index: 3;
  bottom: 25px;
  font-size: 15px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  background: rgba(20,91,93,1);
  border: 0px solid rgba(255,255,255,1); /* solid para una línea, double para dos líneas */
  padding: 6px 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.25);/* offset-x | offset-y | blur-radius | spread-radius | color */
  transition: background 0.25s ease, box-shadow 0.25s ease;  /* duración y suavidad */
  cursor: pointer;
}

.swiper-portada .swiper-slide a:hover {
  background: rgba(20,91,93,0.8);
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25);/* offset-x | offset-y | blur-radius | spread-radius | color */
}

/* Botones */
.swiper-portada .swiper-button-prev {
  margin-left: 10px;
}

.swiper-portada .swiper-button-next {
  margin-right: 10px;
}

.swiper-portada .swiper-button-prev,
.swiper-portada .swiper-button-next {
  color: rgba(255,255,255,1);
  --swiper-navigation-size: 36px;
  opacity: 0;
  transition: opacity 0.5s;
}

.swiper-portada:hover .swiper-button-prev,
.swiper-portada:hover .swiper-button-next {
  opacity: 1;
}

/* Paginación */
.swiper-portada .swiper-pagination {
  margin-bottom: 5px;
  --swiper-pagination-color: rgba(0,0,0,0.8);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0.8);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 5px;
}

/* Responsive */
@media (max-width: 736px) {
  #carrusel {
    height: 450px;
  }

  .swiper-portada .swiper-button-prev,
  .swiper-portada .swiper-button-next {
    --swiper-navigation-size: 25px;
  }
}

@media (max-width: 360px) {
  #carrusel {
    height: 360px;
  }
}

/* ---------------------------- 
Para los catálogos  
-----------------------------*/
/* Tamaño del carrusel */
.swiper-catalogo .swiper-slide {
  overflow: hidden;
}

.swiper-catalogo .swiper-button-prev,
.swiper-catalogo .swiper-button-next {
  color: rgba(16,16,16,0.75);
  background-color: rgba(255,255,255,0.75);
  font-weight: bold;
  padding: 20px 8px;
  --swiper-navigation-size: 9px; /* cambia el tamaño */
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.5);
}

.swiper-catalogo .swiper-button-prev:hover,
.swiper-catalogo .swiper-button-next:hover {
  color: rgba(16,16,16,0.9);
  background-color: rgba(255,255,255,0.9);
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.5);
}

.swiper-catalogo .swiper-button-prev {
  margin-left: -10px;
}

.swiper-catalogo .swiper-button-next {
  margin-right: -10px;
}

.zoomable {
  transition: transform 0.2s ease;
  cursor: zoom-in; /* cursor tipo lupa al pasar el mouse */
}

.zoomable:hover {
  transform: scale(2.5);
}