:root{
  --club-blue:#003366;
  --club-yellow:#ffcc00;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
}

.fotosh {
  max-width: 1100px;
  margin: 24px auto 48px;
  padding: 0 16px;
  font-family: Arial, sans-serif;
}

.fotosh__title {
  color: var(--club-blue);
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  margin: 6px 0 18px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.carousel {
  position: relative;
}
.carousel__viewport {
  display: flex;               /* en fila */
  align-items: center;         /* centra verticalment */
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;               /* 🔑 padding al voltant */
  border-radius: 12px;
  background: #e3e4e7;
  border: 1px solid var(--line);
  scroll-behavior: smooth;
}

.carousel__slide {
  scroll-snap-align: center;
  flex: 0 0 auto;              /* 🔑 que cada slide sigui tan ample com la seva foto */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  cursor: pointer;
  padding: 0.4rem;
}

.carousel__slide img {
  display: block;
  height: 360px;    /* totes la mateixa alçada */
  width: auto;      /* amplada proporcional */
}



.carousel__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(163, 163, 173, 0.95), rgba(255,255,255,.75));
  font-size: 0.9rem;
}
.carousel__caption__titol {
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carousel__caption__meta {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: #fff;
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--club-blue);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.carousel__btn:hover { background: #f8fafc; }
.carousel__btn.prev { left: -6px; }
.carousel__btn.next { right: -6px; }

.carousel__dots {
  display: flex; gap: 6px; justify-content: center; margin-top: 10px;
}
.carousel__dots button {
  width: 8px; height: 8px; border-radius: 999px; border: 0;
  background: #d1d5db; cursor: pointer;
}
.carousel__dots button[aria-current="true"] { background: var(--club-blue); }


.swal-btn-blue {
  background-color: #003366 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.swal-btn-blue:hover {
  background-color: #0056b3 !important;
}

/* marcador de info si lo usas en algún sitio */
.more-info {
  font-weight: bold;
  color: #2d8187;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 900px){
  .carousel__viewport { grid-auto-columns: 88%; }
  .carousel__slide img { height: 300px; }
}
@media (max-width: 640px){
  .carousel__viewport { grid-auto-columns: 92%; }
  .carousel__slide img { height: 240px; }
}