body { padding-top: 70px; }
.card-img-top { object-fit: cover; height: 200px; }
.gallery img { max-width: 100%; height: auto; margin-bottom: 10px; }
video { width: 100%; height: auto; margin-bottom: 10px; }
footer { margin-top: 40px; padding: 20px 0; border-top: 1px solid #eee; }
.badge-cat { font-size: 0.8rem; }
/* === Slider 200x200 con zoom modal4=== */
.slider-200 { width: 400px; height: 400px; margin: 0 auto 10px; }
.slider-200 .carousel-inner, .slider-200 .carousel-item { width: 400px; height: 400px; object-position: center center;     }

.slider-200 img, .slider-200 video { max-width: 100%; max-height: 100%; object-fit: contain; }
.cursor-zoom { cursor: zoom-in; }

/* --- Flechas redondas y grises --- */
.slider-200 .carousel-control-prev,
.slider-200 .carousel-control-next { width: auto; opacity: 1; }
.slider-200 .control-circle {
  width: 46px; height: 46px; background: #e0e0e0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.slider-200 .control-circle:hover { background: #cfcfcf; }
.slider-200 .carousel-control-prev-icon,
.slider-200 .carousel-control-next-icon { background-size: 60% 60%; }

/* --- Thumbnails --- */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.active { border-color: #6c757d; } /* secondary */