.flip-card {
  background-color: transparent;
  perspective: 1000px;
  height: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  overflow: hidden;
}

.flip-card-front {
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-back {
  background-color: #ffffff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(135deg, #05005b2f, #d500004d);
}

.flip-card-back img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.25s ease;
}

/*Codigo con diseno card frontal movil*/

.flip-card-front {
  background:
    radial-gradient(120% 120% at 8% 18%, rgba(107, 125, 255, 0.24) 0%, transparent 58%),
    radial-gradient(95% 110% at 88% 78%, rgba(255, 125, 182, 0.2) 0%, transparent 62%),
    linear-gradient(145deg, #1c2234 0%, #453a4b 45%, #6b5f6c 100%);
  background-size: 140% 140%, 150% 150%, 100% 100%;
  animation: cardGradientDrift 16s ease-in-out infinite;
  position: absolute;
  overflow: hidden;
  color: white;
  isolation: isolate;
}

.flip-card-front h5 {
  margin: 0;
  padding: 0 1rem;
  font-size: clamp(1.4rem, 1.12rem + 0.9vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.flip-card:hover .flip-card-front h5,
.flip-card:focus-within .flip-card-front h5 {
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem);
}

.flip-card-back::before {
  content: attr(data-cert-title);
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  padding: 0.4rem 0.7rem;
  border-radius: 0.6rem;
  background: rgba(14, 18, 34, 0.72);
  color: #fff;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
}

.flip-card-inner.flipped .flip-card-back::before {
  opacity: 1;
  transform: translateY(0);
}

.flip-card-inner.flipped .flip-card-back img {
  transform: scale(0.92);
}

.flip-card-front::before,
.flip-card-front::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  filter: blur(20px);
  mix-blend-mode: screen;
}

.flip-card-front::before {
  background:
    radial-gradient(circle at 28% 25%, rgba(140, 179, 255, 0.5) 0%, rgba(140, 179, 255, 0) 52%),
    radial-gradient(circle at 72% 68%, rgba(250, 160, 212, 0.45) 0%, rgba(250, 160, 212, 0) 56%);
  animation: blobOrbitA 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.flip-card-front::after {
  background:
    radial-gradient(circle at 75% 22%, rgba(179, 139, 255, 0.34) 0%, rgba(179, 139, 255, 0) 52%),
    radial-gradient(circle at 20% 76%, rgba(112, 209, 255, 0.28) 0%, rgba(112, 209, 255, 0) 55%);
  opacity: 0.9;
  animation: blobOrbitB 18s cubic-bezier(0.42, 0.08, 0.58, 0.92) infinite reverse;
}

@keyframes cardGradientDrift {
  0% {
    background-position: 14% 24%, 84% 72%, 0% 0%;
  }
  27% {
    background-position: 72% 14%, 22% 86%, 0% 0%;
  }
  63% {
    background-position: 34% 84%, 76% 18%, 0% 0%;
  }
  100% {
    background-position: 14% 24%, 84% 72%, 0% 0%;
  }
}

@keyframes blobOrbitA {
  0% {
    transform: translate3d(-7%, -5%, 0) rotate(0deg) scale(1.05);
    border-radius: 38% 62% 54% 46% / 41% 45% 55% 59%;
  }
  23% {
    transform: translate3d(10%, -12%, 0) rotate(52deg) scale(1.18);
    border-radius: 63% 37% 48% 52% / 55% 39% 61% 45%;
  }
  51% {
    transform: translate3d(13%, 9%, 0) rotate(126deg) scale(0.96);
    border-radius: 44% 56% 62% 38% / 48% 63% 37% 52%;
  }
  79% {
    transform: translate3d(-12%, 11%, 0) rotate(220deg) scale(1.12);
    border-radius: 58% 42% 34% 66% / 46% 57% 43% 54%;
  }
  100% {
    transform: translate3d(-7%, -5%, 0) rotate(360deg) scale(1.05);
    border-radius: 38% 62% 54% 46% / 41% 45% 55% 59%;
  }
}

@keyframes blobOrbitB {
  0% {
    transform: translate3d(11%, 9%, 0) rotate(0deg) scale(0.96);
    border-radius: 57% 43% 52% 48% / 49% 56% 44% 51%;
  }
  31% {
    transform: translate3d(-14%, 6%, 0) rotate(100deg) scale(1.14);
    border-radius: 42% 58% 39% 61% / 62% 41% 59% 38%;
  }
  58% {
    transform: translate3d(-7%, -15%, 0) rotate(201deg) scale(1.04);
    border-radius: 64% 36% 57% 43% / 37% 64% 36% 63%;
  }
  84% {
    transform: translate3d(15%, -4%, 0) rotate(300deg) scale(0.92);
    border-radius: 46% 54% 61% 39% / 58% 35% 65% 42%;
  }
  100% {
    transform: translate3d(11%, 9%, 0) rotate(360deg) scale(0.96);
    border-radius: 57% 43% 52% 48% / 49% 56% 44% 51%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-card-front,
  .flip-card-front::before,
  .flip-card-front::after {
    animation: none;
  }
}

#nombre {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;

}

.bg-primary {
    background-color: #002D5B !important;
}

.btn-primary {
    background-color: #002D5B !important;
}

.project-card .project-preview {
  height: 240px;
  object-fit: cover;
  object-position: top;
}


.accordion-button {
  background-color: #0d1d5a;
  color: white;
  font-weight: bold;
}

.accordion-button:not(.collapsed) {
  background-color: #0481ff;
}

.accordion-body {
  background-color: #f9f9f9;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}



.glow-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 1rem;
}

/* Glowing blue border (sutil y elegante) */
.glow-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #002d5b, #0057a0, #0099ff);
  background-size: 200% 200%;
  animation: glow-border-blue 6s ease infinite;
  z-index: -1;
  border-radius: inherit;
  filter: blur(4px);
  opacity: 0.7;
}

@keyframes glow-border-blue {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Fondo de la card para contraste */
.glow-card .card-body {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-radius: inherit;
}

.accordion-button::after {
  filter: brightness(0) invert(1); /* cambia el ícono a blanco */
}