html,
body {
  overflow-x: hidden;
}

.curiosidades-page {
  max-width: 1100px;
  margin: auto;
  padding: 60px 20px;
}

.page-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
}

.curiosity-card {
  border: 3px solid #06185a;
  margin-bottom: 30px;
}

.curiosity-header {
  background: #06185a;
  color: #fff;
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.curiosity-header h3 {
  font-size: 20px;
}

.arrow {
  transition: transform .3s ease;
}

.curiosity-body {
  display: none;
  padding: 25px;
  animation: slideDown .4s ease;
}

.curiosity-card.open .curiosity-body {
  display: block;
}

.curiosity-card.open .arrow {
  transform: rotate(180deg);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.gallery img {
  width: 100%;
  max-width: 280px;

  height: auto;

  object-fit: cover;

  border-radius: 12px;

  cursor: pointer;

  transition:
    transform .3s ease,
    opacity .3s ease;

  box-shadow:
    0 10px 25px rgba(0,0,0,.15);
}

.gallery img:hover {
  transform: scale(1.03);
  opacity: .95;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-content {

  width: 100%;

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;
}

.modal-content img {

  width: auto;

  max-width: 90vw;

  max-height: 75vh;

  object-fit: contain;

  border-radius: 14px;

  box-shadow:
    0 20px 40px rgba(0,0,0,.45);
}

.modal-content p {
  color: #fff;
  margin-top: 10px;
}

.close,
.prev,
.next {
  position: absolute;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
}

.close {
  top: 85px;
  right: 25px;
}

.prev {
  left: 25px;
}

.next {
  right: 25px;
}

@media (max-width: 768px) {

  .gallery {
    justify-content: center;
  }

  .gallery img {

    max-width: 100%;

    border-radius: 10px;
  }

  .modal-content img {

    max-width: 95vw;

    max-height: 65vh;
  }

  .close {

    top: 20px;

    right: 20px;

    font-size: 28px;
  }

  .prev,
  .next {

    font-size: 26px;

    top: 50%;

    transform: translateY(-50%);
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  .modal-content p {

    font-size: 14px;

    padding: 0 10px;

    margin-top: 15px;
  }

}