@media (max-width: 768px) {
  body {
    color: var(--color-negro-contraste);
  }
  /* Override heading gradients so text remains readable */
  h1,
  .gradient-text {
    background-image: none;
    color: var(--epic-purple-emperor);
    -webkit-background-clip: initial;
    background-clip: initial;
    text-shadow: 1px 1px 2px rgba(var(--color-negro-contraste-rgb), 0.6);
  }

  /* Ensure menu button and sidebar links remain legible */
  .menu-item-button span,
  #sidebar .nav-links a {
    background-image: none;
    color: var(--epic-purple-emperor);
    -webkit-background-clip: initial;
    background-clip: initial;
    text-shadow: 1px 1px 2px rgba(var(--color-negro-contraste-rgb), 0.6);
  }

  /* Slightly stronger background for tagline ribbons */
  .tagline-background {
    background-color: rgba(var(--epic-purple-emperor-rgb), 0.5);
  }
}