/* components/titles.css */

/* Títulos principales y secundarios
   ============================================================ */

.content h1,
.content h2,
.site-footer h2,
.comments-section-title {
  display: inline-block;
  max-width: 100%;
  padding-block: 0.1em 0.04em;
  padding-inline: 0.03em 0.14em;
  color: var(--cta-primary);
  -webkit-text-fill-color: var(--cta-primary);
  -webkit-text-stroke: 0;
  line-height: 1.12;
  text-shadow: none;
}

@supports (
  (background-clip: text) or
  (-webkit-background-clip: text)
) {
  .content h1,
  .content h2,
  .site-footer h2,
  .comments-section-title {
    background-image: var(--display-text-gradient);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}