@layer atoms {
  /* Etiqueta en mayúsculas sobre un titular: "PERIODONCIA E IMPLANTOLOGÍA · CIUDAD DE MÉXICO" */
  .eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* Igual que eyebrow, más pequeña: "ESPECIALIDAD" dentro de una tarjeta */
  .label {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .lead {
    font-size: var(--text-lead);
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 46ch;
  }

  /* Parte del titular en itálica y color de acento */
  .accent-italic {
    font-style: italic;
    color: var(--accent);
  }

  /* Enlace con flecha: "Conoce a la doctora →" */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: var(--tap-min);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;

    &::after { content: "→"; transition: translate 0.2s; }
    &:hover::after { translate: 3px 0; }
  }

  .link-arrow--underline {
    padding-inline: 0.625rem;
    font-size: 0.9375rem;
    border-block-end: 1.5px solid currentColor;
  }
}