html, body {
  height: 100%;
  margin: 0;
}

.slideshow-container {
  position: relative;
  height: calc(100vh - var(--nav-h)); /* full height minus navbar */
  margin-top: var(--nav-h);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* hides any overflow */
}

.slide {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain; /* fit without cropping */
}

.slide.active {
  display: block;
  animation: fade 1s ease-in-out;
}


/* Efecto de fade */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}