/* =========================
   GALERÍA - BASE
========================= */

.galeria-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(79, 111, 255, 0.08), transparent 30%),
    radial-gradient(circle at 88% 38%, rgba(216, 95, 255, 0.08), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(68, 210, 255, 0.06), transparent 32%),
    #f8fbff;
}

.galeria-page::before {
  content: "";
  position: absolute;
  inset: 620px 0 auto;
  height: 520px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(114, 126, 255, 0.10), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(236, 119, 255, 0.08), transparent 36%);
  filter: blur(10px);
  opacity: 0.9;
  z-index: 0;
}

.galeria-page > section {
  position: relative;
  z-index: 1;
}

.galeria-section {
  position: relative;
  padding: 96px 0;
}

.galeria-section-header {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.galeria-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.galeria-section-title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.7px;
  font-weight: 900;
  text-wrap: balance;
}

.galeria-section-title span {
  color: transparent;
  background: linear-gradient(115deg, #3158ff 0%, #7c3aed 45%, #d946ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.galeria-section-description {
  max-width: 660px;
  margin: 18px auto 0;
  color: #64748b;
  font-size: clamp(15.5px, 1.18vw, 17px);
  line-height: 1.72;
  font-weight: 500;
}

.galeria-glass-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.56)),
    rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.11);
  box-shadow:
    0 22px 62px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.galeria-glass-card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -75%;
  width: 48%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 34%,
    rgba(255, 255, 255, 0.58) 50%,
    rgba(255, 255, 255, 0.10) 66%,
    transparent 100%
  );
  transform: rotate(18deg);
  opacity: 0;
  transition:
    left 0.68s ease,
    opacity 0.3s ease;
  z-index: 2;
}

.galeria-glass-card:hover::before {
  left: 125%;
  opacity: 1;
}

.galeria-glass-card:hover {
  border-color: rgba(124, 58, 237, 0.20);
  box-shadow:
    0 28px 74px rgba(79, 111, 255, 0.12),
    0 18px 46px rgba(216, 95, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
  .galeria-section {
    padding: 78px 0;
  }

  .galeria-section-header {
    margin-bottom: 36px;
  }

  .galeria-section-title {
    letter-spacing: -1.25px;
  }
}

@media (max-width: 560px) {
  .galeria-section {
    padding: 66px 0;
  }

  .galeria-section-header {
    text-align: left;
    margin: 0 0 32px;
  }

  .galeria-section-label {
    margin-left: 0;
    margin-right: 0;
  }

  .galeria-section-description {
    margin-left: 0;
    margin-right: 0;
  }
}