/* ============================================
   BRAND ASSETS OPTIMIZATION & FALLBACKS
   ============================================ */

/* Preload Critical Images */
.logo-cartesiano,
.logo-prisma {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
}

/* Fallback for missing images */
.logo-cartesiano[src=""],
.logo-cartesiano:not([src]),
.logo-cartesiano[src*="404"] {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #2c3e50, #3498db);
  border-radius: 8px;
  position: relative;
}

.logo-cartesiano[src=""]:before,
.logo-cartesiano:not([src]):before,
.logo-cartesiano[src*="404"]:before {
  content: "C";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
}

.logo-prisma[src=""],
.logo-prisma:not([src]),
.logo-prisma[src*="404"] {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 16px;
  position: relative;
  margin-bottom: 1rem;
}

.logo-prisma[src=""]:before,
.logo-prisma:not([src]):before,
.logo-prisma[src*="404"]:before {
  content: "P";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 700;
  font-size: 2.5rem;
}

/* Loading states */
.logo-cartesiano.loading,
.logo-prisma.loading {
  opacity: 0.6;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
}

/* High DPI displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-cartesiano,
  .logo-prisma {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Dark mode support (future-proofing) */
@media (prefers-color-scheme: dark) {
  .logo-cartesiano {
    filter: brightness(1.1) contrast(1.1);
  }

  .logo-prisma {
    filter: brightness(1.05) contrast(1.05);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .logo-cartesiano,
  .logo-prisma {
    transition: none !important;
    animation: none !important;
  }

  .logo-cartesiano:hover,
  .logo-prisma:hover {
    transform: none !important;
  }
}