/* =============================================
   GLOBAL.CSS — Estilos compartidos entre todas las páginas
   Variables, reset, animaciones y utilidades comunes
   ============================================= */

/* Variables de color del proyecto */
:root {
  --color-primario: #b7b6b6;
  --color-secundario: #616149;
  --color-degradado: linear-gradient(
    var(--color-primario),
    var(--color-secundario)
  );
  --blanco: #fbfbfb;
  --negro: #111111;
}

/* Reset global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
}

/* Animación de entrada */
.fade-in {
  animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animación de sombra pulsante (botones destacados) */
@keyframes sombra {
  0% {
    box-shadow: 3px 3px 5px var(--color-primario);
  }
  30% {
    box-shadow: 7px 7px 10px white;
  }
  70% {
    box-shadow: 6px 6px 5px var(--color-secundario);
  }
  100% {
    box-shadow: 8px 8px 10px var(--color-primario);
  }
}