.btn-1,
.btn-2,
.btn-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.4em 1em;
  border: none;
  outline: none;
  border-radius: var(--br-btns);
  text-align: center;
  transition: all 0.3s;
  max-width: fit-content;
}
.btn-1 {
  background-color: var(--clr-accent-400);
  color: var(--clr-0);
}
.btn-1:hover {
  scale: 1.02;
}
/* ************** */
.eye {
  /* Estructura y forma */
  padding: 0.4em 1em;
  border-radius: var(--br-btns); /* Bordes muy redondeados (pill shape) */
  font-weight: 500;
  transition: all 0.3s ease;
  inline-size: fit-content;
  margin-inline: auto;

  /* Color de texto */
  color: #4a4439;

  /* Fondo transparente con un toque de color */
  background: rgba(255, 255, 255, 0.2);

  /* El borde fino ayuda a definir la silueta */
  border: 1px solid rgba(0, 0, 0, 0.05);

  /* Sombras: una interna y una externa suave */
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.05),
    /* Sombra exterior */ inset 0 0 10px rgba(255, 255, 255, 0.5); /* Brillo interior */

  /* Efecto Glassmorphism (opcional, para desenfocar el fondo) */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Efecto al pasar el mouse */
.eye:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}