/* --------------------------------------------------
   ANIMACIÓN DE BORDE GIRATORIO
-------------------------------------------------- */
@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Envoltorio General / Tarjetas */
.glow-card-container {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  padding: 2px;
  isolation: isolate; /* Crea un contexto de apilamiento propio */
}

.glow-card-container::before {
  content: '';
  position: absolute;
  inset: -50%; /* En lugar de top: -100% / width: 300% */
  width: 200%;
  height: 200%;
  margin: auto;
  background: conic-gradient(from 0deg, transparent 0%, #06b6d4 25%, #3b82f6 50%, #8b5cf6 75%, transparent 100%);
  animation: rotateGlow 4s linear infinite;
  z-index: -1;
}

.glow-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: calc(1.25rem - 2px);
}

/* Envoltorio para Botones */
.glow-btn-container {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 2px;
  display: inline-flex;
  isolation: isolate;
}

.glow-btn-container::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  margin: auto;
  background: conic-gradient(from 0deg, transparent 0%, #06b6d4 25%, #3b82f6 50%, #8b5cf6 75%, transparent 100%);
  animation: rotateGlow 3s linear infinite;
  z-index: -1;
}

.glow-btn-content {
  position: relative;
  z-index: 1;
  border-radius: calc(0.75rem - 2px);
}

.button-primary {
  color: #082f49;
  font-weight: 800;
  border: 1px solid rgba(125, 211, 252, 0.75);
  background: linear-gradient(135deg, #38bdf8, #0ea5e9 55%, #6366f1);
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.26), inset 0 1px rgba(255,255,255,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.button-primary:hover {
  color: #082f49;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.42), inset 0 1px rgba(255,255,255,.4);
}

.dark .button-primary { color: #ecfeff; }

.button-scroll-top {
  color: #082f49;
  border: 1px solid rgba(125, 211, 252, 0.85);
  background: linear-gradient(135deg, #67e8f9, #38bdf8 52%, #818cf8);
  box-shadow: 0 8px 22px rgba(14, 165, 233, .34);
}

.button-scroll-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(14, 165, 233, .52); }
.dark .button-scroll-top { color: #e0f2fe; }

/* Envoltorio para Botones Circulares u Íconos */
.glow-icon-container {
  position: relative;
  border-radius: 0.85rem;
  overflow: hidden;
  padding: 2px;
  display: inline-flex;
  isolation: isolate;
}

.glow-icon-container::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  margin: auto;
  background: conic-gradient(from 0deg, transparent 0%, #06b6d4 25%, #3b82f6 50%, #8b5cf6 75%, transparent 100%);
  animation: rotateGlow 3s linear infinite;
  z-index: -1;
}

.glow-icon-content {
  position: relative;
  z-index: 1;
  border-radius: calc(0.85rem - 2px);
}

.texto-gradiente {
  background: linear-gradient(135deg, #38bdf8, #818cf8, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.whatsapp-icon {
  fill: #25d366;
}

.btn-whatsapp-text::after,
.btn-cta-text::after {
  content: "Chatear";
}

.glow-btn-content:hover .btn-whatsapp-text,
.glow-btn-content:hover .btn-cta-text {
  font-size: 0;
}

.glow-btn-content:hover .btn-whatsapp-text::after,
.glow-btn-content:hover .btn-cta-text::after {
  content: "Chatea con nosotros";
  font-size: 0.875rem;
}

/* ==========================================================================
   ANIMACIONES DE ENCABEZADO Y BADGE
   ========================================================================== */

/* 1. Animación del Gradiente Multicolor del Título */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient-text {
  animation: gradientShift 6s ease infinite;
}

/* 2. Animación de Resplandor Neón para el Badge "Mi Trabajo" */
@keyframes neonGlow {
  0% {
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.2), inset 0 0 5px rgba(56, 189, 248, 0.1);
  }
  50% {
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.5), inset 0 0 8px rgba(56, 189, 248, 0.25);
  }
  100% {
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.2), inset 0 0 5px rgba(56, 189, 248, 0.1);
  }
}

.badge-mi-trabajo {
  animation: neonGlow 3s infinite ease-in-out;
}

/* ==========================================================================
   BORDE CON COLORES GIRANDO (ANIMATED GRADIENT BORDER)
   ========================================================================== */

/* Animación de rotación continua 360 grados */
@keyframes spinBorder {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Pseudo-elemento giratorio de fondo */
.animated-border-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 500%;
  background-image: conic-gradient(
    #38bdf8, /* Sky 400 */
    #818cf8, /* Indigo 400 */
    #c084fc, /* Purple 400 */
    #34d399, /* Emerald 400 */
    #38bdf8  /* Cierra el ciclo en Sky */
  );
  animation: spinBorder 4s linear infinite;
  z-index: 0;
}

/* Animaciones del Botón Activo */
@keyframes filterGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.8);
  }
}

@keyframes buttonPop {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1.05); }
}

.filtro-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filtro-btn.active {
  animation: filterGlow 2.5s infinite ease-in-out, buttonPop 0.3s ease-out;
  transform: scale(1.05);
}

/* ==========================================================================
   ESTADOS Y ANIMACIÓN DEL BOTÓN VOLVER ARRIBA
   ========================================================================== */

/* Animación de flotación constante */
@keyframes floatTop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Clase que activa el JS cuando se hace Scroll */
#btnScrollTop.show-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: floatTop 2.5s infinite ease-in-out;
}

/* Fuerza al modal a ignorar otros contextos de apilamiento */
#modalContacto {
  position: fixed !important;
  z-index: 2147483647 !important; /* Valor máximo de z-index posible */
}

/* Ajustes específicos para móviles: el encabezado nunca debe desbordarse. */
@media (max-width: 639px) {
  .glow-icon-container {
    border-radius: 0.7rem;
  }

  .glow-icon-content {
    border-radius: calc(0.7rem - 2px);
  }

  #menuMovil {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}