@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  overflow-x: hidden;
  background-color: #f8fafc;
}

/* Premium Glassmorphism Form */
.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Hover Cards Premium */
.premium-card {
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
}

.premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.premium-card.blue:hover {
  border-bottom-color: #0000CC;
}

.premium-card.red:hover {
  border-bottom-color: #cc0000;
}

/* --- Sistema de Partículas --- */
.particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
}

.snowflake {
  background: white;
  box-shadow: 0 0 6px rgba(200, 230, 255, 0.9);
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-20px) translateX(0px) rotate(0deg);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(105vh) translateX(30px) rotate(360deg);
    opacity: 0;
  }
}

.ember {
  background: #ff5e00;
  box-shadow: 0 0 10px #ff2a00;
  animation: rise linear infinite;
}

@keyframes rise {
  0% {
    transform: translateY(100vh) translateX(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-10px) translateX(-30px) scale(0.2);
    opacity: 0;
  }
}

.snowflake-global {
  background: rgba(180, 225, 255, 0.85);
  box-shadow: 0 0 6px rgba(100, 200, 255, 0.8);
  animation: fall linear infinite;
}

.snow-mini {
  background: white;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: fall-mini linear infinite;
}

@keyframes fall-mini {
  0% {
    transform: translateY(-20px) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(450px) translateX(25px);
    opacity: 0;
  }
}

/* --- Máscaras y Efectos de Imagen --- */
.mask-blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morphBlob 8s ease-in-out infinite;
  transition: all 1s ease-in-out;
}

.mask-blob:hover {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

@keyframes morphBlob {

  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

.mask-slant {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.animate-spin-slow {
  animation: spin 20s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.glass-badge {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Batalla Frío vs Calor Animación --- */
.zone-cold {
  animation: clash-desktop 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  z-index: 2;
}

@keyframes clash-desktop {

  0%,
  100% {
    clip-path: polygon(0 0, 50% 0, 40% 100%, 0 100%);
  }

  25% {
    clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
  }

  50% {
    clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
  }

  75% {
    clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
  }
}

@media (max-width: 768px) {
  .zone-cold {
    animation: clash-mobile 14s ease-in-out infinite;
  }

  @keyframes clash-mobile {

    0%,
    100% {
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 55%);
    }

    50% {
      clip-path: polygon(0 0, 100% 0, 100% 60%, 0 40%);
    }
  }

  #inicio .relative.z-20 {
    padding-top: 90px !important;
    padding-bottom: 32px !important;
  }

  #inicio .glass-panel h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }

  #inicio .glass-panel p {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }

  #inicio .glass-panel input,
  #inicio .glass-panel select {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #inicio .glass-panel .space-y-4 {
    gap: 0.5rem;
  }
}


@media (max-width: 480px) {
  .imgmenu {
    z-index: 100;
    position: absolute;
    left: 3vw;
    top: 30vh;
    width: 50%;
    object-fit: contain;
  }
}

/* Móviles */
@media (max-width: 768px) {
  .imgmenu {
    z-index: 100;
    position: absolute;
    left: 3vw;
    top: 30vh;
    width: 50%;
    object-fit: contain;
  }
}

/* Tablets */
@media (max-width: 1024px) {
  .imgmenu {
    z-index: 100;
    position: absolute;
    left: 3vw;
    top: 0vh;
    width: 50%;
    object-fit: contain;
  }
}

/* Laptops */
@media (max-width: 1280px) {
  .imgmenu {
    z-index: 100;
    position: absolute;
    left: 3vw;
    top: 25vh;
    width: 80%;
    object-fit: contain;
  }
}

/* Pantallas grandes */
@media (min-width: 1281px) {
  .imgmenu {
    z-index: 100;
    position: absolute;
    left: 3vw;
    top: 0vh;
    width: 50%;
    object-fit: contain;
  }
}