body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

.swiper {
  width: 100%;
  max-width: 1200px; /* Ancho máximo similar al de un portal institucional */
  height: 450px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra el banner sin deformarse */
}

/* Personalización de los controles (puedes cambiar los colores para asemejarlo más a JCyL) */
.swiper-button-next, .swiper-button-prev {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 30px 20px;
  border-radius: 4px;
}
.swiper-pagination-bullet-active {
  background: #0056b3 !important;
}

/* 1. Quitamos los márgenes por defecto del navegador para que ocupe todo el iframe */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Evita que salgan barras de scroll */
}

/* 2. El contenedor del carrusel debe ocupar el 100% del iframe */
.swiper {
  width: 100%;
  height: 100%;
}

/* 3. Centramos el contenido dentro de cada diapositiva */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* O el color de fondo que prefieras si sobra espacio */
}

/* 4. LA MAGIA: Le decimos a la imagen cómo debe comportarse */
.swiper-slide img {
  width: 100%;
  height: 100%;
  /* Usa 'contain' para que NUNCA se recorte (aunque queden bandas a los lados).
     Si prefieres que llene todo el recuadro aunque recorte un poco, cambia 'contain' por 'cover' */
  object-fit: contain; 
}