/* styles.css - ajustes adicionales y utilidades */
/* Usa Tailwind para la mayoría de estilos; aquí definimos complementos. */

:root{
  --accent-from: #06b6d4;
  --accent-to: #7c3aed;
}

html,body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Gradients for text */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Modal visible class */
#card-modal.show {
  display: flex;
}

/* Make images look better in cards */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Accessibility: focus visible */
:focus {
  outline: 3px solid rgba(99,102,241,0.25);
  outline-offset: 2px;
}

/* Small screen adjustments */
@media (max-width: 640px) {
  h1 { font-size: 1.75rem; }
}