@font-face {
  font-family: "balatro";
  src: url("tipografia/balatro.otf") format("truetype");
}
body {
  padding-top: 80px;
  
}


.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #3c444c;

  /* 🔥 aquí está la magia */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.4),     /* sombra hacia abajo */
    inset 0 -2px 0 rgba(0, 0, 0, 0.822); /* línea sutil arriba */

  z-index: 1000;
}

/* Volver a la izquierda */
.nav a:first-child {
  position: absolute;
  left: 40px;
}

/* ESTE es el truco real */
.nav a:not(:first-child) {
  margin: 0 12px;
}






/* ESTILO BASE DE LOS BOTONES */
.nav a {
  /* Variables por defecto (Azul) */
  --bg: rgb(251, 149, 1);
  --shadow:rgb(251, 149, 1);

  font-family: "balatro", fantasy !important;
  color: white;
  background: var(--bg);
  border: 2px solid var(--shadow);
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.1s;
  position: relative;
  
  /* Usamos las variables en la sombra */
  box-shadow:
    0 -4px 0 var(--shadow),
    0 4px 0 var(--shadow),
    -4px 0 var(--shadow),
    4px 0 var(--shadow);
}

/* PERSONALIZACIÓN POR ID (Solo cambias las variables) */
#b1 { --bg: #fb4b3e; --shadow: #fb4b3e; } /* Verde */
#b2 { --bg: #9c71cb; --shadow: #9c71cb; } /* Rojo */
#b3 { --bg: #2b74f7; --shadow: #2b74f7; } /* Morado */
#b4 { --bg: #00a6c8; --shadow: #00a6c8; } /* Naranja */

/* EFECTOS GENERALES */
.nav a:hover {
  filter: brightness(1.2); /* Aclara el botón automáticamente al pasar el mouse */
  transform: translateY(-2px);
}

.nav a:active {
  transform: translateY(2px);
  /* Quitamos las sombras al presionar para dar efecto de hundimiento */
  box-shadow: none; 
}