@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  /* Paleta Solicitada */
  --cafe-principal: #813f2b;
  --cafe-glow: rgba(129, 63, 43, 0.25);
  --blanco: #ffffff;
  --gris-claro: #f4f6f8;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* Fondo base oscuro */
  background-color: #0d0907; 
  /* Imagen de fondo con overlay para asegurar contraste */
  background-image: 
    linear-gradient(rgba(13, 9, 7, 0.85), rgba(13, 9, 7, 0.85)), 
    url('../img/aplicar2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  overflow: hidden;
  color: var(--blanco);
}

/* Fondo de Malla Dinámica con pulsación de datos en tonos café */
.mesh-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Gradientes radiales que actúan como luces sobre la imagen */
  background: radial-gradient(
      circle at 20% 30%,
      var(--cafe-glow) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(129, 63, 43, 0.15) 0%,
      transparent 50%
    );
  filter: blur(60px);
  animation: meshMove 20s infinite alternate ease-in-out;
}

@keyframes meshMove {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1) translate(1%, 1%);
  }
}

.glass-container {
  /* Panel con efecto de cristal esmerilado */
  background: rgba(30, 20, 15, 0.45); 
  backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

.input-premium {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gris-claro);
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-premium:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--cafe-principal);
  box-shadow: 0 0 20px rgba(129, 63, 43, 0.35);
  outline: none;
}

.fade-in {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInEffect 0.7s ease-out forwards;
}

@keyframes fadeInEffect {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Decoración de "líneas de datos" estilo tracker en café */
.data-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cafe-principal),
    transparent
  );
  width: 100%;
  position: absolute;
  opacity: 0.2;
  animation: scan 4s linear infinite;
}

@keyframes scan {
  0% {
    top: -10%;
  }
  100% {
    top: 110%;
  }
}

/* Utilidad para el gris claro en textos secundarios */
.text-secondary {
  color: var(--gris-claro);
  opacity: 0.75;
}

.text-cafe {
  color: var(--cafe-principal);
}