/* =============================================
   El Templo — Shared Styles
   Extraído de index.html y pactos.html
   ============================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a0b0d;
}

::-webkit-scrollbar-thumb {
  background: #482329;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d41132;
}

.glass-panel {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

/* FIX #14: transition: all → propiedades específicas (más barato para el compositor) */
.glass-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 20px rgba(212, 17, 50, 0.05);
}

.glass-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-5px);
  box-shadow:
    0 20px 40px -10px rgba(212, 17, 50, 0.6),
    inset 0 0 30px rgba(212, 17, 50, 0.2);
}

.text-gradient-gold {
  background: linear-gradient(to right, #d4af37, #f9e4b7, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  /* FIX #5: will-change para animaciones CSS infinitas */
  will-change: background-position;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* FIX #5: will-change para la animación de flotado */
.floating {
  will-change: transform;
  animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0px);
  }
}

.wa-conversion-btn {
  position: relative;
  overflow: hidden;
}

.wa-conversion-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.wa-conversion-btn:hover::after {
  left: 100%;
}